<h3>「flex-direction:row;」を使用した例</h3>
<div class="row">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<hr>
<h3>「flex-direction:row-reverse;」を使用した例</h3>
<div class="row-reverse">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<hr>
<h3>「flex-direction:column;」を使用した例</h3>
<div class="column">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<hr>
<h3>「flex-direction:column-reverse;」を使用した例</h3>
<div class="column-reverse">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
.row {
display:flex;
flex-direction:row;
}
.row-reverse{
display:flex;
flex-direction:row-reverse;
}
.column {
display:flex;
flex-direction:column;
}
.column-reverse {
display:flex;
flex-direction:column-reverse;
}
.item {
background-color: red;
color:#fff;
margin: 10px;
width: 30px;
height: 30px;
text-align: center;
}
.row-reverse .item {
background-color: blue;
}
.column .item {
background-color: green;
}
.column-reverse .item {
background-color: purple;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.