flex 布局

[cfour-hi]

• 使用 CSS 弹性盒子 - MDN
• Flex 布局教程：语法篇
• Flex 布局教程：实例篇
• Flexbox Froggy - 一个用来学CSS flexbox的游戏
• Flexbox playground

---

概念

元素设置 display: flex 或 display: inline-flex 则为 flex 容器，所有子元素都称之为 flex 项目。

flex 容器有 主轴 和 侧轴，主轴默认水平方向由左往右，侧轴默认垂直方向由上往下，所有 flex 项目默认沿主轴排列。

图片来源 - MDN

flex 容器可设置的 css 属性

1. flex-direction: 改变主轴和方向

   • row: 默认值，主轴水平方向由左往右
   • row-reverse: 主轴水平方向由右往左
   • column: 主轴垂直方向由上往下
   • column-reverse: 主轴垂直方向由下往上

2. flex-wrap: 当主轴一行无法容下所有 flex 项目时是否换行

   • nowrap: 默认值，不换行
   • wrap: 换行
   • wrap-reverse: 换行并且第一行在第二行下面

3. flex-flow: flex-direction + flex-wrap 的简写，默认值即二者默认值。

4. justify-content: flex 项目在主轴如何排列

   • flex-start: 默认值，沿主轴起点排列，后者对齐前者。
   • flex-end: 沿主轴终点排列，前者对其后者。
   • center: 居中排列
   • space-between: 两端对齐，flex 项目中间间隔距离相等。
   • space-around: flex 项目之间的间隔距离是 flex 项目与边距的两倍

5. align-items: flex 项目在侧轴如何排列

   • stretch: 默认值，如果 flex 项目没有设置高度或为 auto，这撑满 flex 容器。
   • flex-start: 默认值，沿侧轴起点排列，后者对齐前者。
   • flex-end: 沿侧轴终点排列，前者对齐后者。
   • center: 居中对齐
   • baseline: flex 项目的文字第一行基线对齐

6. align-content: 多根轴线的对齐方式，如何在 flex 容器的侧轴围绕 flex 项目分配空间

   • stretch: 默认值，轴线占满整个侧轴
   • flex-start: 沿侧轴起点排列，后者对齐前者。
   • flex-end: 沿侧轴终点排列，前者对齐后者。
   • center: 中心排列
   • space-between: 侧轴两端对齐，轴线之间间隔距离相等。
   • space-around: 轴线之间的间隔距离是轴线与边距的两倍

flex 项目可设置一下属性

1. flex-grow: 默认为 0，如果存在多余空间，flex 项目的放大比例，默认不放大。

   值越大，分配的空间越多，2 是 1 的两倍。

2. flex-shrink: 默认为 1，如果空间不足，flex 项目的缩小比例，默认等比缩小。

3. flex-basis: 默认为 auto，flex 项目占据主轴的空间（main size），浏览器根据此值来计算主轴是否有多余空间。

4. flex: flex-grow + flex-shrink + flex-basis 的简写，默认值即三者默认值。

   有两个快捷属性：auto => 1 1 auto; none => 0 0 auto

5. order: 默认为 0，项目的排列顺序，数值越小，排列越靠前。

6. align-self: 默认值 auto，覆盖 flex 容器的 align-items 属性。