Flex布局
vue中代码:
<template>
<view class="container">
<view class="green txt">
A
</view>
<view class="red txt">
B
</view>
<view class="blue txt">
C
</view>
</view>
</template>
CSS样式:
.container { /* 定义flex容器 */ display: flex; /* 设置容器内部元素的排列方向 row: 定义排列方向 从左到右 row-reverse: 从右到左 column: 从上到下 column-reverse: 从下到上 */ flex-direction: column; /** nowrap: 不换行 wrap: 换行 wrap-reverse: 逆向换行 */ flex-wrap: wrap; /* 设置元素在主轴上的对其方式 flex-start: (默认)左对齐 或者 向上对齐 flex-end: 右对齐 或者 向下对齐 center: 居中对齐 space-between: 两端对齐,元素之间平均等分剩余空白间隙部分 space-around: 元素两边平均等分剩余空白间隙部分,最左(上)或最右(下)和元素之间距离是1:2 */ justify-content: space-between; /* 设置容器中元素在交叉轴上的对齐方式 stretch:(默认)当元素的高度没有设置,则元素的高度会拉伸至容器高度一致 flex-start: 在交叉轴上向起点位置(向上/向左)对齐 flex-end: 在交叉轴上向结束位置(向下/向右)对齐 center: 居中对齐 baseline: 保证元素中的文字在同一条基准线(保证每个文字都在同一条线上) */ align-items: baseline; /* 当轴线超过1条的时候,flex容器可以把多条轴线视为元素对待,可以进行对齐 center:居中 flex-start: 向左对齐 flex-end: 向右对齐 stretch: 当宽度width没有设置的时候,轴线可以被拉伸 space-between: 两端对齐,元素之间的空白等比切分 space-around: 轴线两边的空白等比切分 */ align-content: space-around; } /* order: 用于设置flex容器内部的每个元素的排列顺序,默认是0 排序规则,由小到大 flex-grow: 用于设置元素的放大比例,默认为0 如果为0,则不放大 flex-shrink: 用于定义属性的缩放比例,默认为1 设置为0的时候,不进行缩放 flex-basis: 不需要有其他元素的影响,可以直接设置该元素本身的放大和缩小 */ .red { background-color: #FF0000; /* order: 0; */ /* flex-grow: 2; */ flex-shrink: 0; flex-basis: 150upx; } .green { background-color: #008000; /* order: 2; */ /* flex-grow: 1; */ flex-shrink: 0; } /* 重写容器中元素在交叉轴上的对齐方式 auto: 默认,表示继承父级元素的align-items属性 stretch:当元素的高度没有设置,则元素的高度会拉伸至容器高度一致 flex-start: 在交叉轴上向起点位置(向上/向左)对齐 flex-end: 在交叉轴上向结束位置(向下/向右)对齐 center: 居中对齐 baseline: 保证元素中的文字在同一条基准线(保证每个文字都在同一条线上) */ .blue { background-color: blue; /* order: 1; */ /* flex-grow: 1; */ flex-shrink: 0; align-self: stretch; }