- flex是弹性布局,是现在主流的布局方式。
- 属性:row,column,flex-start,flex-end,center,space-around,space-between
- 工作中我常用:space-between,justify-content,align-items,flex:1
flex布局 父盒子属性 display:flex 开启弹性布局 flex-direction 设置主轴的方法 默认是row,column justify-content 主轴对齐方式 space-between center space-around align-items 侧轴对齐方式 stretch center flex-wrap 是否换行 flex-flow 了解一下 是复合属性 是flex-direction+flex-wrap简写 flex-flow:column wrap;等价于flex-wrap:wrap+flex-direction:column; align-content:了解一下 设置当有换行的时候就会有多个轴线,设置行与行之间对齐方式,只有在多行的时候才有效果
flex布局所有的属性总结: 父盒子 display:flex(开启弹性布局) flex-direction:默认是row可以设置column; justify-content:主轴对齐方式 align-items设置侧轴对齐方式 flex-wrap 设置是否换行 flex-flow 是一个复合属性 相当于flex-direction和flex-wrap简写 align-content 只有当flex-wrap换行的时候有多个轴线的时候才有效果 子盒子 order 子盒子顺序 flex-grow flex-shrink flex-basis flex align-self 和align-items一模一样 区别就是一个设置全部子元素,一个设置的是自己
子盒子属性 order 设置兄弟子元素的排列顺序 值越小越靠前 flex-grow,flex-shrink 放大比例和缩小比例 flex-basis 默认设置的是剩余空间,如果把这个值变成0%,就会等分 flex这是一个复合属性 flex:1;-> flex-grow:1;+flex-shrink:1;+flex-basis:0%; align-self 这个设置自己的侧轴对齐方式