CSS3 elastic box layout model) and css3 Layout

CSS3 elastic box layout model (conversion) and css3 Layout
Introduction

The purpose of introducing the elastic box layout model is to provide a more effective way to arrange, align, and allocate spaces for entries in a container. Even if the size of the entries in the container is unknown or dynamically changing, the elastic box layout model works normally. In this layout model, the container will adjust the size and sequence of the items included in the layout according to the layout requirements to best fill all available spaces. When the container size varies depending on the screen size or window size, the entries in the container size are dynamically adjusted. For example, when the container size increases, the items in the container will be stretched to occupy extra space. When the container size changes to an hour, the items will be reduced to avoid exceeding the container range. The elastic box layout is independent of the direction. In the traditional layout mode, blocks are arranged vertically from top to bottom, while inline is arranged horizontally. There is no such internal direction limit on the elastic box layout, which can be freely operated by developers.

Before going deep into the details of the elastic box layout model, first understand several important concepts, as shown in figure 1.

Figure 1. concepts related to the elastic box layout model

The flex container refers to the DOM elements that use the elastic box layout, and the entries of the elastic box layout (flex item) it refers to the sub-DOM elements contained in the container. The perimeter border in the figure represents the container, while the borders 1 and 2 represent the entries in the container.

As shown in the figure, the elastic box layout has two vertical axes: one is called the main axis and the other is called the cross axis ). The spindle is not fixed as the X axis in the horizontal direction, and the cross axis is not fixed as the Y axis in the vertical direction. In use, the CSS attribute declaration first defines the direction of the spindle (horizontal or vertical), then the direction of the cross axis is determined accordingly. The entries in the container can be arranged into one or more rows. The spindle determines the direction of each row in the container, while the cross axis determines the direction of the row. The proper spindle direction can be determined based on different page design requirements. In some containers, the entries must be horizontally arranged from left to right. In other containers, the entries must be vertically arranged from top to bottom.

After determining the direction of the spindle and the cross axis, you also need to determine their respective directions. The axes in the horizontal direction can be arranged from left to right or from right to left. For the axes in the vertical direction, they can be arranged from top to bottom or from bottom to top. For the spindle, the start and end positions of the arrangement bars are called the main start and main end respectively. For the cross axis, the start and end positions of the arranged rows are called cross start and cross end respectively ). In the container layout, entries in each row are arranged from the start position of the main axis to the end position of the main axis. When there are multiple rows in the container, each row is arranged from the starting position of the cross axis to the ending position of the cross axis.

The entry in the elastic box layout has two dimensions: the spindle size and the cross axis size, which correspond to the DOM element size on the spindle and cross axis respectively. If the spindle is in the horizontal direction, the spindle size and the cross axis size correspond to the width and height of DOM elements respectively. If the spindle is in the vertical direction, the two dimensions must be reversed. The main axis size corresponds to the main axis size attribute and cross axis size attribute, which refers to the attribute width or height in CSS. For example, when the spindle is horizontal, the spindle size attribute is width, while the width value is the spindle size.

The CSS style declaration in the elastic box deployment model applies to containers or entries respectively. The following describes the CSS attributes in detail. First, we will introduce how to use the elastic box layout model for basic page layout. In all the code examples in this article, the CSS Class Name of the container is always flex-container, and the CSS Class Name of the entry is flex-item. All examples can be previewed on CodePen.

Basic Layout

First, we will introduce the elastic box layout model from the basic layout. The layout is a simple preview page for image thumbnails. Figure 1 shows the basic HTML of the page.

Listing 1. simple HTML code of the image thumbnail preview page

<ul class="flex-container">   <li class="flex-item"></li>   <li class="flex-item"></li>   <li class="flex-item"></li>   <li class="flex-item"></li>   <li class="flex-item"></li>   <li class="flex-item"></li></ul>

 

The basic HTML of this page is very simple. There are 6 <li> elements under a <ul> element. Each <li> element contains a thumbnail of 300x300. <Ul> elements are used as containers for Elastic box layout, while <li> elements are entries in containers. The CSS that implements the basic layout is shown in code list 2.

Listing 2. Simple CSS code of the image thumbnail preview page

.flex-container {  list-style: none;   display: flex;   flex-direction: row;   flex-wrap: wrap;}.flex-item {   padding: 5px;}

 

In code list 2, for containers with an elastic box layout, use "display: flex" to declare the elastic box layout. The CSS attribute Declaration "flex-direction" is used to determine the direction of the spindle to determine the basic entry arrangement. The optional values of the "flex-direction" attribute and their meanings are shown in table 1.

Table 1. Optional values of the "flex-direction" attribute and their meanings

