Flexbox 布局

Flex 弹性布局

基本属性

容器存在 两个轴水平(main axis)和垂直(cross axis)。

主轴左边开始 main start->main end,交叉轴上开始 cross start -》 cross end

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

容器的属性

display 属性

• flex 容器
• inline-flex 行内元素

容器

• 主轴（main axis）：伸缩容器的主轴，伸缩项目主要沿着这条轴进行排列布局。小心，它不一定是水平的；这主要取决于“justify-content”属性（详细见下文）。
• 主轴起点（main-start）和主轴终点（main-end）：伸缩项目放置在伸缩容器内从主轴起点（main-start）向主轴终点（main-start）方向。
• 主轴尺寸（main size）：伸缩项目在主轴方向的宽度或高度就是主轴的尺寸。伸缩项目主要的大小属性要么是宽度，要么是高度属性，由哪一个对着主轴方向决定。
• 侧轴（cross axis）：垂直于主轴称为侧轴。它的方向主要取决于主轴方向。
• 侧轴起点（cross-start）和侧轴终点（cross-end）：伸缩行的配置从容器的侧轴起点边开始，往侧轴终点边结束。
• 侧轴尺寸（cross size）：伸缩项目的在侧轴方向的宽度或高度就是项目的侧轴长度，伸缩项目的侧轴长度属性是「width」或「height」属性，由哪一个对着侧轴方向决定。

容器设置

1. flex-direction 决定主轴的方向

/* row ：主轴为水平方向，起点在左端 */
/* column ：主轴为水平方向，起点在左端 */
.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

2. flex-wrap flex-wrap属性定义，如果一条轴线排不下，如何换行

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

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

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

4. justify-content 属性定义了项目在主轴上的对齐方式

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
//flex-start（默认值）：左对齐
//flex-end：右对齐
//center： 居中
//space-between：两端对齐，项目之间的间隔都相等。
//space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

5. align-items 定义项目在交叉轴上如何对齐

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
//flex-start：交叉轴的起点对齐。
//flex-end：交叉轴的终点对齐。
//center：交叉轴的中点对齐。
//baseline: 项目的第一行文字的基线对齐。
//stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

6. align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
//flex-start：与交叉轴的起点对齐。
//flex-end：与交叉轴的终点对齐。
//center：与交叉轴的中点对齐。
//space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
//space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
//stretch（默认值）：轴线占满整个交叉轴