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
#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;
<div id="container">
<p>Flex item 1</p>
<p>Flex item 2</p>
<p>Flex item 3</p>
<p>Flex item 4</p>
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.
Search WWH ::

Custom Search