HTML and CSS Reference
In-Depth Information
5.
Setting the
flex
property alone greatly improves the layout, as Figure
22-34
shows.
But the
<article
>
elements need to be converted into flex containers as well. Their
contents need to be displayed as columns, so add the following definitions to their
style rule:
article {
background-color: #FFF;
margin: 5px;
border-radius: 15px;
padding: 10px;
font-size: 14px;
-webkit-flex: 1 1 0;
display: -webkit-flex;
-webkit-flex-flow: column;
flex: 1 1 0;
display: flex;
flex-flow: column;
}
Figure 22-34.
The flex items are now all the same width
