flex

标 签:

1.盒子模型相关,box-sizing:

    content-box 普通的,默认的例子模型,padding,border属性时,盒子是朝外扩展的

    border-box 边框盒子模型,padding,border属性时,盒子是朝内扩展的

    calc(css公式函数)用来计算大小的,比如四个div宽度为25%,浮动成一行,加个border,或者padding会成二行,这个时候用

width:calc(25% - 2px)这样就可以了,但要注意的是头号两这得加空格,

    但一般这样不会用calc,可以设置盒子属性为 box-sizing:border-box,就好了

2.flex弹性布局; 在父级上加入属性 display:flex 就可以了,

   如果父级加了flex属性后,子级默认就是浮动的,float,clear 等属性就没有用了

   现在说说父级的属性

/** 定义当前的为flex弹性布局 **/
display:flex

/** 子元素横向排列方式 **/
justify-conent: center 居中 | 居左(默认) flex-start | 居右 flex-end | 两端对齐 space-between | 所有子元素margin相同 space-arund

/** 子元素纵向排列方式 **/
align-items:center 居中 | 从上到下(默认) flex-start | 从下到上 flex-end 

/** 子元素排列方向 **/
flex-direction:row 横向排列 |  横向反排 row-reverse | 纵向排列 column | 纵向反排 column-reverse

/** 子元素显示换行 **/
flex-wrap:no-wrap (默认)不换行 | wrap 换行

/** 排除简写 **/
flex-flow:<flex-direction> <flex-wrap>

 下面说说子元素属性

flex:n 表示平分父级宽度里占几份
align-self: 覆盖父级继承的 align-items 属性
flex-grow:1 定义子元素放大比例
order: 规定子元素顺序,越小越靠前


CSS / 评 论 (0) / 热度 (217℃) / 2019-04-21 / 阅读全文  / MaWei