建站
咨詢
售后
建站咨詢
新聞中心
復(fù)習(xí)一下Flex布局屬性
在實現(xiàn)色子布局之前，我們先來復(fù)習(xí)一下這幾個Flex布局的屬性：
10年積累的成都網(wǎng)站制作、網(wǎng)站設(shè)計經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認識你，你也不認識我。但先做網(wǎng)站設(shè)計后付款的網(wǎng)站建設(shè)流程，更有牧野免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
justify-content：用于調(diào)整元素在主軸的對其方式；
align-items：用于調(diào)整元素在側(cè)軸的對其方式；
align-self：設(shè)置元素自身在側(cè)軸的對齊方式；
flex-direction：定義主軸是水平還是垂直或者正反方向。
多說無益，我們直接來寫代碼
實現(xiàn)一點布局
實現(xiàn)一點布局就非常簡單了，可以說就是一個水平垂直居中 ，用flex布局實現(xiàn)相當?shù)娜菀?，實現(xiàn)代碼如下：
html
復(fù)制代碼
css
復(fù)制代碼
這里只貼出核心代碼，剩余代碼就是一些樣式樣的調(diào)整。
實現(xiàn)效果如下：
這里我們用到了justify-content和align-items，就輕松的實現(xiàn)了色子的一點布局。
實現(xiàn)二點布局
現(xiàn)在我們實現(xiàn)色子的二點布局，實現(xiàn)代碼如下：
html
復(fù)制代碼
css
復(fù)制代碼
這僅僅是實現(xiàn)的一種方案，還有別的寫法。
實現(xiàn)三點布局
三點布局與二點布局類似，只需要再添加一行即可，實現(xiàn)代碼如下：
html
復(fù)制代碼
css
復(fù)制代碼
運行效果如下：
實現(xiàn)四點布局
四點布局可以說是二點布局的變種，實現(xiàn)代碼如下：
html
復(fù)制代碼
css
.warp {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.column {
display: flex;
justify-content: space-between;
}
復(fù)制代碼運行效果如下：
實現(xiàn)五點布局
實現(xiàn)五點布局可以在四點布局的基礎(chǔ)上增加一行，示例代碼如下：
html
復(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ù)制代碼運行效果如下：
實現(xiàn)六點布局
實現(xiàn)六點布局可以在四點布局的基礎(chǔ)上增加一行，示例代碼如下：
html
復(fù)制代碼
css
.warp {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.column {
display: flex;
justify-content: space-around;
}
復(fù)制代碼運行效果如下：
網(wǎng)站欄目：面試官讓我用Flex寫色子布局，我直接寫了六種
標題路徑：http://m.5511xx.com/article/cdhjhpg.html
