Flex，即Flexible Box，是一种布局模式，它可以让我们更加轻松地设计能够自适应不同设备的布局。在移动端和响应式设计方面使用广泛。
在开发app时，Flex可以帮助开发者更加灵活地控制元素的排列和大小，让app内容随着不同设备的分辨率发生自动的变化。下面将介绍Flex的原理和使用方法。
Flex的原理
Flex是通过将容器分为行或列，并将它们的子元素沿这些行或列排列来管理布局的。行或列中的子元素之间的空间分配是根据它们之间的比例来计算的。
容器：Flex布局模式基于容器和其子元素。容器是由display:flex或display:inline-flex属性定义为Flex的一个HTML元素。
轴：Flex容器有两个轴：主轴和交叉轴。主轴是沿着Flex容器的主方向进行排列的，而交叉轴是垂直于主轴的方向。
Flex子元素属性：主要属性有flex-grow、flex-shrink、flex-basis
- flex-grow：该属性定义Flex子元素在容器空间中的增长比例，默认值为0，表示不增长。
- flex-shrink：该属性定义Flex子元素在缩小容器空间时的缩小比例，默认值为1，表示等比例缩小。
- flex-basis：该属性定义Flex子元素在存在剩余容器空间时的基础大小。
使用Flex开发app
1. 容器的属性
- display：将容器定义为Flex容器；
- flex-direction：该属性规定Flex容器内部的主轴方向( row | row-reverse | column | column-reverse )；
- flex-wrap：定义如何换行 (nowrap | wrap | wrap-reverse)；
- justify-content：定义Flex子元素在主轴上的对齐方式 (start | end | center | space-between | space-around | space-evenly)；
- align-items：定义Flex子元素在交叉轴上的对齐方式 (start | end | center | baseline | stretch)；
- align-content：定义多根线的对齐方式(只有在多行时才有作用)。
2. Flex子元素的属性
- order：定义Flex子元素的排列顺序；
- flex-grow：值用来定义Flex子元素的拉伸比例，它是数字，标准起点是1，两个Flex子元素的值之比决定它们分配剩余的空间的比例。
- flex-shrink：该属性规定 Flex子元素的收缩比例。默认值是 1，如果空间不足，这个值会将 flex 子项缩小。如果所有项中只有一个为 0，则其它项依据手边有多少域分配缩小。如果所有项都为 0，则 overflow 处理方法套用到它们。
- flex-basis：该属性规定了它所包含的内容，和它的确切大小在交叉轴方向上进行设置。
- align-self：它通过自身在交叉轴上的对齐，覆盖掉默认对齐方式(align-items)。
```html
```
```css
.container {
display: flex; /* 容器 */
flex-wrap: wrap; /* 换行 */
width: 400px;
height: 400px;
border: 1px solid #ddd;
justify-content: space-around; /* 排列方式 */
}
.item {
width: 100px;
height: 100px;
background: #f7d4d4;
text-align: center;
}
.item1 {
order: 5; /* 排列顺序 */
}
.item2 {
flex-grow: 1; /* 拉伸比例 */
}
.item3 {
flex-shrink: 0; /* 收缩比例 */
}
.item4 {
flex-basis: auto; /* 基础大小 */
}
.item5 {
align-self: flex-end; /* 自身对齐 */
}
```
总结
Flex布局模式通过将容器分为行或列，并将它们的子元素沿这些行或列排列来管理布局的，主要有容器和子元素各自的属性。在开发app时，Flex可以帮助开发者更加灵活地控制元素的排列和大小，让app内容随着不同设备的分辨率发生自动的变化。掌握Flex布局模式的应用和原理，将带来更佳的用户体验和更加灵活的app排版。
