Wrapping with flex
By default, items in a flex container will shrink to fit and, if they can’t, they will overflow the container. For example, consider this markup:
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
And this CSS:
.container {
display: flex;
width: 500px;
background-color: #bbb;
align-items: center;
border: 1px solid #111;
}
.item {
color: #111;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 23px;
flex: 0 0 160px;
height: 40px;
border: 1px dashed #545454;
}
You may be wondering why the outer container is set with a width and not the flex shorthand property we looked at before. Remember, this is because unless the element is a...