flex布局布局之flex:1属性详解

弹性布局基本概念

采用Flex布局的元素，称为 Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

flex:1属性详解

基本概念

flex属性是flex item的属性，也就是flex布局的容器里所有子元素的属性。
flex属性是flex-gorw,flex-shrink,flex-basis三个属性的简写，默认值为0 1 auto。后两个属性可选。
该属性有两个快捷值: auto(1,1,auto)和none(0,0,auto)。
建议优先使用这个属性，而不是分离使用三个属性，因为浏览器会推算相关值。

flex的取值分析

flex取auto和none

.item {
   
	flex: auto
}
等同于
.item {
   
	flex-grow: 1;