mirror of
https://github.com/RGBCube/serenity
synced 2025-05-31 12:28:12 +00:00
6de701b5c3
Auto margins used together with justify-content would previously result in children being positioned outside their parent. This was solved by letting auto margins take precedence when they are used, which was already implemented to some extent before, but not fully.
56 lines
2.3 KiB
HTML
56 lines
2.3 KiB
HTML
<!DOCTYPE html><style>
|
|
* {
|
|
border: 1px solid black !important;
|
|
}
|
|
.outer {
|
|
display: flex;
|
|
background: wheat;
|
|
}
|
|
.outer.row {
|
|
width: 300px;
|
|
height: 60px;
|
|
}
|
|
.outer.column {
|
|
width: 60px;
|
|
height: 300px;
|
|
}
|
|
.outer > div {
|
|
width: 50px;
|
|
height: 50px;
|
|
background: orange;
|
|
}
|
|
.flex-start { justify-content: flex-start; }
|
|
.flex-end { justify-content: flex-end; }
|
|
.start { justify-content: start; }
|
|
.end { justify-content: end; }
|
|
.flex-start div, .start div {
|
|
margin-left: auto;
|
|
}
|
|
.flex-end div, .end div {
|
|
margin-right: auto;
|
|
}
|
|
.row { flex-direction: row; }
|
|
.row.reverse { flex-direction: row-reverse; }
|
|
.column { flex-direction: column; }
|
|
.column.reverse { flex-direction: column-reverse; }
|
|
.reverse > div {
|
|
background: magenta;
|
|
}
|
|
</style>
|
|
<body>
|
|
<div class="row outer start"><div>start</div><div>a</div><div>b</div></div>
|
|
<div class="row outer flex-start"><div>flex-start</div><div>a</div><div>b</div></div>
|
|
<div class="row outer end"><div>end</div><div>a</div><div>b</div></div>
|
|
<div class="row outer flex-end"><div>flex-end</div><div>a</div><div>b</div></div>
|
|
<div class="row reverse outer start"><div>start</div><div>a</div><div>b</div></div>
|
|
<div class="row reverse outer flex-start"><div>flex-start</div><div>a</div><div>b</div></div>
|
|
<div class="row reverse outer end"><div>end</div><div>a</div><div>b</div></div>
|
|
<div class="row reverse outer flex-end"><div>flex-end</div><div>a</div><div>b</div></div>
|
|
<div class="column outer start"><div>start</div><div>a</div><div>b</div></div>
|
|
<div class="column outer flex-start"><div>flex-start</div><div>a</div><div>b</div></div>
|
|
<div class="column outer end"><div>end</div><div>a</div><div>b</div></div>
|
|
<div class="column outer flex-end"><div>flex-end</div><div>a</div><div>b</div></div>
|
|
<div class="column reverse outer start"><div>start</div><div>a</div><div>b</div></div>
|
|
<div class="column reverse outer flex-start"><div>flex-start</div><div>a</div><div>b</div></div>
|
|
<div class="column reverse outer end"><div>end</div><div>a</div><div>b</div></div>
|
|
<div class="column reverse outer flex-end"><div>flex-end</div><div>a</div><div>b</div></div>
|