玩转 CSS Flexbox 弹性布局

1. 创建 flex 容器

给任何一个元素添加 display: flex; 就可以创建一个 flex 块级容器

1. <style>
2. .container {
3. background-color: #abcdef;
4. width: 100px;
5. height: 100px;
6. display: flex;
7. }
8. .item {
9. width: 150px;
10. height: 50px;
11. background-color: pink;
12. }
13. </style>
15. <div class="container">
16. <div class="item">1</div>
17. <div class="item">2</div>
18. </div>
20. <span class="container">
21. <div class="item">1</div>
22. <div class="item">2</div>
23. </span>

通过上面代码可以得出两个结论

1. 无论元素是什么类型，只要设置了 display: flex;，该元素就会被设置为 flex 块级元素。span 上行内元素，不能设置宽高，因为被设置为了 flex 容器，所以上面代码中 span 元素也能被设置宽高
2. 子元素在主轴方向上排列时，如果超出了容器的宽度，会忽略自身的宽度，自适应容器宽度的变化。上面代码中子元素宽度被设定为 150px，但是实际展示的是 50px

2. 主轴方向与多行容器

设置容器的主轴方向和多行容器

flex-direction 属性值

flex-wrap 属性值

flex-flow 属性值

1. flex-flow: 主轴方向 多行容器(是否换行);

3. 主轴项目对齐方式

只有一个属性: justify-content，常用属性值如下表

4. 交叉轴项目对齐方式

只有一个属性: align-items，常用属性值如下表

特别注意: 单行容器中，交叉轴中只有一行项目，所有剩余空间不需要在项目间进行分配，因此没有像主轴对齐的三个属性值: space-between, space-around,space-evenly

5. 多行容器项目对齐方式

只有一个属性: align-content，常用属性值如下表

6. 单个项目在交叉轴上的的对齐方式

只有一个属性: align-self，常用属性值如下表

7. 单个项目的排列顺序

order 属性

站长源码网

8. 项目在主轴上的放大因子

flex-grow 属性

在主轴上存在剩余空间时，该属性才有意义。该属性的值称为放大因子，常见的属性值如下:

9. 项目在主轴上的缩小因子

flex-shrink 属性

在主轴上空间容纳不下所有项目时，flex-shrink 才有意意义，该属性的值称为缩小因子，常见的属性值如下:

10. 项目在主轴上的计算基准尺寸

flex-basis 属性

1. 在分配多余空间之前，项目占据的主轴空间
2. 浏览器根据这个属性，计算主轴是否有多余空间
3. 该属性会覆盖项目原始大小（width/height）
4. 该属性会被项目的 min-width，min-height 值覆盖

1. 优先级: width/height < flex-basis < min-width/min-height

11. 项目缩放的简写

项目放大，缩小与计算尺寸，对于项目非常重要，也很常用。每次都要写这三个属性，非常的麻烦，且没有必要，flex 属性可以将上面三个属性简化，语法格式:

1. flex: flex-grow flex-shrink flex-basis;

三值语法:

举例

双值语法:

举例

单值语法:

举例