HTML5+CSS3

2021.6HTML5andCSS3第13章

彈性盒子布局基礎(chǔ)概念彈性容器彈性的核心基礎(chǔ)DEMO（用flexbox實現(xiàn)Bootstrap的柵格系統(tǒng)）設(shè)置對齊方式DEMO（用flexbox創(chuàng)建嵌套的留言布局）第13章

彈性盒子布局

第13章

彈性盒子布局基礎(chǔ)概念在使用彈性盒子布局時，通常先將某DOM元素指定為“彈性容器”（flexcontainer），即設(shè)置為display:flex（在行內(nèi)時使用display:inline-flex），然后其內(nèi)部的一些待布局的元素指定為“彈性項”（flexitem），只有容器的直接子元素是“彈性項”。彈性項總是沿著容器的主軸排列，從主軸的“起始位置”到“結(jié)束位置”進(jìn)行布局。彈性容器有兩根軸線：主軸：彈性項沿著容器布局的軸線，默認(rèn)是水平的，也可設(shè)置為垂直的。交叉軸：和主軸垂直的軸線。軸線是有方向的，例如主軸可能從左到右，也可能從右往左。軸線由容器的flex-direction屬性控制。第13章

彈性盒子布局基礎(chǔ)概念第13章

彈性盒子布局彈性容器使用彈性盒子布局時，首先要指定彈性容器的布局方向。CSS3中提供了flex-direction屬性，該屬性用于指定主軸的方向，默認(rèn)值是row，即水平方向且從左到右。flex-direction屬性有四個值：屬性值說明row默認(rèn)值，水平方向，從左到右row-reverse水平方向，從右到左column垂直方向，從上到下column-reverse垂直方向，從下到上第13章

彈性盒子布局彈性容器實例：用flexbox設(shè)置導(dǎo)航欄。第13章

彈性盒子布局彈性的核心基礎(chǔ)彈性三要素flex-grow（放大因子）flex-shrink（縮小因子）flex-basis（彈性項的“自然寬度”）設(shè)置換行第13章

彈性盒子布局彈性三要素Flexbox的核心在于它的彈性，即可伸縮性，本質(zhì)上依賴三個屬性flex-grow、flex-shrink和flex-basis，分別表示放大因子、縮小因子和基準(zhǔn)大小。這三個屬性需要應(yīng)用在彈性項上，而不是設(shè)置在容器上。它們用來改變彈性項的大小，以便更好地填充容器在主軸方向的可用空間。flex-basis表示彈性項的基準(zhǔn)寬度，它是計算容器的剩余空間的基礎(chǔ)，默認(rèn)值是auto，即彈性項的“自然寬度”。我們也可以人為地設(shè)置一個指定的基準(zhǔn)大小，比如總寬度的20%或某個絕對值，例如200px，這個值可以大于也可以小于自然寬度。flex-grow是放大因子。這個值的含義是，當(dāng)容器的空間大于所有彈性項的基準(zhǔn)寬度總和，即當(dāng)容器按基準(zhǔn)寬度容納了所有彈性項之后，還有剩余空間時，如何處理彈性項的寬度。該值是無單位的，表示在所有的剩余空間中，該彈性項會分配到的空間所占的“份數(shù)”。flex-shrink是縮小因子。這個值的含義與放大因子類似，但方向正好相反。當(dāng)容器寬度小于所有彈性項的基準(zhǔn)寬度總和時，“不夠”的空間也需要所有彈性項一起分擔(dān)，那么各個彈性項需要縮小的空間占總共要縮小的空間的“份數(shù)”。第13章

彈性盒子布局彈性三要素這三個屬性可以簡寫為一個屬性flex，三個值的順序是flex:<flex-grow><flex-shrink><flex-basis>。flex本身還有幾個簡寫的值，如下：（1）flex:initial，默認(rèn)值，即flex:01auto，即容器大時不擴張，容器小時等量收縮。（2）flex:auto，表示等量地擴張和收縮，即flex:11auto。（3）flex:none，表示沒有彈性，不擴張也不收縮，即flex:00auto。（4）flex:<正整數(shù)>，表示flex:<正整數(shù)>10。第13章

彈性盒子布局設(shè)置換行當(dāng)彈性項超出容器的邊界時，我們可以改變?nèi)萜鞯男袨?，讓它換行顯示，這種換行行為是通過容器的flex-wrap屬性來控制的。容器的flex-wrap屬性有三個值：no-wrap：默認(rèn)值，表示不換行。wrap：換行，且沿著交叉軸從起始位置到結(jié)束位置布局。wrap-reverse：換行，且沿著交叉軸從結(jié)束位置到起始位置布局。第13章

彈性盒子布局實例：用flexbox實現(xiàn)Bootstrap的柵格系統(tǒng)第13章

彈性盒子布局設(shè)置對齊方式設(shè)置好容器和內(nèi)部元素的彈性后，F(xiàn)lexbox可以非常方便地設(shè)置彈性項的對齊方式。對齊是分布在兩個軸線上的，主軸方向的對齊方式由justify-content屬性控制，交叉軸方向的對齊方式由align-items屬性控制。這兩個屬性需要設(shè)置在容器上。例如實現(xiàn)水平垂直居中第13章

彈性盒子布局設(shè)置對齊方式屬性值說明flex-start默認(rèn)值，靠著主軸的起點對齊flex-end靠著主軸的終點右對齊center主軸的居中位置space-between主軸的兩端對齊，即均勻沿著主軸排列，并占滿主軸。彈性項之間的間隔都相等，并且是彈性項與容器邊框之間沒有間隔space-around每個彈性項兩側(cè)的間隔相等，彈性項之間的間隔是彈性項與容器邊框之間的間隔的2倍屬性值說明flex-start靠著交叉軸的起點對齊flex-end靠著交叉軸的終點對齊center交叉軸的中點對齊baseline彈性項第一行文字的基線對齊stretch默認(rèn)值，如果項目未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度。align-items屬性設(shè)置值justify-content屬性設(shè)置值第13章

彈性盒子布局實例：用flexbox設(shè)置表單第13章

彈性盒子布局實例：用flexbox