HTML and CSS Reference
In-Depth Information
in pixels or inches. It is relative to the value as specified among all the children elements. In
this case, the first element will hold 10 percent of the space, the last element will hold 15
percent of the space, and the middle element will hold whatever space is left. To do this, you
need to calculate the relative values that would be necessary to generate those proportions.
The rest of the calculations to render the output will be handled by the browser.
Because we are talking about percentages, it stands to reason that the entire width of
the space is 100 percent. The easy way to show this is to put into each element its respective
percentage since the relative size would be what you are looking for. To illustrate the point,
you can factor the units into something smaller by dividing by 20. This would make 10 per-
cent equal 2 parts of 100 percent and 15 percent equal 3 parts of 100 percent. The remaining
section will use 15 parts, or 75 percent of 100 percent. Figure 4-38 shows the output with
these values.
FIGURE 4-38 Distributing the flexbox content using the flex property
The order of the flexbox items can also be explicitly specified by using the order property
on the flexbox items. An example of this is listed here:
#flexbox1 > div:nth-child(1) {
background-color: green;
flex-order: 2;
#flexbox1 > div:nth-child(2) {
background-color: yellow;
flex-order: 1;
#flexbox1 > div:nth-child(3) {
background-color: red;
flex-order: 3;
Search WWH ::

Custom Search