使用:在父组件定义一个container容器,子容器就是布局的对象
html
<view class="container">
<view class="t" style="font-size: 200upx;">A</view>
<view class="t">B</view>
<view class="t">C</view>
</view>
css
.container{
display: flex;
/* flex-direction设置内部元素的排列方向 */
/*
row
row-reverse
column
column
column-reverse
*/
flex-direction:row;
/* flex-warp 使容器内元素换行 */
/*
nowarp 默认的
warp 换行
warp-reserve 翻转换行
*/
flex-wrap: wrap;
/* justify-content 设置元素在主轴上的对齐方式 */
/*
flex-first 默认的
flex-end 右对齐
flex-center 居中
space-between 元素两边均匀填充
space-around 元素四周均匀填充
*/
justify-content: space-around;
/* align-items 纵轴方向处理空白部分 */
/*
stretch 默认 当元素高度没有设置,和容器高度一样
flex-start 向上对齐
flex-end 向下对齐
center 居中对齐
baseline 按照文字大小,根据文字的最低的位置对齐
*/
align-items: baseline;
height: 800upx;
background-color: pink;
}
.t{
width: 100upx;
/* height: 100upx; */
background-color: red;
}