柔軟なレイアウトのサブ要素レイアウトの実践例
必要とする：
- コードを実装する
<body>
<div class="main">
<div class="box">
<div class="box-centent"></div>
<div class="box-centent"></div>
<div class="box-centent"></div>
<div class="box-centent"></div>
</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<style>
* {
margin: 0;
padding: 0;
color: aliceblue;
}
.main {
width: auto;
height: 700px;
background-color: black;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.main .box {
margin-top: 200px;
width: 200px;
height: 200px;
border: 1px solid #ccc;
text-align: center;
line-height: 200px;
background-color: #6096e6;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.main .box-centent {
width: 60px;
height: 30px;
background-color: red;
}
</style>
</body>