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