ladybird/Tests/LibWeb/Layout/input/flex/flex-constrained-wrap-reverse.html
BenJilks 46649fbe1b LibWeb: Add support for flex-wrap: wrap-reverse
Reverse the order of flex lines, when the `flex-wrap` property is set to
`wrap-reverse`. This will also swap the cross-start and cross-end
directions.
2024-09-02 17:42:11 +02:00

47 lines
845 B
HTML

<style>
.row, .column {
display: flex;
border: 1px solid salmon;
width: 250px;
height: 250px;
flex-wrap: wrap-reverse;
}
.column {
flex-direction: column;
}
.start {
align-items: start;
}
.box {
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
<div class="row">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<div class="column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<div class="row start">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<div class="column start">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>