Attribute Value	Description
Row (default)	The spindle is in the horizontal direction. The order is the same as the document order on the page. If the document order is ltr, the order is from left to right. If the document order is rtl, the order is from right to left.
Row-reverse	The spindle is in the horizontal direction. The order is different from the document order on the page.
Column	The spindle is in the vertical direction. The order is from top to bottom.
Column-reverse	The spindle is in the vertical direction. The order is from bottom to top.

By default, entries in the elastic box container will occupy as many lines as possible in the direction of the main axis of the container. When the spindle size of the container is smaller than the total spindle size of all its entries, the entry overlaps with each other or exceeds the container range. The CSS attribute "flex-wrap" is used to declare the behavior when the size of the entry in the container exceeds the spindle size. The optional values of the "flex-wrap" attribute and their meanings are shown in table 2.

Table 2. Optional values of the "flex-wrap" attribute and their meanings

Attribute Value	Description
Nowrap (default)	The entries in the container only occupy one line of the container in the direction of the main axis. The entries may overlap with each other or exceed the container range.
Wrap	When the entries in the container exceed the line of the container in the direction of the main axis, the entries are arranged in the next line. The position of the next row is the same as that of the cross axis.
Wrap-reverse	Similar to the meaning of wrap, the difference is that the position of the next row is opposite to that of the cross axis.

You can use the "flex-flow" attribute to combine "flex-direction" with "flex-wrap", as shown in listing 3.

Listing 3. Examples of using the "flex-flow" attribute

flex-flow: row wrap;

Entries in the container

In addition to containers in the elastic box layout model, items in the container can also change the layout behavior through CSS attributes. The following describes the CSS attribute declarations that can be used by entries in the container.

Entry order

By default, the order of entries in the container depends on the order in which they appear in the HTML Tag code. You can use the "order" attribute to change the order in which entries appear in the container. For the HTML tag in the code to add the CSS declaration in Listing 4, after running, the last <li> element appears at the beginning of other <li> elements.

Listing 4. Examples of using the "order" attribute

.flex-item:last-child {   order: -1;}

 

The "order" attribute takes into account the style and accessibility of the page. Devices that support accessibility, such as screen readers, read elements in the order of HTML code. This requires that some important text appear before the HTML Tag. For general users who use browsers, it is better to display relatively unimportant images in front of them in some cases. For example, on the display page of a product, place the text of the product description in the source code before the product image. In this way, the screen reader can read the image conveniently. In CSS, the "order" attribute is used to put the image in front of the text. This allows the user to see the image first.

Entry size Elasticity

The core of the elastic box layout model is that the size of entries in the container is elastic. The container can dynamically adjust the size of the entry according to its own size. When there is blank space in the container, the entry can expand the size to occupy the space outside the amount of space. When the space in the container is insufficient, the entry can be reduced to avoid exceeding the container range. The elasticity of the entry size is determined by three CSS attributes: "flex-basis", "flex-grow", and "flex-shrink ".

The "flex-basis" attribute declares that the received value is the same as the "width" attribute and is used to determine the initial spindle size of an Elastic entry. This is the initial value before the size of the entry is adjusted by the container. If the value of "flex-basis" is auto, the actual used value is the value of the spindle size attribute, that is, the value of the width or height attribute. If the value of the spindle size attribute is auto, the value used is determined by the size of the entry content.

The value of the "flex-grow" attribute is a non-negative number with no unit. The default value is 1. The value of the "flex-grow" attribute indicates the proportion of space allocated between different entries when the container has extra space. For example, a container has three entries whose "flex-grow" attribute values are 1, 2, and 3 respectively. When there is blank space in the container, the additional blank space obtained by these three entries accounts for 1/6, 1/3, and 1/2 of the total space, as shown in code listing 5. For the preview page, see here.

Listing 5. Examples of using the "flex-grow" attribute

.flex-item:nth-child(1) {   flex-grow: 1;}.flex-item:nth-child(2) {   flex-grow: 2;}.flex-item:nth-child(3) {   flex-grow: 3;}

 

The "flex-shrink" attribute is similar to "flex-grow" in usage ". The value of this attribute is also non-unit, indicating the scale-down ratio of each entry when the container space is insufficient. When the scale-out is performed, after the scale-out ratio of the entry is multiplied by the value of "flex-basis", the actual scale-out value is obtained. For example, there are three entries in the container. The "flex-shrink" attribute values are 1, 2, and 3 respectively. The spindle size of each entry is 200px. When the container's spindle size is less than PX, for example, after becoming 540px, the 60 PX size needs to be reduced and the three entries are allocated in proportion. The size of the three entries must be reduced to 10px, 20px, and 30px respectively, and the spindle size should be changed to pixel PX, 180px, and 170px respectively. For the preview page, see here.

