HTML and CSS Reference
In-Depth Information
In flex_min-width.html, the style for the paragraphs is altered to specify a minimum width like this:
p {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
background-color: #CCC;
border: 1px solid #FFF;
margin: 0;
padding: 10px;
min-width: 100px;
flex: 1 0 0;
}
The
flex
property doesn't override
min-width
or
min-height
, but setting the
flex-basis
component to zero
causes the final paragraph to overflow the flex container, as shown in Figure
22-25
.
Figure 22-25.
The minimum width is honored, but the final item overflows
To get the final item to move to another row, you need to set the
flex-basis
component to
auto
like this (the
code is in flex_auto_width.html):
p {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
background-color: #CCC;
border: 1px solid #FFF;
margin: 0;
padding: 10px;
width: 100px;
flex: 1 0 auto;
}
Alternatively, set the
flex-basis
component to the desired size like this (the code is in flex-basis_width.html):
p {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
background-color: #CCC;
border: 1px solid #FFF;
margin: 0;
padding: 10px;
flex: 1 0 100px;
}
Both produce the result shown in Figure
22-26
. All four items have been resized using the value of
width
or
the
flex-basis
component as the desired minimum. But they all fill the available space. As a result the final item
is three times wider than the others.
