#0、目的
BOXの横並びと、BOX in BOXの横並びをよく使用するのでメモとして残す
##1-1、横並び
slim
.wrapper01
ul.content
li.box
| box
li.box
| box
li.box
| box
scss
.wrapper01 {
margin: 0 auto;
background-color: #ccc;
width: 400px;
height: 400px;
.content {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.box {
width: 100px;
height: 100px;
background-color: red;
margin-right: 8px;
text-align: center;
line-height: 100px;
&:last-of-type {
margin-right: 0;
}
}
}
}
slim
.wrapper02
ul.content
.content-box
li.box
| box
li.box
| box
li.box
| box
.content-box
li.box
| box
li.box
| box
li.box
| box
.content-box
li.box
| box
li.box
| box
li.box
| box
scss
.wrapper02 {
width: 400px;
height: 400px;
margin: 20px auto;
background-color: #ccc;
.content {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
.content-box {
width: 100px;
height: 100px;
background-color: red;
margin-right: 6px;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
&:last-of-type {
margin-right: 0;
}
.box {
width: 25px;
height: 25px;
background-color: blue;
text-align: left;
font-size: 6px;
margin: 0 2px;
line-height: 25px;
text-align: center;
}
}
}
}