给自己看的flex布局方法
?
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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 前端进阶之如何正确判断this的指向?
- 下一篇: nodejs 日志规范