flex布局

1. flex 布局简介

flex 是 flexible box 的缩写，意思是 弹性布局 或 弹性盒子，是 CSS3 中一种新的布局模式，可以简单、完整、响应式地实现各种页面布局，当页面需要适应不同的屏幕大小以及多种设备类型时非常适合用flex布局，目前 几乎所有的浏览器都支持 flex 布局，特别是在移动端
 

2. 开启 flex 布局

 开启 flex 布局，只需将元素的 display 属性设置为 flex
⚠️ 注意：开启弹性布局后，子项的 float、clear 和 vertical-align 属性将失效

<div class="container"></div>
1
.container {
    display: flex;
}
开启 Flex 布局的元素称为 Flex 容器，简称 容器 ，容器的所有子元素将自动成为容器的成员，称为 Flex 子项，简称 子项

 

3. 容器属性

flex-direction 主轴方向（X）

flex-direction 属性决定主轴的方向，从而决定子元素在容器中的位置，共有四个值可选

flex-direction 属性决定主轴的方向，从而决定子元素在容器中的位置，共有四个值可选

flex-direction: row | row-reverse | column | column-reverse;

row（默认）：子项从左向右排列，此时x轴为主轴

 

row-reverse：子项从右向左排列，反转

 

column：子项从上向下排列，此时y轴为主轴

 

column-reverse：子项从下向上排列，反转

 

flex-wrap 是否换行

flex-wrap 属性用于指定弹性布局中子项是否换行，默认不换行，共有三个值可以选

flex-wrap: nowrap | wrap | wrap-reverse;

nowrap（默认）：不换行，所有子项目单行排列，子项可能会溢出

wrap：换行，所有子项目多行排列，溢出的子项会被放到下一行，按从上向下顺序排列

wrap-reverse：所有子项目多行排列，按从下向上顺序排列

⚠️ 注意：使用该属性，需要为弹性容器添加固定宽度，当弹性容器宽度超过子项宽度总和时，值设为 wrap 或 wrap-reverse 均不起效果

flex-flow 简写属性

flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap，这里就不写例子了，一写就明白了

flex-flow: < 'flex-direction' > || < 'flex-wrap' >;
flex-flow: row nowrap;
flex-flow: row wrap;
flex-flow: row wrap-reverse;
flex-flow: column nowrap;
flex-flow: column wrap;
flex-flow: column wrap-reverse;

justify-content 主轴对齐方式

 justify-content 属性定义了子项在 主轴（水平方向x轴）上的对齐方式，可选值有

justify-content: flex-start | flex-end | center | space-between | space-around;

flex-start（默认）：弹性容器子项按主轴起点线对齐

flex-end：弹性容器子项按主轴终点线对齐 

center： 居中排列

space-between：弹性容器子项均匀分布，第一项紧贴主轴起点线，最后一项紧贴主轴终点线，子项目之间的间隔都相等。要注意特殊情况，当剩余空间为负数或者只有一个项时，效果等同于 flex-start

space-around：弹性容器子项均匀分布，每个项目两侧的间隔相等，相邻项目之间的距离是两个项目之间留白的和。所以，项目之间的间隔比项目与边框的间隔大一倍。要注意特殊情况，当剩余空间为负数或者只有一个项时，效果等同于center

space-evenly：弹性容器子项均匀分布，所有项目之间及项目与边框之间的距离相等

⚠️ 仅当 flex-direction 为 row 时生效，因为 justify-content 仅定义子项在水平方向上的对齐方式

align-items 交叉轴对齐方式(Y由上到下)

 align-items 属性定义弹性容器子项在交叉轴（垂直方向）上的对齐方式，可选值：

align-items: flex-start | flex-end | center | baseline | stretch;

 stretch（默认）：当子项未设置高度或者高度为 atuo 时，子项的高度设为行高。这里需要注意，在只有一行的情况下，行的高度为容器的高度，即子项高度为容器的高度（当子项设定了高度时无法展开）

flex-start：子项与交叉轴的起点线对齐

flex-end：子项与交叉轴的终点线对齐(即Y轴底部) 

center：与交叉轴的中线对齐

baseline：基线对齐，当行内轴与侧轴在同一线上，即所有子项的基线在同一线上时，效果等同于flex-start

align-content 多根轴线对齐方式

📌 align-content 属性定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性不起作用，简单说就是盒子内部的元素超过了盒子项的宽度（默认）出现了换行，也就是有多行才可以

align-content: flex-start | flex-end | center | space-between | space-around | stretch;
stretch（默认）：轴线占满整个交叉轴（当子项设定了高度时无法展开）

flex-start：各行与交叉轴的起点线对齐

flex-end：各行与交叉轴的终点线对齐

center：各行与交叉轴的中线对齐

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。要注意特殊情况，当剩余空间为负数时，效果等同于flex-start

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。要注意特殊情况，当剩余空间为负数时，效果等同于center

⚠️ 注意：该属性只作用于多行的情况（flex-warp: wrap / warp-reverse），在只有一行的弹性容器上无效，该属性可以很好的处理换行以后相邻行之间产生的间距。

总结

1.开启 flex 布局

.container {
  display: flex;
}
1
2
3
2.容器属性

.container {
    flex-direction: row | row-reverse | column | column-reverse;
    /* 主轴方向: 左到右（默认）| 右到左 | 上到下 | 下到上 */

    flex-wrap: nowrap | wrap | wrap-reverse;
    /* 换行: 不换行（默认）| 换行 | 换行并第一行在下方 */

    flex-flow: <flex-direction> | <flex-wrap>
    /* 主轴方向和换行简写 */

    justify-content: flex-start | flex-end | center | space-between | space-around;
    /* 主轴对齐方式: 左对齐（默认） | 右对齐 | 居中对齐 | 两端对齐 | 平均分布 */

    align-items: flex-start | flex-end | center | baseline | stretch;
    /* 交叉轴对齐方式: 顶部对齐（默认）| 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐 */

    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    /* 多主轴对齐: 顶部对齐（默认）| 底部对齐 | 居中对齐 | 上下对齐并铺满 | 上下平均分布*/
}

目录

1. flex 布局简介

2. 开启 flex 布局

3. 容器属性

flex-direction 主轴方向（X）

flex-wrap 是否换行

flex-flow 简写属性

justify-content 主轴对齐方式

align-items 交叉轴对齐方式(Y由上到下)

align-content 多根轴线对齐方式

总结

---