面試官讓我用 Flex 寫色子布局,我直接寫了六種
復習一下Flex布局屬性
在實現(xiàn)色子布局之前,我們先來復習一下這幾個Flex布局的屬性:
justify-content:用于調整元素在主軸的對其方式;
align-items:用于調整元素在側軸的對其方式;
align-self:設置元素自身在側軸的對齊方式;
flex-direction:定義主軸是水平還是垂直或者正反方向。
多說無益,我們直接來寫代碼
實現(xiàn)一點布局
實現(xiàn)一點布局就非常簡單了,可以說就是一個水平垂直居中 ,用flex布局實現(xiàn)相當?shù)娜菀祝瑢崿F(xiàn)代碼如下:
html
<body>
<div class="warp">
<div class="pip"></div>
</div>
</body>
復制代碼
css
<style>
.warp {
display: flex;
/* 實現(xiàn) 一點 布局 */
justify-content: center;
align-items: center;
}
</style>
復制代碼
這里只貼出核心代碼,剩余代碼就是一些樣式樣的調整。
實現(xiàn)效果如下:

這里我們用到了justify-content和align-items,就輕松的實現(xiàn)了色子的一點布局。
實現(xiàn)二點布局
現(xiàn)在我們實現(xiàn)色子的二點布局,實現(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>
復制代碼
css
<style>
.warp {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.column {
display: flex;
}
.column:nth-child(2) {
justify-content: flex-end;
}
</style>
復制代碼
這僅僅是實現(xiàn)的一種方案,還有別的寫法。

實現(xiàn)三點布局
三點布局與二點布局類似,只需要再添加一行即可,實現(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>
復制代碼
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>
復制代碼
運行效果如下:

實現(xiàn)四點布局
四點布局可以說是二點布局的變種,實現(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>
復制代碼
css
.warp {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.column {
display: flex;
justify-content: space-between;
}
復制代碼
運行效果如下:

實現(xiàn)五點布局
實現(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>
<div class="column">
<div class="pip"></div>
<div class="pip"></div>
</div>
</div>
</body>
復制代碼
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;
}
復制代碼
運行效果如下:

實現(xiàn)六點布局
實現(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 class="column">
<div class="pip"></div>
<div class="pip"></div>
</div>
</div>
</body>
復制代碼
css
.warp {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.column {
display: flex;
justify-content: space-around;
}
復制代碼
運行效果如下:






























