一、简介

弹性盒子布局（flexible box layout）是一维布局模型

我们先使用 display: flex 或 display: inline-flex 创建 flex container，然后它的子元素都是 flex item，它有主轴和交叉轴的概念

弹性盒子相关的属性

  • flex-direction：设置 flex container 的主轴方向
  • flex-wrap：设置 flex item 是强制放在一行还是可以放在多行
  • flex-flow：是 flex-direction 和 flex-wrap 的简写属性
  • flex-grow：设置 flex item 尺寸的增长系数
  • flex-shrink：设置 flex item 尺寸的收缩规则
  • flex-basis：设置 flex item 的初始尺寸
  • flex：是 flex-grow、flex-shrink、flex-basis的简写属性
  • order：设置 flex item 布局的顺序

对齐相关的属性

  • justify-content：设置 flex container 内部在主轴上如何给 flex item 分配空间
  • align-items：设置 flex item 在交叉轴的对齐方式
  • align-content：设置 flex container 在多行时在交叉轴的对齐方式
  • align-self：设置 flex-item 在交叉轴的对齐方式，覆盖已有的 align-items 值

二、各个属性

1. flex-direction

设置 flex container 的主轴方向

  • 默认值为 row
    1. row
    2. row-reverse
    3. column
    4. column-reverse

2. flex-wrap

设置 flex item 是强制放在一行还是可以放在多行

  • 默认值为 nowrap
    1. nowrap
    2. wrap

3. flex-flow

是 flex-direction 和 flex-wrap 的简写属性

  • 属性的依次顺序为 flex-direction、flex-wrap
    1. .test{
    2.   flex-flow: column wrap;
    3. }

4. flew-grow

设置 flex item 尺寸的增长系数

  • 默认值为 0 ``` .test{ flew-grow: 3; }

.test{ flex-grow: 0.6; }

  2. <a name="GRjtM"></a>
  3. ### 5. flex-shrink
  5. 设置 flex item 尺寸的收缩规则
  7. - 默认值为 1
  8. ```css
  9. .test{
  10.   flex-shrink: 2;
  11. }
  13. .test2{
  14.   flex-shrink: 0.6;
  15. }

6. flex-basis

设置 flex item 的初始尺寸

  • 默认值为 auto ```css / flew-item 的内容大小 / .test{ flex-basis: auto; }

.test{ flex-basis: 0; }

.test3{ flex-basis: 200px; }

  2. <a name="WBuKF"></a>
  3. ### 7. flex
  5. 是 flex-grow、flex-shrink、flex-basis 的简写属性
  7. - 属性的依次顺序为 flex-grow、flex-shrink、flex-basis
  8. - 当它为无单位的数时，它会被当作 flex-grow/flex-shrink 的值
  9. - 当它为有效的宽度值时，它会被当作 flex-basis 的值
  10. ```css
  11. /* 一个值，flex-grow */
  12. .test{
  13.     flex: 2;
  14. }
  16. /* 一个值，flex-basis */
  17. .test2{
  18.     flex: 30px;
  19. }
  21. /* 两个值，flex-grow、flex-basis */
  22. .test3{
  23.     flex: 1 30px;
  24. }
  26. /* 两个值，flex-grow、flex-shrink */
  27. .test4{
  28.     flex: 2 2;
  29. }
  31. /* 三个值 */
  32. .test5{
  33.     flex: 2 2 10%;
  34. }

8. order

设置 flex item 布局的顺序

  1. .test{
  2.     order: 2;
  3. }

9. justify-content

设置 flex container 内部在主轴上如何给 flex item 分配空间

  • 默认值为 flex-start
    1. flex-start
    2. center
    3. flex-end
    4. space-between
    5. space-around
    6. space-evenly

10. align-items

设置 flex item 在交叉轴的对齐方式

  • 默认值为 strench
    1. strench
    2. flex-start
    3. center
    4. flex-end
    5. baseline

11. align-content

flex container 在多行时在交叉轴的对齐方式

  1. strench
  2. flex-start
  3. center
  4. flex-end
  5. space-between
  6. space-around

12. align-self

设置 flex-item 在交叉轴的对齐方式，覆盖已有的 align-items 值

  1. strench
  2. flex-start
  3. center
  4. flex-end
  5. baseline

三、参考链接

弹性盒子布局 - MDN：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
弹性盒子的基本概念 - MDN：Basic_Concepts_of_Flexbox
Flex 布局教程（语法篇）- 阮一峰：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html


[

](https://developer.mozilla.org/en-US/docs/Web/CSS/flex)