Flex實現九宮格

時間 2019-11-08

標籤 flex 實現九宮欄目 Flex 简体版

原文原文鏈接

寫一個靠譜的flex佈局

<!DOCTYPE html>
<html>
<style>
.block {
    padding-top: 30%;
    margin-top: 3%;
    border-radius: 10%;
    background-color: orange;
    width: 30%;
}
.container-flex2  {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
</style>
<body>
   <div class="container-flex2">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
</body>
</html>

關鍵點：利用了padding-top和flex-wrap:wrap，當設置background-color時，是包括盒子模型中的content和padding的，可是爲何不設置height呢？由於父元素沒有高度，因此定義height:30%是沒有用的，且若想每一個block都爲正方形，最好的方式就是設置padding-top/padding-bottom：a%，由於此時的百分比是父元素寬度的百分比，而width也爲父元素寬度的百分比，因此block能夠成爲正方形。html

相關標籤/搜索