HTML and CSS Reference
In-Depth Information
Using Specific Dimensions with the flex Property
As noted earlier, the
flex
property overrides the main size of flex items. However, there's an important difference
in the way it handles minimum dimensions. The following examples are based on the styles and HTML in
Listing 22-4 (the code is in flex_width.html).
Listing 22-4.
Testing the Effect of the flex Property on width and min-width
<style>
#container {
display: flex;
flex-wrap: wrap;
border: 1px solid #000;
width: 400px;
}
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 0;
}
</style>
<div id="container">
<p>Flex item 1</p>
<p>Flex item 2</p>
<p>Flex item 3</p>
<p>Flex item 4</p>
</div>
This is an adaptation of Listing 22-2. The paragraphs have been given a background color and border to
show how much of the flex container they occupy. The width of each paragraph is set to
100px
. It also has
10px
padding and a
1px
border all round. This makes an overall width of
122px
.
The value of the
flex
property is
1 0 0
, which sets the flex shrink ratio to zero. Although you probably
expect this to prevent the paragraphs from shrinking, all four paragraphs are squeezed into the
400px
flex
container, as shown in Figure
22-24
.
Figure 22-24.
The flex property overrides the paragraphs' declared width
The
flex
property ignores the fact that
flex-wrap
has been set to
wrap
, which would allow the final
paragraph to move onto a second row. Because the
flex-basis
component has been set to zero, the flex items
are resized in proportion to their flex grow ratio.
