view.uvue

<template>
    <view>
        <page-head title="view"></page-head>
        <view class="uni-padding-wrap uni-common-mt">
            <view>
                <text class="uni-hello-text">
                    Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。当设置display: flex后，继续给view等容器组件设置flex-direction:
                    row或column，就可以在该容器内按行或列排布子组件。uni-app推荐使用flex布局。因为flex布局有利于跨更多平台，尤其是采用原生渲染的平台。
                </text>
            </view>

            <view class="uni-title uni-common-mt">
                <text class="uni-title-text">
                    flex-direction: row
                </text>
                <text class="uni-subtitle-text">
                    横向布局
                </text>
            </view>
            <view class="uni-flex uni-row">
                <view class="flex-item uni-bg-red"><text style="color: #fff;">A</text></view>
                <view class="flex-item uni-bg-green"><text style="color: #fff;">B</text></view>
                <view class="flex-item uni-bg-blue"><text style="color: #fff;">C</text></view>
            </view>

            <view class="uni-title uni-common-mt">
                <text class="uni-title-text">
                    flex-direction: column
                </text>
                <text class="uni-subtitle-text">
                    纵向布局
                </text>
            </view>
            <view class="uni-flex uni-column">
                <view class="flex-item flex-item-V uni-bg-red"><text style="color: #fff;">A</text></view>
                <view class="flex-item flex-item-V uni-bg-green"><text style="color: #fff;">B</text></view>
                <view class="flex-item flex-item-V uni-bg-blue"><text style="color: #fff;">C</text></view>
            </view>

            <view class="uni-title uni-common-mt">
                <text class="uni-title-text">
                    更多布局示例
                </text>
                <text class="uni-subtitle-text">
                    flex布局演示
                </text>
            </view>
            <view>
                <view class="text-box"><text class="text">纵向布局-自动宽度</text></view>
                <view class="text-box" style="width: 300rpx;"><text class="text">纵向布局-固定宽度</text></view>
                <view class="text-box"><text class="text">横向布局-自动宽度</text></view>
                <view class="text-box"><text class="text">横向布局-自动宽度</text></view>
            </view>
            <view class="uni-flex uni-row" style="-webkit-justify-content: center;justify-content: center;">
                <view class="text-box"><text class="text">横向布局-居中</text></view>
                <view class="text-box"><text class="text">横向布局-居中</text></view>
            </view>
            <view class="uni-flex uni-row" style="-webkit-justify-content: flex-end;justify-content: flex-end;">
                <view class="text-box"><text class="text">横向布局-居右</text></view>
                <view class="text-box"><text class="text">横向布局-居右</text></view>
            </view>
            <view class="uni-flex uni-row">
                <view class="text-box" style="-webkit-flex: 1;flex: 1;"><text class="text">横向布局-平均分布</text></view>
                <view class="text-box" style="-webkit-flex: 1;flex: 1;"><text class="text">横向布局-平均分布</text></view>
            </view>
            <view class="uni-flex uni-row"
                style="-webkit-justify-content: space-between;justify-content: space-between;">
                <view class="text-box"><text class="text">横向布局-两端对齐</text></view>
                <view class="text-box"><text class="text">横向布局-两端对齐</text></view>
            </view>
            <view class="uni-flex uni-row">
                <view class="text-box" style="width: 200rpx;"><text class="text">固定宽度</text></view>
                <view class="text-box" style="-webkit-flex: 1;flex: 1;"><text class="text">自动占满余量</text></view>
            </view>
            <view class="uni-flex uni-row">
                <view class="text-box" style="width: 200rpx;"><text class="text">固定宽度</text></view>
                <view class="text-box" style="-webkit-flex: 1;flex: 1;"><text class="text">自动占满</text></view>
                <view class="text-box" style="width: 200rpx;"><text class="text">固定宽度</text></view>
            </view>
            <view class="uni-flex uni-row" style="-webkit-flex-wrap: wrap;flex-wrap: wrap;">
                <view class="text-box" style="width: 320rpx;"><text class="text">一行显示不全,wrap折行</text></view>
                <view class="text-box" style="width: 320rpx;"><text class="text">一行显示不全,wrap折行</text></view>
                <view class="text-box" style="width: 320rpx;"><text class="text">一行显示不全,wrap折行</text></view>
            </view>
            <view class="uni-flex uni-row">
                <view class="text-box"
                    style="-webkit-flex: 1;flex: 1;height: 200rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: flex-start;align-items: flex-start;">
                    <text class="text" style="line-height: 70rpx;">垂直居顶</text>
                </view>
                <view class="text-box"
                    style="-webkit-flex: 1;flex: 1;height: 200rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;">
                    <text class="text">垂直居中</text>
                </view>
                <view class="text-box"
                    style="-webkit-flex: 1;flex: 1;height: 200rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: flex-end;align-items: flex-end;">
                    <text class="text" style="line-height: 70rpx;">垂直居底</text>
                </view>
            </view>

            <view class="uni-title uni-common-mt">
                <text class="uni-title-text">
                    组合示例
                </text>
                <text class="uni-subtitle-text">
                    flex布局演示
                </text>
            </view>
            <view class="uni-flex uni-row">
                <view class="text-box uni-flex"
                    style="width: 200rpx;height: 220rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;">
                    <image src="/static/plus.png" style="width: 150rpx;height: 150rpx;"></image>
                </view>
                <view class="uni-flex uni-column"
                    style="-webkit-flex: 1;flex: 1;-webkit-justify-content: space-between;justify-content: space-between;">

                    <view class="text-box"
                        style="height: 120rpx;justify-content: start;align-items: start;padding-left: 20rpx;">
                        <text class="text" style="line-height: 70rpx;">文字居左，留出左间距</text>
                    </view>

                    <view class="uni-flex uni-row">
                        <view class="text-box" style="-webkit-flex: 1;flex: 1;">
                            <text class="text">剩余数量</text>
                        </view>
                        <view class="text-box" style="-webkit-flex: 1;flex: 1;">
                            <text class="text">立即购买</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {}
        }
    }
</script>

<style>
    .flex-item {
        width: 33.3%;
        height: 200rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .flex-item-V {
        width: 100%;
        height: 150rpx;
        text-align: center;
        line-height: 150rpx;
    }

    .text-box {
        margin: 15rpx 10rpx;
        padding: 0 20rpx;
        background-color: #ebebeb;
        height: 70rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
    }

    .text {
        color: #777;
        font-size: 26rpx;
    }
</style>