【CSS】flex 弹性布局

弹性盒布局

IE 11 或更低版本不支持；移动端没有兼容问题。

display: flex; /* 开启弹性盒布局 */

• 容器：设置了 display: flex; 的元素（flex container）
• 项目：容器的子元素（flex item）
• 用于通过 container 控制 item 的布局

特性

1. 默认会将所以的子元素并排成一行，自动分配空间
2. 子元素 width 默认由内容撑开
3. 子元素 height 默认继承父级高度
4. 不能与绝对定位相容，因为绝对定位会脱离文档流

容器属性

flex-direction

设置主轴方向

flex-direction: row; /* → */ /* 默认 */
flex-direction: row-reverse; /* ← */
flex-direction: column; /* ↓ */
flex-direction: column-reverse; /* ↑ */

flex-wrap

设置换行

默认不换行：当项目总 width > 容器 width 时，会缩小项目的 width

flex-wrap: nowrap; /* 默认 */

flex-wrap: wrap; /* 往 ↓ 换行 */
flex-wrap: wrap-reverse; /* 往 ↑ 换行 */

flex-flow

复合写法：主轴 & 换行

flex-flow: <flex-direction> <flex-wrap>;

justify-content

设置主轴上的项目排列方式

justify-content: flex-start; /* 沿着主轴起点紧密排列 */  /* 默认 */
justify-content: flex-end; /* 沿着主轴终点紧密排列 */
justify-content: center; /* 居中 */
justify-content: space-between; /* 两端对齐，子元素之间自动留有空隙 */
justify-content: space-around; /* 父子元素之间也有空隙，为子元素之间的空隙的一半 */
justify-content: space-evenly; /* 父子元素之间的空隙 = 子元素之间的空隙 */

align-items

设置侧轴上的项目排列方式（单行）

• 有换行时，无效。

align-items: center; /* 居中 */
align-items: flex-start; /* 沿着侧轴起点紧密排列 */  /* 默认 */
align-items: flex-end; /* 沿着侧轴终点紧密排列 */
align-items: stretch; /* 拉伸，占满父级侧轴上的宽度 */	  	       

• stretch：设置了 height 的项目不会被拉伸。所以设置 stretch 时要把 height 去掉

align-content

设置侧轴上的项目排列方式（多行）

• 设置了 flex-wrap 后（换行后），需要使用 align-content 设置项目在侧轴上的排列。
• 无换行时，无效。

align-content: center; /* 居中 */
align-content: flex-start; /* 沿着侧轴起点紧密排列 */  /* 默认 */
align-content: flex-end; /* 沿着侧轴终点紧密排列 */
align-content: space-between; /* 两端对齐，子元素之间自动留有空隙 */
align-content: space-around; /* 父子元素之间也有空隙，为子元素之间的空隙的一半 */
align-content: space-evenly; /* 父子元素之间的空隙 = 子元素之间的空隙 */

项目属性

flex-grow

控制项目的放大

• 条件：项目的总 width < 父级 width
• 默认为 0，即不放大
• 设置了 >0 的项目，会按比例瓜分父级剩余的宽度

flex-grow: 0;

flex-shrink

控制项目的缩小

• 条件：项目的总 width > 父级 width
• 默认为 1，即所有项目等比缩小
• >1 缩小；<1 放大；不能为负数
• 为 0 时，不缩小

flex-shrink: 1;

一行元素中，某项目设置了 flex-shrink > 1，会缩小该项目的 width，其他项目会平分其缩小的宽度

flex-basis

设置项目在主轴方向上的尺寸

• 默认为 auto，即为 width / height 属性值（具体看主轴方向）
• 设置了指定数值后，权重会比 width / height 高，会覆盖 width / height 属性

flex-basis: 100px;

flex

复合写法：放大 & 缩小 & 宽度

flex: <flex-grow> <flex-shrink> <flex-basis>; /* 后面两个可不写 */

1. auto - - - 1 1 auto - - - 等比放大缩小
2. none - - - 0 0 auto - - - 定死宽高
3. 其他特定数值：

flex: 1 0 200px;

align-self

用于控制单个项目在侧轴上的排列方式

align-self: flex-start; /* 沿着侧轴起点紧密排列 */ /* 默认 */
align-self: flex-end; /* 沿着侧轴终点紧密排列 */
align-self: center; /* 居中 */
align-self: stretch; /* 元素被拉伸以适应容器 */

• stretch：设置了 height 的项目不会被拉伸。所以设置 stretch 时要把 height 去掉

order

用于控制项目的排列顺序

• 默认为 0，可正可负
• 越小越前，越大越后

order: 0;

flex 居中

div {
    display: flex;
    justify-content: center;
    align-items: center;
}