CSS之弹性盒模型

传统布局手段有：display-position-float

此篇讲现代布局——flex。

Flex

一、Flex 布局核心概念与机制

Flexbox是CSS3引入的一种一维布局模型，旨在提供更高效的方式来布局、对齐和分配容器内项目的空间。其核心概念包括:

容器与项目:

采用 Flex 布局的元素称为 Flex 容器，其内部的子元素称为 Flex 项目。

主轴与交叉轴:

Flex 容器有两根轴，主轴由flex-direction定义，交叉轴垂直于主轴。

空间分配:

通过 flex-basis、flex-grow和 flex-shrink 控制项目在主轴上的初始大小、放大和缩小比例。

对齐方式:

justify-content控制主轴对齐，align-items和 align-content 控制交叉轴对齐。

Flex布局原理:

就是通过给父盒添加flex属性，来控制子盒的位置排列方式。采用flex布局的父元素，称为flex容器，它的所有子元素自动称为容器成员，称为flex项目。当我们为父盒设置flex属性后，其子盒的float，clear属性中的vertical-align将失效。

二、容器的属性

主轴、交叉轴可理解为X、Y轴。

1.flex-direction：指定弹性子元素在父容器中的位置。

属性值——

• row: 主轴为水平方向，起点在左端(默认)
• row-reverse:主轴为水平方向，起点在右端（反转）
• column:主轴为垂直方向，起点在上沿
• column-reverse:主轴为垂直方向，起点在下沿

2.flex-wrap：默认情况，所有项目，会在一行显示，如需要换行，可添加 fiex-wrap。

属性值——

• nowrap:不换行(默认)
• wrap:换行，第一行在上方
• wrap-reverse:换行，第一行在下方。

3.flex-flow：是 flex-direction属性 和 flex-wrap属性 的简写形式：fex-flow: row wrap

属性值——

• row nowrap:水平排列，不换行
• row wrap:水平排列，换行
• column wrap:垂直排列，换行

4.justify-content：项目在主轴上的对齐方式

（flex-direction:row 时为主轴|fex-direction:column 时为侧轴）

属性值——

• flex-start:项目左对齐(默认)
• flex-end:项目右对齐
• center:项目居中对齐
• space-between:项目两端对齐，容器首尾不留距离
• space-around:也相当于两端对齐，容器首尾留有距离。

5.align-items (适用于不换行的情况)

-项目在交叉轴(侧轴)上如何对齐

oflex-direction:row时为侧轴|fex-direction:column 时为主轴

属性值——

• flex-start:项目顶部对齐
• flex-end :项目尾部对齐
• center :项目居中对齐
• baseline:项目的第一行文字的基线对齐
• stretch:如项目 未设置高度 或 设为auto，拉伸与容器同高(默认)

6.align-content

-项目在交叉轴(侧轴)上如何对齐(多行情况下生效)

属性值——

• flex-start: 侧轴 起点对齐
• flex-end:侧轴 终点对齐
• center:侧轴 居中对齐
• space-between:两端对齐，容器首尾不留距离
• space-around:相当两端对齐，容器首尾留有距离
• mstretch:(默认)

三、项目的属性

1.order：项目的排列顺序。

数值越小，排列越靠前，默认为0

• order：0，保持项目原来的位置
• order：-1，位置为第1，排在所有项目前面
• order:1，位置为最后，排在所有项目末尾

2.flex-grow(扩大)：定义项目的放大比例。

• 默认为0:如容器存在剩余空间，保持原大小，不放大
• 项目 flex-grow属性都为1，即项目平均分配剩余间(所有项目宽度一样)
• 某个项目 flex-grow属性为2，其他项目都为1，那么为2的项目宽度是为1的2倍

3.flex-shrink(缩小)：定义项目的缩小比例,

• 默认为1:如容器空间不足，该项目缩小。
• 项目 flex-shrink 属性都为1，当容器空间不足时，所有项目等比例缩小(默认)。
• 某个项目 flex-shrink 属性为0，其他项目都为1，当窗口空间不足时，为0的项目不缩小

4.flex-basis :定义在分配多余空间之前，项目占据的主轴空间(main size)。

• 它的默认值为 auto，保持项目的本来大小，不作任何宽度改变。
• 可设为跟 width 或height属性一样的值(如200px)，则被定义的项目宽度将为200px
• 也可以设置 flex-basis:10%，将占据空间的10%

5.flex:f1ex-grow,flex-shrink 和 flex-basis 的简写

• 默认值为:0 1 auto。后两个属性可选
• 该属性有两个快捷值:auto(1 1  auto)和none(0  0  auto)
• flex:1相当干:只设置了flex-grow。。 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

6.align-self

• 允许单个项目有与其他项目不一样的对齐方式，可覆盖a1ign-items 属性。
• 默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。
• 该属性可能取6个值，除了auto，其他都与align-items属性完全一致
• 属性值: auto|flex-start|flex-end|center |baseline |stretch