uni-app 最常用布局

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>

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

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

                     </view>

 

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

.uni-flex {

       display: flex;

       flex-direction: row;

}

 

.uni-column {

       flex-direction: column;

}

 

1. 1. 1. 纵向布局-自动宽度

 

<view class="text">纵向布局-自动宽度</view>

 

1. 1. 1. 纵向布局-固定宽度

 

<view class="text" style="width: 300rpx;">纵向布局-固定宽度</view>

 

 

1. 1. 1. 横向布局-自动宽度

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

       <view class="text">横向布局-自动宽度</view>

       <view class="text">横向布局-自动宽度</view>

</view>

 

1. 1. 1. 横向布局-居中

<view class="uni-flex uni-row" style="-webkit-justify-content: center;justify-content: center;">

       <view class="text">横向布局-居中</view>

       <view class="text">横向布局-居中</view>

</view>

 

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

-webkit-justify-content: center;

justify-content: center;     justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

 

1. 1. 1. 横向布局-居右

 

<view class="uni-flex uni-row" style="-webkit-justify-content: flex-end;justify-content: flex-end;">

       <view class="text">横向布局-居右</view>

       <view class="text">横向布局-居右</view>

</view>

 

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

-webkit-justify-content: flex-end;

justify-content: flex-end;        justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

 

 

1. 1. 1. 横向布局-平均分布

 

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

       <view class="text" style="-webkit-flex: 1;flex: 1;">横向布局-平均分布</view>

       <view class="text" style="-webkit-flex: 1;flex: 1;">横向布局-平均分布</view>

</view>

 

 

1. 1. 1. 横向布局-两端对齐

<view class="uni-flex uni-row" style="-webkit-justify-content: space-between;justify-content: space-between;">

       <view class="text">横向布局-两端对齐</view>

       <view class="text">横向布局-两端对齐</view>

</view>

 

1. 1. 1. 自动占满

 

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

       <view class="text" style="width: 200rpx;">固定宽度</view>

       <view class="text" style="-webkit-flex: 1;flex: 1;">自动占满余量</view>

</view>

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

       <view class="text" style="width: 200rpx;">固定宽度</view>

       <view class="text" style="-webkit-flex: 1;flex: 1;">自动占满</view>

       <view class="text" style="width: 200rpx;">固定宽度</view>

</view>

 

1. 1. 1. 一行显示不全,wrap折行

<view class="uni-flex uni-row" style="-webkit-flex-wrap: wrap;flex-wrap: wrap;">

       <view class="text" style="width: 280rpx;">一行显示不全,wrap折行</view>

       <view class="text" style="width: 280rpx;">一行显示不全,wrap折行</view>

       <view class="text" style="width: 280rpx;">一行显示不全,wrap折行</view>

</view>

 

1. 1. 1. 垂直居顶

<view class="text uni-flex" 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>垂直居顶</text>

</view>

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

-webkit-flex: 1;

flex: 1;

height: 200rpx;

 

-webkit-justify-content: center;

justify-content: center;

 

-webkit-align-items: flex-start;

align-items: flex-start;

1. 1. 1. 垂直居中

 

<view class="text uni-flex" style="-webkit-flex: 1;flex: 1;height: 200rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;">

       <text>垂直居中</text>

</view>

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

.uni-flex {

       display: flex;

       flex-direction: row;

}

 

-webkit-flex: 1;   ???

flex: 1;                

 

height: 200rpx;    高度

 

-webkit-justify-content: center;     

justify-content: center;      justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

 

-webkit-align-items: center;

align-items: center;     align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

 

1. 1. 1. 垂直居底

 

<view class="text uni-flex" 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>垂直居底</text>

</view>

 

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

-webkit-flex: 1;

flex: 1;

height: 200rpx;

 

-webkit-justify-content: center;

justify-content: center;     justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

 

-webkit-align-items: flex-end;

align-items: flex-end;        align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。