uniapp Flex 布局详解：实现灵活、高效的页面布局

<p>uniapp 使用的是基于 flexbox 的布局，可以通过以下方式实现：</p>
<ol>
  <li>父容器设置<code>display: flex;</code>可以将子元素按照一定的规则进行排列。</li>
  <li>父容器的<code>flex-direction</code>属性可以设置子元素的排列方向，有<code>row</code>、<code>row-reverse</code>、<code>column</code>、<code>column-reverse</code>等四种方向。</li>
  <li>父容器的<code>justify-content</code>属性可以设置子元素在主轴上的对齐方式，有<code>flex-start</code>、<code>flex-end</code>、<code>center</code>、<code>space-between</code>、<code>space-around</code>等几种。</li>
  <li>父容器的<code>align-items</code>属性可以设置子元素在交叉轴上的对齐方式，有<code>flex-start</code>、<code>flex-end</code>、<code>center</code>、<code>baseline</code>、<code>stretch</code>等几种。</li>
  <li>子元素的<code>flex</code>属性可以设置子元素的伸缩比例，以及占据父容器的空间大小。</li>
  <li>父容器的<code>flex-wrap</code>属性可以设置子元素的换行方式，有<code>nowrap</code>、<code>wrap</code>、<code>wrap-reverse</code>等三种。</li>
  <li>父容器和子元素都可以设置<code>flex-grow</code>、<code>flex-shrink</code>、<code>flex-basis</code>属性，分别表示子元素在剩余空间中的伸缩比例、收缩比例和初始大小。</li>
</ol>
<p>示例代码：</p>
<pre><code class="language-html"><template>
  <view class="container">
    <view class="item">1</view>
    <view class="item">2</view>
    <view class="item">3</view>
  </view>
</template>

<style>
.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.item {
  flex: 1;
  height: 50px;
  background-color: #f00;
  color: #fff;
  text-align: center;
  line-height: 50px;
}
</style></code></pre>