Html布局之CSS属性Flex
⼀、Flex是什么
Flex 是 Flexible Box 的缩写，意为"弹性布局"，⽤来为盒状模型提供最⼤的灵活性。
⾏内元素（display：inline）也可以事⽤Flex进⾏布局（display:inline-flex）。
webkit内核的浏览器使⽤⽅式：display:-webkit-flex
注意，设为 Flex 布局以后，⼦元素的float、clear和vertical-align属性将失效。
⼆、Flex概念解析
1. 采⽤ Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有⼦元素⾃动成为容器成员，称为 Flex 项⽬（flex
item），简称"项⽬"。
2. 容器默认存在两根轴：⽔平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，
结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
3.
项⽬默认沿主轴排列。单个项⽬占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
三、Flex容器属性介绍
1.  flex-direction属性：⽤于设置主轴的排列⽅式。属性值包含（row：主轴⽔平⽅向，起点在左端；row-reverse：主轴⽔平⽅向，起点在右
端；column：主轴垂直⽅向，起点在上⽅；column-reverse：主轴垂直⽅向，起点在下⽅）
2. flex-wrap属性：⽤于设置主轴的项⽬换⾏⽅式。属性值包含（nowrap：不换⾏；wrap：换⾏，第⼀⾏在上⽅；wrap-reverse：换⾏，第⼀
⾏在下⽅）；默认值为不换⾏
3. flex-flow属性：是flex-direction属性和flex-wrap属性的简写形式。默认值为：row nowrap
4. justify-content属性：设置项⽬在主轴上的对齐⽅式。属性值包含（flex-start：左对齐；flex-end：右
对齐；center：居中；space-between:
两端对齐，项⽬之间的间隔相等；space-around：每个项⽬两侧的距离相等，项⽬之间的间隔⽐两端的间隔⼤⼀倍）
5. align-items属性：设置项⽬在交叉轴如何对齐。属性值包含（flex-start：交叉轴起点对齐；flex-end：交叉轴终点对齐；center：交叉轴居中
对齐；baseline：项⽬⽂字的第⼀⾏基线对齐；stretch（默认值）：如果项⽬未设置⾼度或设置为auto，将占据整个交叉轴）
6. align-content属性：设置多跟轴线的对齐⽅式。只有⼀根轴线时，该属性不起作⽤。属性值包含（flex-start：与交叉轴的起点对齐；flex-
end：与交叉轴的终点对齐；ceneter：与交叉轴的中点对齐；space-between：与交叉轴的两端对齐，轴线之间间隔平均分布；space-around：每根轴线的间隔都是相等，即轴线间隔⽐轴线到边框的距离⼤；stretch：轴线沾满整个交叉轴（默认值））
flex布局详细讲解四、Flex项⽬属性介绍
1. order属性：定义项⽬的排列顺序，越⼩越靠前；默认值为0；
2. flex-grow属性：定义项⽬的放⼤⽐例，默认值为0，即存在剩余空间也不会放⼤；所有项⽬的flex-grow属性设置为1的时候，等分剩余
空间；如果其中有⼀个项⽬的flex-grow属性设置为2，那么这个项⽬将⽐其他的项⽬的所占剩余空间⼤⼀倍；也就是说数值越⼤占的剩余空间越多，相同的等分剩余空间；
3. flex-shrink属性：定义项⽬的缩⼩⽐例，默认值为1，即空间不⾜，就会缩⼩；如果所有项⽬的该属性值都为1，那么就会全部等⽐缩
⼩，如果其中有⼀个项⽬的该属性值为0，则该项⽬不进⾏缩⼩，其他的缩⼩；缩⼩的情况都是基于空间不⾜的时候，属性值设置为负数⽆效
4. flex-basis属性：设置在分配多余空间之前，项⽬在主轴占据的空间；浏览器根据此属性计算主轴是否有多余空间；属性值（auto：默认
值，即项⽬本来的⼤⼩；固定像素数值：项⽬占据固定空间⼤⼩）
5. flex属性：是flex-grow,flex-shrink和flex-basis的简写；默认值：0 1 auto
6. align-self属性：设置单个项⽬的对齐⽅式，会覆盖align-items属性，默认值auto，继承⽗元素的属性，如果没有⽗元素，则等同于
stretch。属性值（auto/flex-satrt/flex-end/center/baseline/stretch）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。