flex布局
flex布局是开发中最常用的布局之一
下方摘自uniapp官方文档flex布局一栏
Flexbox
Flex 容器
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
nvue布局模型基于 CSS Flexbox，以便所有页面元素的排版能够一致可预测，同时页面布局能适应各种设备或者屏幕尺寸。Flexbox 包含 flex 容器和 flex 成员项。如果一个nvue元素可以容纳其他元素，那么它就成为 flex 容器。
文档中未说明的 flexbox 属性均不支持：如
order、flex-grow、flex-shrink、flex-basis、align-content、align-self等。
在 nvue中，Flexbox 是默认且唯一的布局模型，所以你不需要手动为元素添加 display: flex; 属性。
flex-direction
定义了 flex 容器中 flex 成员项的排列方向，默认值为 column
竖排，从上到下排列flex-wrap
决定了 flex 成员项在一行还是多行分布，默认值为nowrap
不换行，flex 成员项在一行排布，排布的开始位置由direction指定justify-content
定义了 flex 容器中 flex 成员项在主轴方向上如何排列以处理空白部分。默认值为 flex-start
可选值 | 描述 |
|---|---|
flex-start | 左对齐，所有的 flex 成员项都排列在容器的前部 |
flex-end | 右对齐，则意味着成员项排列在容器的后部 |
center | 居中，即中间对齐，成员项排列在容器中间、两边留白 |
space-between | 两端对齐，空白均匀地填充到 flex 成员项之间 |
space-around | 表示 flex 成员项两侧的间隔相等，所以，成员项之间的间隔比成员项与边框的间隔大一倍 |
align-items
定义了 flex 容器中 flex 成员项在纵轴方向上如何排列以处理空白部分。默认值为 stretch。
可选值 | 描述 |
|---|---|
stretch | 即拉伸高度至 flex 容器的大小 |
flex-start | 上对齐，所有的成员项排列在容器顶部 |
flex-end | 下对齐，所有的成员项排列在容器底部 |
center | 中间对齐，所有成员项都垂直地居中显示 |
flex
flex 属性定义了 flex 成员项可以占用容器中剩余空间的大小。 flex {number}：值为 number 类型。
- 如果所有的成员项设置相同的值 flex: 1，它们将平均分配剩余空间。
- 经常用作自适应布局，将父容器的display：flex，侧边栏大小固定后，将内容区flex：1，内容区则会自动放大占满剩余空间。
- 如果一个成员项设置的值为 flex: 2，其它的成员项设置的值为 flex: 1，那么这个成员项所占用的剩余空间是其它成员项的 2 倍。
注意
Flex 成员项暂不支持 flex-shrink 、 flex-basis、align-content 属性。
该属性不支持 flex: flex-grow | flex-shrink | flex-basis 的简写。
//Gird布局
<template>
<view>
<view v-for="(v, i) in list" class="row">
<view v-for="(text, k) in v" class="item">
<view>
<text>{{text}}</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [
['A', 'B', 'C'],
['D', 'E', 'F'],
['G', 'H', 'I']
]
}
}
}
</script>
<style scoped>
.row {
flex-direction: row;
height: 80px;
}
.item {
flex: 1;
justify-content: center;
align-items: center;
border-width: 1;
border-style: solid;
border-color: #FFFFFF;
background-color: #00AAFF;
}
</style>
//等高模块
<template>
<view>
<view style="width:300px; height:100px;">
<view style="flex: 1;background-color:blue"></view>
<view style="flex: 1;background-color:red"></view>
<view style="flex: 1;background-color:yellow"></view>
</view>
</view>
</template>