下面將用flex布局來以次生成各個篩子。
css**：
class
="main"
>
class
="box"
>
div>
div>
預設顯示：
接下來我們熟悉並運用flex布局以次生成對應的篩子
在類main中設定flex布局，調整水平的垂直的對齊方式為center即可。
css**
.main
class
="main"
>
class
="box"
>
div>
div>
生成點數2的時候，需要兩個盒子垂直方向排列，所以需要改變flex主軸的方向為column。
css**：
.main
class
="main"
>
class
="box"
>
div>
class
="box"
>
div>
div>
網頁顯示：
生成篩子點數3是在生成2的基礎上多加乙個盒子，區別就是第乙個和最後乙個盒子需要分別設定為靠左和靠右，利用flex中align-self或者justify-self可以單獨對盒子進行樣式的調整，具體**如下：
css**：
.main
.box
.box1
.box3
class
="main"
>
class
="box box1"
>
div>
class
="box"
>
div>
class
="box box3"
>
div>
div>
網頁效果：
篩子點數4的特點就是分布在四個角，也就是在篩子點數2的案例上多加一列，並且設定為space-around即可，具體**如下：
css**：
.main
.box-parent
.box
class
="main"
>
class
="box-parent"
>
class
="box"
>
div>
class
="box"
>
div>
div>
class
="box-parent"
>
class
="box"
>
div>
class
="box"
>
div>
div>
div>
篩子點數5相比於篩子點數4的案例，只是多了乙個中間的盒子，具體**如下：
css**：
.main
.box-parent
.box1
.box
class
="main"
>
class
="box-parent"
>
class
="box"
>
div>
class
="box"
>
div>
div>
class
="box box1"
>
div>
class
="box-parent"
>
class
="box"
>
div>
class
="box"
>
div>
div>
div>
生成篩子點數6相比於生成篩子點數4，在每一列會多出乙個盒子，由此可仿照案例4的生成，得到如下**：
css**：
.main
.box-parent
.box
class
="main"
>
class
="box-parent"
>
class
="box"
>
div>
class
="box"
>
div>
class
="box"
>
div>
div>
class
="box-parent"
>
class
="box"
>
div>
class
="box"
>
div>
class
="box"
>
div>
div>
div>
頁面顯示:
flex布局實戰
1.實現盒子的水平垂直居中 2.子元素水平排列一行，均分父元素寬度 如果採用百分比實現，當子元素個數變化時需要修改樣式，用flex布局則不需要 3.左側固定寬度，右側寬度隨父容器寬度變化而變化布局 box.left.right div class box div class left 1 div d...
flex布局實戰應用
如下圖，訂單列表裡的標題 需求是 地名1 地名2 現實情況可能有以下五種情況 兩個地名都很短 兩個地名都很長 地名1很長，地名2很短 地名1很短，地名2很長 地名1和地名2差不多長 看到上面的需求，我們自然而然能想到的就是使用flex布局 先寫個demo html如下 div class wrap ...
flex布局 Flex布局
摘要 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序 以最佳方式填充可用空間 主要是為了適應所有型別的顯示裝置和螢幕大小 作者 星星 flex 是 flexible box 的縮寫，意為 彈性布局 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序...