flex父项常见属性
- flex-direction:设置主轴的方向
- justify-content:设置主轴上的子元素排列方式
- flex-wrap:设置子元素是否换行
- align-content:设置侧轴上的子元素的排列方式(多行)
- align-items:设置侧轴上的子元素排列方式(单行)
- flex-flow:复合属性,相当于同时设置了 flex-direction 和 flex-wrap
flex布局子项常见属性
- flex子项目占的份数
- align-self控制子项自己在侧轴的排列方式
- order属性定义子项的排列顺序(前后顺序)
flex 属性
flex 属性定义子项目分配剩余空间,用flex来表示占多少份数。
// flex 是flex-grow || flex-shink||flex-basis的简写,默认0 1 auto
.item {
flex: 1
}
-
flex-grow
-
剩余空间索取
默认值为0,不索取
eg:父元素400,子元素A为100px,B为200px.则剩余空间为100
此时A的flex-group为1,B为2,
则A=100px+1001/3; B=200px+1002/3
-
-
flex-shrink
-
子元素总宽度大于父元素如何缩小
默认为1,会被压缩
父400px,A 200px B 300px
AB总宽度超出父元素100px;
如果A不减少,则flex-shink :0,B减少;
如果B不减少,则flex-shink :0,A减少;
-
-
flex-basis
- 该属性用来设置元素的宽度,当然width也可以用来设置元素的宽度,如果设置了width和flex-basis,那么flex-basis会覆盖width值。