mirror of
https://github.com/RGBCube/serenity
synced 2025-07-25 16:37:35 +00:00
LibWeb: Handle auto margins with flex and justify-content
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.
This commit is contained in:
parent
a26f2f0aab
commit
6de701b5c3
4 changed files with 385 additions and 34 deletions
|
@ -0,0 +1,56 @@
|
|||
<!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>
|
Loading…
Add table
Add a link
Reference in a new issue