其他分享
首页 > 其他分享> > Flex布局

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;
}

 

标签:Flex,元素,space,容器,布局,轴上,flex,对齐
来源: https://www.cnblogs.com/lccode/p/10615449.html