When using attributes "flex", you can declare the values of "flex-basis", "flex-grow", and "flex-shrink" at the same time, the format is "none | [<'flex-grow'> <'flex-shrink '>? | <'Flex-basis '>] ". The initial values of the three components of the attribute value are "0 1 auto ". When the value of the property "flex" is none, it is equivalent to "0 0 auto ". The value of the component "flex-basis" is 0%. Code Listing 6 provides an example of using the property "flex.

Listing 6. Examples of using the property "flex"

. Flex-item: nth-child (1) {flex: 1 auto;} flex: 1; // the flex-grow value is 1 and the flex-shrink value is 1, the value of flex-basis is 0%.

 

Note that when the container allocates additional space, the unit is "row. The container first determines the single-row layout or multi-row Layout Based on the property value of "flex-wrap", and then assigns the entries to the corresponding rows, finally, empty space is allocated in each row. For example, the CSS declaration example in code listing 7 has four entries in the container.

Listing 7. CSS Declaration for multi-row Layout

.flex-container { width: 990px;}.flex-item { width: 300px; flex: auto;}

 

Because the container width is only 990px, only three entries can be arranged in a row, and the remaining one will be arranged in a separate row. Among the three rows, the excess space 90px is evenly allocated to three entries. In a separate row of an entry, the excess 690px is fully occupied by the entry.

Entry alignment

After the size of entries in the container is determined, you can set the alignment of these entries in the container. There are three ways to align entries.

The first method is to use an Automatic Blank edge, that is, "margin: auto ". When an Automatic Blank edge is used, the extra blank space in the container is occupied by the blank edge declared as auto, as shown in code listing 8. CSS declares that the blank side on the left of the entry occupies extra space through "margin-left: auto" in the profile, so that the "Profile" text is displayed on the right. For the preview page, see here.

Listing 8. Use auto-blank edges for entry alignment

<div class="flex-container">  <div class="logo">Logo</div>  <div class="profile">Profile</div></div>

 

.flex-container {  display: flex;}.profile {  margin-left: auto;}

 

The second method is the alignment in the direction of the spindle. This is set through the "justify-content" attribute on the container. You can adjust the alignment of entries in the direction of the main axis. The adjustment of the entry alignment occurs after the elastic size of the entry is modified and the blank edge is automatically processed. When the entries in a row in the container do not have an elastic size or have reached their maximum size, there may be extra space in this row. You can use the "justify-content" attribute to allocate these spaces. This attribute can also control the alignment mode when the entry exceeds the travel range. The optional values and meanings of the "justify-content" attribute are shown in Table 3. The actual layout effect is shown in figure 2.

Table 3. Optional values and meanings of the "justify-content" attribute

Attribute Value	Description
Flex-start	The entry is concentrated at the starting position of the row. The first entry is aligned with its row's boundary in the starting direction of the spindle, and the remaining entries are arranged in sequence.
Flex-end	The entries are concentrated in the end direction of the row. The last entry is aligned with its row's boundary at the end of the main axis, and the remaining entries are arranged in sequence.
Center	Entries are concentrated in the center of the row. Entries are arranged in the center of the row, leaving the same size of blank space in the start and end directions of the spindle. If the blank space is insufficient, the entry will go beyond the same space in both directions.
Space-	The first entry is aligned with its row's boundary in the starting direction of the spindle, And the last entry is aligned with its row's boundary in the ending direction of the spindle. The blank space is evenly allocated between entries, so that the size of the white space between adjacent entries is the same.
Space-around	Similar to space-between, the difference is that there is also a blank space between the first entry and the last entry and the boundary of the row, the size of the blank space is half the size of the blank space between entries.

Figure 2. layout effects of different values of the "justify-content" attribute

The third method is to align the cross axis. In addition to alignment in the spindle direction, entries can also be alignment in the cross axis direction. The "align-items" attribute on the container is used to set the default alignment direction of all entries in the container on the cross axis, the attribute "align-self" on the entry is used to overwrite the specified alignment of the container. The optional values and meanings of the attribute "align-items" are shown in Table 4. The actual layout effect is shown in figure 3.

Table 4. Optional values and meanings of the attribute "align-items"

Attribute Value	Description
Flex-start	The entry and Its row are aligned on the boundary of the starting direction of the cross axis.
Flex-end	The entry is aligned with its row at the end of the cross axis.
Center	The blank edge box (margin box) of the entry is centered on the cross axis. If the size of the cross axis is smaller than the size of the entry, the entry will exceed the same size in two directions.
Baseline	The entries are aligned on the baseline. The entry with the maximum boundary distance between the baseline and the starting direction of the Cross-axis is aligned with the boundary of the row in the Cross-axis direction.
Stretch	If the calculated cross-axis size of an entry is "auto", the actually used value will fill the entry in the Cross-axis direction as much as possible.

The optional values of Attribute "align-self" can be set to "auto" in addition to those listed in the table ". When the value of "align-self" is auto, the calculated value is the value of the "align-items" attribute of the parent node. If the node does not have a parent node, the calculated value is "stretch ".

