зеркало из https://github.com/mozilla/gecko-dev.git
42 строки
953 B
HTML
42 строки
953 B
HTML
<!DOCTYPE html>
|
|
<title>Reference for bug 1580302</title>
|
|
<style>
|
|
.grid, .flex {
|
|
width: 60px;
|
|
height: 60px;
|
|
border: 1px solid black;
|
|
}
|
|
.grid { display: grid; }
|
|
.flex { display: flex; }
|
|
.fCol { flex-direction: column; }
|
|
|
|
.item {
|
|
background: lightblue;
|
|
}
|
|
.flexible {
|
|
flex: 1;
|
|
}
|
|
</style>
|
|
<body>
|
|
<!-- The item should fill the grid here (by virtue of the default-stretchy
|
|
behavior of justify-items and align-items): -->
|
|
<div class="grid">
|
|
<div class="item">e</div>
|
|
</div>
|
|
|
|
<!-- For the rest, the item should fill the flex container in the cross axis,
|
|
and if it's flexible, also fill the container in the main axis. -->
|
|
<div class="flex">
|
|
<div class="item">e</div>
|
|
</div>
|
|
<div class="flex">
|
|
<div class="item flexible">e</div>
|
|
</div>
|
|
<div class="flex fCol">
|
|
<div class="item">e</div>
|
|
</div>
|
|
<div class="flex fCol">
|
|
<div class="item flexible">e</div>
|
|
</div>
|
|
</body>
|