面試官讓我用 Flex 寫(xiě)色子布局，我直接寫(xiě)了六種
復(fù)習(xí)一下Flex布局屬性
在實(shí)現(xiàn)色子布局之前，我們先來(lái)復(fù)習(xí)一下這幾個(gè)Flex布局的屬性：
justify-content：用于調(diào)整元素在主軸的對(duì)其方式；
align-items：用于調(diào)整元素在側(cè)軸的對(duì)其方式；
align-self：設(shè)置元素自身在側(cè)軸的對(duì)齊方式；
flex-direction：定義主軸是水平還是垂直或者正反方向。
多說(shuō)無(wú)益，我們直接來(lái)寫(xiě)代碼
實(shí)現(xiàn)一點(diǎn)布局
實(shí)現(xiàn)一點(diǎn)布局就非常簡(jiǎn)單了，可以說(shuō)就是一個(gè)水平垂直居中 ，用flex布局實(shí)現(xiàn)相當(dāng)?shù)娜菀祝瑢?shí)現(xiàn)代碼如下：
html
<body>
<div class="warp">
<div class="pip"></div>
</div>
</body>
復(fù)制代碼
css
<style>
.warp {
display: flex;
/* 實(shí)現(xiàn) 一點(diǎn) 布局 */
justify-content: center;
align-items: center;
}
</style>
復(fù)制代碼
這里只貼出核心代碼，剩余代碼就是一些樣式樣的調(diào)整。
實(shí)現(xiàn)效果如下：
這里我們用到了justify-content和align-items，就輕松的實(shí)現(xiàn)了色子的一點(diǎn)布局。
實(shí)現(xiàn)二點(diǎn)布局
現(xiàn)在我們實(shí)現(xiàn)色子的二點(diǎn)布局，實(shí)現(xiàn)代碼如下：
html
<body>
<div class="warp">
<div class="column"><div class="pip"></div></div>
<div class="column"><div class="pip"></div></div>
</div>
</body>
復(fù)制代碼
css
<style>
.warp {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.column {
display: flex;
}
.column:nth-child(2) {
justify-content: flex-end;
}
</style>
復(fù)制代碼
這僅僅是實(shí)現(xiàn)的一種方案，還有別的寫(xiě)法。
實(shí)現(xiàn)三點(diǎn)布局
三點(diǎn)布局與二點(diǎn)布局類(lèi)似，只需要再添加一行即可，實(shí)現(xiàn)代碼如下：
html
<body>
<div class="warp">
<div class="column"><div class="pip"></div></div>
<div class="column"><div class="pip"></div></div>
<div class="column"><div class="pip"></div></div>
</div>
</body>
復(fù)制代碼
css
<style>
.warp {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.column {
display: flex;
}
.column:nth-child(2) {
justify-content: center;
}
.column:nth-child(3) {
justify-content: flex-end;
}
</style>
復(fù)制代碼
運(yùn)行效果如下：
實(shí)現(xiàn)四點(diǎn)布局
四點(diǎn)布局可以說(shuō)是二點(diǎn)布局的變種，實(shí)現(xiàn)代碼如下：
html
<body>
<div class="warp">
<div class="column">
<div class="pip"></div>
<div class="pip"></div>
</div>
<div class="column">
<div class="pip"></div>
<div class="pip"></div>
</div>
</div>
</body>
復(fù)制代碼
css
.warp {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.column {
display: flex;
justify-content: space-between;
}
復(fù)制代碼
運(yùn)行效果如下：
實(shí)現(xiàn)五點(diǎn)布局
實(shí)現(xiàn)五點(diǎn)布局可以在四點(diǎn)布局的基礎(chǔ)上增加一行，示例代碼如下：
html
<body>
<div class="warp">
<div class="column">
<div class="pip"></div>
<div class="pip"></div>
</div>
<div class="column">
<div class="pip"></div>
</div>
<div class="column">
<div class="pip"></div>
<div class="pip"></div>
</div>
</div>
</body>
復(fù)制代碼
css
.warp {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.column {
display: flex;
justify-content: space-between;
}
.column:nth-child(2) {
justify-content: center;
}
復(fù)制代碼
運(yùn)行效果如下：
實(shí)現(xiàn)六點(diǎn)布局
實(shí)現(xiàn)六點(diǎn)布局可以在四點(diǎn)布局的基礎(chǔ)上增加一行，示例代碼如下：
html
<body>
<div class="warp">
<div class="column">
<div class="pip"></div>
<div class="pip"></div>
</div>
<div class="column">
<div class="pip"></div>
<div class="pip"></div>
</div>
<div class="column">
<div class="pip"></div>
<div class="pip"></div>
</div>
</div>
</body>
復(fù)制代碼
css
.warp {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.column {
display: flex;
justify-content: space-around;
}
復(fù)制代碼
運(yùn)行效果如下：
