彈性布局 · CSS

彈性布局：會讓一個盒子隨瀏覽器窗口大小的變化為變化。使用彈性布局要搞清楚下面的關鍵字：主軸：Flex容器的主軸主要用來配置Flex項目，默認是水平方向。側軸：與主軸垂直的軸稱作側軸，默認是垂直方向的。方向：默認主軸從左向右，側軸默認從上到下。主軸和側軸并不是固定不變的，通過flex-direction可以互換。 ![](https://img.kancloud.cn/c0/97/c097eb78a6f5d1df5b8eee3c55db457f_714x315.png) Flex布局的語法規范經過幾年發生了很大的變化，也給Flexbox的使用帶來一定的局限性，因為語法規范版本眾多，瀏覽器支持不一致，致使Flexbox布局使用不多使用彈性布局的步驟如下： **`html\彈性盒子.html`** ```css <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>彈性盒子</title> <style type="text/css"> /* 1. 定義父盒子布局屬性,即如何讓子元素來占據它 */ .father-div { width: 60%; /* 必須使用百分比 */ height: 600px; /* 如果想要在高度方向也伸縮，也可以采用百分比 */ background-color: red; display: flex; /* 必須聲明父盒子為彈性盒子 */ flex-direction: row; /* 聲明主軸方向為水平，即放在里面的子元素按行排列（默認值） */ justify-content: flex-start; /* 聲明里面的子元素從左上角，按左到右的順序排序（默認值） */ align-items: stretch; /* 如果子元素沒有定義height，則將子元素的height拉伸到等于父盒子的hegiht（默認值） */ /* 定義當父盒子的一行被占滿時，也不允許換行排列。對于使用%和flex定義的子元素，flex-wrap屬性根本就不起作用，如果將子元素的大小增大，它只會壓縮其它子元素的大小，而永遠不會換行。而不使用%和flex的子元素，則會換行。 */ flex-wrap: nowrap; /* 不換行（默認值）*/ } /* 2. 定義子盒子如果占據父盒子 */ .son1-div { flex: 2; /* 占據父盒子20%的大小，或者使用width: 20%; */ order: 1; /* 占領順序為1 （默認為0）*/ height: 300px; background-color: green; } .son2-div { flex: 6; /* 或者使用width: 60%; */ order: 2; /* 占領順序為2 （默認為0）*/ height: 300px; background-color: blue; } .son3-div { flex: 2; /* 或者使用width: 20%; */ order: 3; /* 占領順序為3 （默認為0）*/ height: 300px; background-color: yellow; } .son4-div { flex: 5; /* 前面的三個子元素合起來已經占滿了父盒子的主軸，但是這里還占據50%的份額，就會壓縮前面的那三個子元素的份額 */ order: 4; /* 占領順序為4 （默認為0）*/ height: 300px; background-color: pink; } </style> </head> <body> <div class="father-div"> <div class="son1-div">SON1</div> <div class="son2-div">SON2</div> <div class="son3-div">SON3</div> <div class="son4-div">SON4</div> </div> </body> </html> ```