view.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
    <!-- #endif -->
    <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>
    <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</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>