uniapp flex布局

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