?

flex是flexiblebox的縮寫，中文名字彈性盒子布局,在小程序布局中支持的很好

在試驗之前可以看一下張鑫旭的flex https://www.zhangxinxu.com/wordpress/2018/10/display-flex-css3-css/

1.給父容器設置了display:flex;則內部容器的塊狀特性會自動消失(再給內部元素設置display:block無效):

2.設置flex-direction:column則其子元素為垂直排列(高度會自適應) ,

如果不設置flex-direction，則默認會設置成row(橫向布局)

.

3.設置顛倒(所有元素對齊的方向也會改變，對于豎直排序的也一樣):

4.justify-content:start/end 設置了子元素的對齊方向

?

?justify-content:center 設置子元素居中

?

?justify-content:space-between :平均分布

?

?justify-content:space-between :等距分布（1號元素與2號元素與3號元素左右的距離都相等）

垂直居中:

垂直水平居中:

5.主軸和交叉軸：

誰是主軸根據flex-direction來指定

row:水平方向是主軸

colmun:垂直方向的是主軸

justify-content指的是主軸上面的排列方式； align-items指的是交叉軸上面的排列方式； 要下圖的布局方式是對垂直方向的子元素的對齊方向改變，所以只需要justify-content的樣式:

?

?

?

根據文字基線對齊

?

如果子元素的寬度大于父元素的寬度，又沒有設置換行，則會自動調整子元素寬度

設置換行（設置高度可以消除與上邊兩個的間距）

?

轉載于:https://www.cnblogs.com/rmty/p/10901542.html

總結

以上是生活随笔為你收集整理的给自己看的flex布局方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。