怎么理解html的flex布局

本篇內(nèi)容主要講解“怎么理解html的flex布局”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“怎么理解html的flex布局”吧!

需要注意的是：任何容器都可以指定為flex布局，但是在flex布局中float、clear、vertical-align都會失效。

1.主軸方向

flex容器分為x軸與y軸，x軸正方向默認從左至右，y軸正方向默認從上到下。

定義一個容器為彈性布局display:flex;主軸默認方向為左到右;如果我們想去改變flex的默認方向，就需要用到flex-direction屬性flex-direction有四個屬性值，分別是row、row-reverse、column、column-reverse，分別為從左到右、從右到左、從上到下、從下到上!

2.主軸方向的對齊方式

(1)justify-content:flex-start則主軸為左對齊

(2)justify-content:flex-end 則主軸為右對齊

(3)justify-content:center 則主軸為居中

(4)justify-content:space-between則每個子項目之間等距離，前提是有剩余空間

(5)justify-content:space-around則每個子項目會平分剩余空間，子項目與父元素邊界處也會存在距離

3.縱向單行對齊方式

(1)align-item:flex-start縱向從上到下

(2)align-item:flex-end縱向從下到上

(3)align-item:center縱向居中對齊

(4)align-item:baseline以基線對齊

(5)align-item:strech這是默認方式

4.子項目換行

(1)flex-wrap:wrap超出父元素會換行

(2)flex-wrap:wrap-reverse反向換行

(3)flex-wrap:no wrap這是默認方式,不換行

5.縱向多行對齊方式

(1)align-content:flex-start上對齊

(2)align-content:flex-end下對齊

(3)align-content:center上下居中

(4)align-content:space-between

(5)align-content:space-around

以上均是添加到父元素身上的屬性

6.子項目的一些屬性

(1)order:0,定義子項目的排序位置，數(shù)值越小越靠前，默認為0

(2)flex-grow:0;定義子項目的放大比例，默認為0不放大

(3)flex-shrink:1;定義子項目的縮小比例，默認為1，空間不足將等比縮小，0則不縮小，負值無效

(4)flex-basis:1;定義子項目占據(jù)空間，默認為auto，可以設(shè)置百分比，也可以是固定值

以上三種屬性可以簡寫，比如flex：1,1,1順序如上

到此，相信大家對“怎么理解html的flex布局”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！