I check the spec https://www.w3.org/TR/css-flexbox-1/#item-margins It says that we should not margin and padding in percentage but doesn't say that using fixed width like margin:10px is fine.
Is this code not following the spec? Mainly the use of margin because I want to keep the margin always 10px in this case.
CSS
.flex-container {
display: inline-flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin-right: 10px;
}
HTML
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
The warning against %s in padding and margin is there to prevent cross-browser problems, as your page might render differently in different browsers.
There is no problem with using any other values, so we didn't say anything about it. There wasn't any need to explicitly say you can use them, because you can always use them.
In other words, your code is just fine. ^_^
Most helpful comment
The warning against %s in padding and margin is there to prevent cross-browser problems, as your page might render differently in different browsers.
There is no problem with using any other values, so we didn't say anything about it. There wasn't any need to explicitly say you can use them, because you can always use them.
In other words, your code is just fine. ^_^