小程序view支持為Block和flex兩種布局方式，所有默認都是block布局方式

block布局方式

<!--index.wxml-->
<view>
  <view style="background-color:red ;">1</view>
 <view style="background-color:aqua ;">2</view>
   <view style="background-color:blue ;">3</view>
?
</view>

flex布局方式

要使用 flex 布局的話需要顯式的聲明：display:flex; 接下來我們就給上面的布局加上樣式，使box1、box2、box3三個view能橫向排列。

<!--index.wxml-->
<view class="cont">
  <view style="background-color:red ;">box1</view>
 <view style="background-color:aqua ;">box2</view>
   <view style="background-color:blue ;">box3</view>
?
</view>

//橫向布局
.cont{
  display: flex;
}

flex布局種類

首先我們不管是橫向布局和豎向布局，要設置屬性 flex-direction ,它有4個可選值（默認為row）：

• row：從左到右的水平方向為主軸

• row-reverse：從右到左的水平方向為主軸

• column：從上到下的垂直方向為主軸

• column-reverse：從下到上的垂直方向為主軸

justify-content屬性

這個屬性指的是主軸方向上的子元素的布局方式，它有5個可選值：

flex-start：主軸起點對齊(默認值) flex-end：主軸結束點對齊 center：在主軸中居中對齊 space-between：兩端對齊，除了兩端的子元素分別靠向兩端的容器之外，其他子元素之間的間隔都相等 space-around：每個子元素之間的距離相等，兩端的子元素距離容器的距離也和其它子元素之間的距離相同 這里的主軸指的是父元素中的flex-direction屬性指定的元素

align-items屬性

這個屬性指的是側軸方向上的子元素的布局方式，這里的側軸指的是父元素中的flex-direction屬性指定的元素方向的垂直的方向,它有5個可選值：

stretch 填充整個容器，當元素未設置側軸方向的長度時，充滿父元素，如設置了側軸方向長度，則以子元素設置的長度為準(默認值) flex-start 側軸的起點對齊 （這里我們手動設置下子 view 的高度，來看的明顯一些） flex-end 側軸的終點對齊 center 在側軸中居中對齊 baseline 以子元素的第一行文字對齊

flex-wrap 屬性

這個屬性用于控制子元素 是否換行，有3個值可選：

• nowrap：不換行（默認）

• wrap：換行

• wrap-reverse：換行，第一行在最下面

  nowrap（默認）：不換行。

  

  wrap：換行，第一行在上方。

  

  wrap-reverse`：換行，第一行在下方。