flex 布局详解，掌握这套精编Java高级面试题解析

详细的知识点：【重识 HTML + CSS】知识点目录

flex 简介

==========================================================================

flex 布局（Flexible 布局，弹性布局）是在小程序开发中经常使用的布局

官方文档：

https://www.w3.org/TR/css-flexbox-1/

https://www.w3.org/TR/css-align-3/

开启了 flex 布局的元素叫 flex container

• flex container 里面的直接子元素叫做 flex items

设置 display 属性为 flex 或者 inline-flex 可以成为 flex container

• display: flex： flex container 以 block-level 形式存在

• display: inline-flex： flex container 以 inline-level 形式存在

应用在 flex container 上的 CSS 属性：

• flex-flow

• flex-direction

• flex-wrap

• justify-content

• align-items

• align-content

应用在 flex items 上的 CSS 属性：

• flex

• flex-grow

• flex-basis

• flex-shrink

• order

• align-self

flex container 相关属性

======================================================================================

看到 align 属性就是针对 corss axis；

后面跟 items 就是针对单个 item；后面跟 content 就是针对整个模块。

flex 模块布局

flex-direction：设置 main axis 的方向

flex items 默认都是沿着 main axis（主轴） 从 main start 开始往 main end 方向排布

flex-direction 决定 了 main axis 的方向，有 4 个取值：

• row（默认值）

  

• row-reverse

  

• column

  

• column-reverse

  

justify-content：设置 flex items 在 main axis 对齐方式

justify-content 决定了 flex items 在 main axis 上的对齐方式

• flex-start（默认值）：与 main start 对齐

• flex-end：与 main end 对齐

• center：居中对其

• space-between：

  flex items 之间的距离相等

  与 main start、main end 两端对齐

• space-evenly：

  flex items 之间的距离相等

  flex items 与 main start，main end 之间的距离等于 flex items 之间的距离

• space-around：

  flex items 之前的距离相等

  flex items 与 main start，main end 之间的距离是 flex items 之间距离的一半

  

align-items：设置 flex items 在 cross axis 对齐方式

cross axis（交叉轴），必定与 main axis（主轴）垂直，见 flex模型布局

align-items 决定了 flex items 在 cross axis 上的对齐方式

• stretch（默认值）：当 flex items 在 cross axis 方向上的 size 为 auto 时，会自动拉伸至填充

• flex-start：与 cross start 对齐

• flex-end：与 cross end 对齐

• center：居中对齐

• baseline：与基准线对齐

  

flex-wrap：设置 flex container 单行还是多行

flex-wrap 决定了 flex container 是单行还是多行

• nowrap（默认）：单行

• wrap：多行

• wrap-reverse：多行（对比 wrap，cross start 与 cross end 相反）

flex-flow：简写属性 (flex-direction || flex-wrap)

flex-flow 是 flex-direction || flex-wrap 的简写

• flex-flow：column wrap 等价于：

  flex-direction：column

  flex-wrap：wrap

• flex-flow：row-reverse 等价于：

  flex-direction：row-reverse

  flex-wrap：nowrap

• flex-flow：wrap 等价于：

  flex-direction：row

  flex-wrap：wrap

align-content：多行 flex items 在 cross axis 上的对齐方式

align-content 决定了多行 flex items 在 cross axis 上的对齐方式，用法与 justify-content 类似

• stretch（默认值）：与 align-items 的 stretch 类似

• flex-start：与 cross start 对齐

• flex-end：与 cross end 对齐

• space-between：

  flex items 之间的距离相等

  与 cross start，cross end 两端对齐

• space-around：

  flex items 之间的距离相等

  flex items 与 cross start，cross end 之间的距离是 flex items 之间距离的一半

• space-evenly：

  flex items 之间的距离相等

  flex items 与 cross start，cross end 之间的距离等于 flex items 之间的距离

总结

• flex-flow 是 flex-direction || flex-wrap 的简写

• flex-direction 设置主轴（main axis）的方向

• flex-wrap 设置是否能换行

• justify-content 设置 flex items 在 main axis 上的对齐方式

• align-items 设置 flex items 在 cross axis 上的对齐方式（一般是针对单行）

• align-content 设置 flex items 在 cross axis 上的对齐方式（一般是针对多行）

flex items 相关属性

==================================================================================