app开发flex

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排版。