?

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

在試驗(yàn)之前可以看一下張?chǎng)涡竦膄lex https://www.zhangxinxu.com/wordpress/2018/10/display-flex-css3-css/

1.給父容器設(shè)置了display:flex;則內(nèi)部容器的塊狀特性會(huì)自動(dòng)消失(再給內(nèi)部元素設(shè)置display:block無效):

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

如果不設(shè)置flex-direction，則默認(rèn)會(huì)設(shè)置成row(橫向布局)

.

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

4.justify-content:start/end 設(shè)置了子元素的對(duì)齊方向

?

?justify-content:center 設(shè)置子元素居中

?

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

?

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

垂直居中:

垂直水平居中:

5.主軸和交叉軸：

誰是主軸根據(jù)flex-direction來指定

row:水平方向是主軸

colmun:垂直方向的是主軸

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

?

?

?

根據(jù)文字基線對(duì)齊

?

如果子元素的寬度大于父元素的寬度，又沒有設(shè)置換行，則會(huì)自動(dòng)調(diào)整子元素寬度

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/rmty/p/10901542.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。