HTML5+CSS3

2021.6HTML5andCSS3第13章

彈性盒子布局基礎概念彈性容器彈性的核心基礎DEMO（用flexbox實現Bootstrap的柵格系統）設置對齊方式DEMO（用flexbox創建嵌套的留言布局）第13章

彈性盒子布局

第13章

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

彈性盒子布局基礎概念第13章

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

彈性盒子布局彈性容器實例：用flexbox設置導航欄。第13章

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

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

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

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

彈性盒子布局實例：用flexbox實現Bootstrap的柵格系統第13章

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

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

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

彈性盒子布局實例：用flexbox