内置组件 ＞ 视图容器 ＞ view

1. 1. 1. 参考代码的位置

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

 

 

 

1. 1. 1. 横向布局

 

                     <view class="uni-title uni-common-mt">

                            flex-direction: row

                            <text>\n横向布局</text>

                     </view>

                     <view class="uni-flex uni-row">

                            <view class="flex-item uni-bg-red">A</view>

                            <view class="flex-item uni-bg-green">B</view>

                            <view class="flex-item uni-bg-blue">C</view>

                     </view>

 

--------------------------------------------------分析------------------------------------------------

.uni-flex {

       display: flex;

       flex-direction: row;

}

 

.uni-row {

       flex-direction: row;

}

 

1. 1. 1. 纵向布局

 

                     <view class="uni-title uni-common-mt">

                            flex-direction: column

                            <text>\n纵向布局</text>

                     </view>

                     <view class="uni-flex uni-column">

                            <view class="flex-item flex-item-V uni-bg-red">A</view>