flex布局

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值。