зеркало из https://github.com/mozilla/gecko-dev.git
43 строки
951 B
HTML
43 строки
951 B
HTML
<!DOCTYPE html>
|
|
<title>Test 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 {
|
|
display: -moz-box;
|
|
background: lightblue;
|
|
}
|
|
.flexible {
|
|
flex: 1;
|
|
}
|
|
</style>
|
|
<body>
|
|
<!-- The item should fill the grid here (by virtue of justify-items/align-items
|
|
default behavior): -->
|
|
<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>
|