<h3>「align-items: stretch;」を使用した例</h3>
<div class="stretch">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<hr>
<h3>「align-items: flex-start;」を使用した例</h3>
<div class="flex-start">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<hr>
<h3>「align-items: flex-end;」を使用した例</h3>
<div class="flex-end">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<hr>
<h3>「align-items: center;」を使用した例</h3>
<div class="center">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<hr>
<h3>「align-items: baseline;」を使用した例</h3>
<div class="baseline">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
.stretch {
display:flex;
align-items: stretch;
}
.stretch .item{
height: 80px;
}
.flex-start {
display:flex;
align-items: flex-start;
}
.flex-start .item:nth-of-type(1) {
height: 80px;
}
.flex-start .item:nth-of-type(3) {
height: 50px;
}
.flex-end {
display:flex;
align-items: flex-end;
}
.flex-end .item:nth-of-type(1) {
height: 80px;
}
.flex-end .item:nth-of-type(3) {
height: 50px;
}
.center {
display:flex;
align-items: center;
}
.center .item:nth-of-type(1) {
height: 80px;
}
.center .item:nth-of-type(3) {
height: 50px;
}
.baseline {
display:flex;
align-items: baseline;
}
.baseline .item:nth-of-type(1) {
line-height: 3;
}
.baseline .item:nth-of-type(3) {
line-height: 2;
}
.stretch, .flex-start, .flex-end, .center, .baseline {
background-color: lightskyblue;
}
.item {
background-color: red;
color:#fff;
margin: 10px;
width: 30px;
height: 30px;
text-align: center;
}
.wrap .item {
background-color: blue;
}
.wrap-reverse .item {
background-color: green;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.