HTML and CSS Reference
In-Depth Information
Listing 22-3 contains the basic styles and HTML markup for the following examples that demonstrate the
difference (the code is in no_distribution.html).
Listing 22-3.
Basic Code for Space Distribution Examples
<style>
#container {
display: flex;
border: 1px solid #000;
width: 500px;
}
p {
margin: 2px;
padding: 5px 0;
text-align: center;
background-color: #CCC;
border: 1px solid #999;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
</style>
<div id="container">
<p>Item 1</p>
<p>This is item 2</p>
<p>Flex item 3</p>
</div>
The styles in Listing 22-3 display a single-row flex container with three paragraphs of differing lengths. The
flex
property is not set, so it defaults to
0 1 auto
, which means no flex grow ratio, a flex shrink ratio of
1
, and the
main size set to
auto
. As a result, the width of each paragraph is controlled by its content, as shown in Figure
22-21
.
Figure 22-21.
The flex items collapse to the width of their content
How Zero flex-basis Distributes Space
When the
flex-basis
component of the
flex
shorthand is set to zero, the flex grow and flex shrink ratios are
applied to the full main size of the flex item.
The styles in flex-basis_zero.html adapt the paragraph styles in Listing 22-3 like this:
p {
margin: 2px;
padding: 5px 0;
text-align: center;
background-color: #CCC;
border: 1px solid #999;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
flex: 1 1 0;
}