Figure 3. layout effects of different values of Attribute "align-items"

Cross-axis blank Processing

When the container has blank space in the cross axis direction, the attribute "align-content" is used to align rows in the container. The function of this attribute is similar to "justify-content". Only "justify-content" is an entry in the same row in the direction of the main axis. This attribute does not work when the container only has a single row. The optional values and meanings of the attribute "align-content" are shown in table 5. The actual layout effect is shown in Figure 4.

Table 5. Optional values and meanings of the attribute "align-content"

Attribute Value	Description
Flex-start	The rows are concentrated at the starting position of the cross axis of the container. The first line is aligned with the boundary of the container in the starting direction of the cross axis, and the rest are arranged in sequence.
Flex-end	The rows are concentrated at the end of the cross axis of the container. The first line is aligned with the boundary of the container at the end of the cross axis, and the remaining lines are arranged in sequence.
Center	Rows are concentrated in the center of the container. Rows are arranged in the center of the container, leaving the same size of blank space in the starting and ending directions of the cross axis. If the blank space is insufficient, the row will exceed the same space in both directions.
Space-	Rows are evenly distributed in the container. The first line is aligned with the boundary of the container in the starting direction of the cross axis, and the last line is aligned with the boundary of the container in the end direction of the cross axis. The blank space is evenly allocated between rows, so that the size of the blank space between adjacent rows is the same.
Space-around	Similar to space-between, the difference is that there is also a blank space between the first line entry and the boundary of the last line object and the Container Line, the size of the blank space is half the size of the blank space between the rows.
Stretch	Stretch rows to fill up the remaining space. The extra space is evenly allocated between rows to increase the cross-axis size of each row.

Figure 4. layout effects of different values of Attribute "align-content"

 

Application Example

The following uses an example to describe the application of the elastic box layout in actual development. This example shows a typical page layout of a blog post. When a blog post is displayed, the page usually includes the title, publisher, date and time, comment quantity, body, illustration, comment list, and other elements. These elements are arranged sequentially from top to bottom. The sample HTML and CSS code is provided in code listing 9 and 10. For the preview page, see here.

Listing 9. HTML code of the blog page

<div class="post">  
 
My first blog post.  </div>  <div class="post-image">      </div>  <div class="post-comments">    
 
Listing 10. CSS code on the blog page
.post {  display: flex;  flex-flow: column wrap;}.post-meta {  display: flex;  flex-flow: row wrap;  order: 1;}.post-body {  order: 3;}.post-comments {  order: 4;}.comments-count {  margin-left: auto;}.post-image {  order: 2;  align-self: center;}
 
In this example, the "order" attribute is used to change the display position of an item, and the "align-self" attribute is used to center the image.
Back to Top
Browser support
Because the elastic box model specification has many different versions, the browser's support for this specification is also inconsistent. The browser supports three standard syntaxes for different versions:

  

 
   
New specification: the syntax of the latest specification, that is, "display: flex ".
 
   
Intermediate version: the unofficial standard syntax in 2011, namely, "display: flexbox ".
 
   
Old specification: The standard syntax of 2009, that is, "display: box ".

  
The following table shows the browser support.
Table 6. browser support for the elastic box layout model

  

 
   
 
    
 
     
Chrome
 
     
Safari
 
     
Firefox
 
     
Opera
 
     
IE
 
     
Android
 
     
IOS
 
    
 
   
 
   
 
    
 
     
21 + (new specifications)
20-(Old Specifications)
 
     
6.1 + (new specifications)
3.1 + (Old Specifications)
 
     
22 + (new specifications)
2-21 (Old Specifications)
 
     
12.1 + (new specifications)
 
     
11 + (new specifications)
10 (intermediate version)
 
     
4.4 + (new specifications)
2.1 + (Old Specifications)
 
     
7.1 + (new specifications)
3.2 + (Old Specifications)
 
    
 
   

  
As shown in table 6, the elastic box layout model has been supported by mainstream browsers. To support browsers of different versions, in addition to the attributes defined in the Specification, you also need to add the corresponding browser prefix format, as shown in code listing 11.
Listing 11. browser prefix format of the elastic box layout model
.flex-container { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;}.flex-item { -webkit-box-flex: auto;-moz-box-flex: auto;-webkit-flex: auto;-ms-flex: auto; flex: auto;}.flex-item { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1;}
 
For the prefixes related to these browsers, it is best to use tools such as autoprefixer for processing.
Summary
As part of the CSS3 specification, the elastic box layout model can simplify the CSS Code required to complete the layout in many typical scenarios. The layout model also provides many practical features to meet common layout requirements, including arrangement, alignment, size adjustment, and blank space allocation of entries in the container. The elastic box layout model can be used as a good tool in the toolbox of Web developers.