Overview of the latest version of the Flex box layout in CSS 3
In CSS 3, the CSS flexible box module is a very important module for implementing page layout processing in a very flexible way.
Although you can use other CSS style properties to implement page layout processing, if you use the flexible box layout technique defined in the CSS flexible box module, you can automatically adjust the display of the local areas of the page based on the screen size or browser window size, i.e., to achieve very flexible layout processing.
Although the CSS flexible box module has been published for several years, the content defined in the module has undergone several major changes since its inception. The official version currently published is ◦css flexible Box Layout MODULE-W3C candidate recommendation, September 2012.
Up to now, the latest version has been supported by more than 12.10 versions of the Opera, IE 11, Chrome 21, and more than 22 versions of Firefox.
Start learning the latest version of the Flex box layout from the sample page
Next, start with a sample page to learn the latest version of the Flex box layout. The code in the BODY element in the example page is shown below.
<body><p id= "main" > <p class= "Content" > <section>Next, you first specify the border style for each P element and section element in the page, as shown in the code below.
<style> #main { border:1px dotted #f0f; Padding:1em;}. Content { border:1px dotted #0ff; Padding:1em;} Section { border:1px dotted #f00; Padding:1em;} </style>In the browser, open the example page so far, and the elements in the page are arranged vertically from top to bottom, as shown in.
Use flexible box layouts for sample pages
The flexible box layout is specified by using Display:flex for the container element of the element that needs the layout, and style properties. In the CSS flexible box module, each element of the container element is called "Flex item" and the container element is called "Flex container".
One of the main differences between the layout of a flexible box and the way you use style properties such as float is that when you use style attributes such as float, you need to specify style attributes for each element in the container, and when you use the Flex box layout, you only need to specify style properties for the container element.
Next, we first use the elastic box layout for all P elements that have a style class named content, the container element of which is the P element with the ID attribute value of main, and the style code that modifies the element is as follows:
#main { border:1px dotted #f0f; Padding:1em; Display:flex;}Open the sample page in the browser, and the arrangement of all P elements in the page with the style class named content is modified to be arranged horizontally, as shown in.
Set element arrangement direction
You can control the arrangement direction of all child elements in a container by using the Flex-direction style property, and you can specify the values as shown below.
Row: Horizontal arrangement (default value)
Row-reverse: Horizontal Reverse arrangement
Column: Vertical arrangement
Column-reverse: Vertical Reverse arrangement
The style code for the P element that modifies the ID property value to main is as follows:
#main { border:1px dotted #f0f; Padding:1em; Display:flex; Flex-direction:row-reverse;}Opening the sample page in a browser, the arrangement of all P elements in the page with the name content of the style class is modified from the container element, that is, the right end of the P element with the ID attribute value of Main, starts to reverse horizontally, as shown in.
Next, first restore all of the style class named content p elements arranged in a horizontal forward arrangement, modify the id attribute value to main p element's style code is as follows:
#main { border:1px dotted #f0f; Padding:1em; Display:flex;}Flex-direction:column-reverse is then specified for all p elements with the style class name content, and the style attributes, as shown in the code:
. content { border:1px dotted #0ff; Padding:1em; Display:flex; Flex-direction:column-reverse;}Opens the sample page in the browser, where all the section child elements of all content p elements in the page are arranged in a vertical reverse arrangement (without including the section grandchild element in the sections child element), as shown in.
Use the Order Style property to specify the sort order
When using the Flex box layout, you can change the order of the elements by ordering property. You can include the Order property in the style of each element, which uses an integer attribute value that represents an ordinal, and the browser displays the elements from small to large as they appear.
The next step is to set all the section child elements of all p elements with the style class named content to be arranged vertically, and to modify the style code for all p elements of the style class named content, as follows:
. content { border:1px dotted #0ff; Padding:1em; Display:flex; Flex-direction:column;}The next step is to set the Order Style property value of the 2nd section child element in the P element with all the style classes named content to-1 by setting the section child elements to precede the other section child elements, as shown in the following code:
. Content Section:nth-child (2) { Order:-1;}Open the sample page in the browser, and the 2nd section child element in the P element with all the style classes named content in the page is displayed before the other sections child elements, as shown in.
Set element width and height
The next step is to show how to set the width of each element that is arranged horizontally.
You can use the Flex property value to make the total width of all child elements equal to the container width.
Next, by setting the Flex property value of the P element with all style classes named content to 1, the total width of all p elements with the style class name content equals the container element, which is the width of the P element with the ID attribute value of main, as shown in the code below. When all the Flex property values for the P element with the style class name content are set to 1 o'clock, the width of the p elements is equal.
. content { border:1px dotted #0ff; Padding:1em; Display:flex; Flex-direction:column; Flex:1;}Open the sample page in the browser, the width of all p elements with the style class name content automatically grows, the total width of these elements equals the container element, that is, the width of the P element with the ID attribute value of main, and the width of the P element for each style class name is equal, as shown in.
Next, we set the Flex property value of the second style class p element named content to 2, as shown in the code below.
. Content:nth-child (2) { flex:2;}To more clearly calculate the width of the element, we remove the border setting and padding settings for all elements, and the modified full style code is shown below.
<style> #main { Display:flex;}. Content { Display:flex; Flex-direction:column; Flex:1;}. Content Section:nth-child (2) { Order:-1;}. Content:nth-child (2) { flex:2;} </style>Open the sample page in the browser, the second style class named content P element width is twice times the width of the P element for other style classes named content, assuming that the container element of these elements, that is, the width of the P element with the ID attribute value of main is equal to 600px, The width of the P element with the first and third style class named content is equal to 150px, and the width of the P element with the second style class named Content equals 300px.
You can use the Flex-grow property to specify the width of an element, but the style property is calculated differently for the width of the element than for the Flex style property for the width of the element.
Next, you specify that all p elements of the style class named content have a value of 1, a width of 150px, and a value of Flex-grow style property of P element with the second style class named Content Flex-grow 3. The modified full style code is shown below.
<style> #main { Display:flex;}. Content { Display:flex; Flex-direction:column; width:150px; Flex-grow:1;}. Content Section:nth-child (2) { Order:-1;}. Content:nth-child (2) { flex-grow:3;} </style>Open the sample page in the browser, assuming that the element's container element, that is, the width of the P element with the ID attribute value of main is equal to 600, the width of the P element with the third style class named content is equal to 180px, The width of the P element for the second style class named content is equal to 240px. The steps to calculate the width of the P element for each style class named Content are as follows:
600 (container width) -150*3 (the total width of the P-element width of three style classes named content) =150
150/5 (the sum of the Flex-grow style property values for the three style class named content P element width) =30
The width of the width of the P element with the first and third style class named Content equals 150 (its width style property value +) +30*1 (its Flew-grow style property value) =180px
The width of the P element with the second style class named Content equals 150 (its width style property value +) +30*3 (its Flew-grow style property value) =240px
You can use the Flex-shrink property to specify the element width, which differs from the Flex-grow style property in that when the sum of a child element's width style property value is less than the value of a container element, the child element width must be adjusted through the Flex-grow style property. When the sum of the value of the width style property of a child element is greater than the width value of the container element, the child element width must be adjusted through the Flex-shrink style property.
Next, you specify that all p elements of the style class named content have a value of 1, a width of 250px, and a value of Flex-shrink style property of P element with the second style class named Content Flex-shrink 3. The modified full style code is shown below.
<style> #main { Display:flex;}. Content { Display:flex; Flex-direction:column; width:250px; Flex-shrink:1;}. Content Section:nth-child (2) { Order:-1;}. Content:nth-child (2) { flex-shrink:3;} </style>Open the sample page in the browser, assuming that the element's container element, that is, the width of the P element with the ID attribute value of main is equal to 600, the width of the P element with the third style class named content is equal to 220px, The width of the P element for the second style class named content is equal to 160px. The steps to calculate the width of the P element for each style class named Content are as follows:
250*3 (The total width of the P element width of three style classes named content)-600 (container width) =150
150/5 (the sum of the Flex-shrink style property values for the three style class named content P element width) =30
The width of the width of the P element with the first and third style class named Content equals 250 (its width style property value +) -30*1 (its Flew-shrink style property value) =220px
The width of the P element with the second style class named Content equals 250 (its width style property value +) -30*3 (its Flew-grow style property value) =160px
When you use the Flex-grow style property or the Flex-shrink style property to adjust the width of a child element, you can also use the Flex-basis style property to specify the width of the child element before the adjustment, which is exactly the same as the width style property.
You can merge Flex-grow, Flex-shrink, and flex-basis style property values into the Flex style properties, as shown in the following method.
Flex:flex-grow Style Property value Flex-shrink Style property value Flex-basis style attribute value;
When using Flex Style property values, the Flex-grow, Flex-shrink, and flex-basis style property values are optional style property values, and when you do not specify Flex-grow, Flex-shrink style property values, the default Style property values are 1. When you do not specify the Flex-basis style property value, the default Style property value is 0px.
The style code in this example is modified as follows:
<style> #main { Display:flex;}. Content { Display:flex; Flex-direction:column; width:250px; flex:250px;}. Content Section:nth-child (2) { Order:-1;}. Content:nth-child (2) { flex:1 3 250px;} </style>Open the sample page in the browser, assuming that the element's container element, that is, the width of the P element with the ID attribute value of main is equal to 600, the width of the P element with the third style class named content is equal to 220px, The width of the P element for the second style class named content is equal to 160px.
Flex, Flex-grow, Flex-shrink, and Flex-basis style properties are used to specify or adjust the child element widths when the child elements are arranged horizontally, and Flex, Flex-grow, The Flex-shrink and Flex-basis style properties are used to specify or adjust the height of the child elements.
Single-line layout and multiline layout
You can use the Flex-wrap style property to specify a single-line layout or multiline layout, and you can specify that the style property values are as follows:
NoWrap: No Line break
Wrap: Line Wrapping
Wrap-reverse: Although wrapping is wrapped, but the line wrap direction is the opposite of the line wrap direction when you use the Wrap Style property value
The next step is to restore the border of each P element within the page and the padding (padding), specifying that all p elements with the style class named content are 250px wide, as shown in the code below.
<style> #main { border:1px dotted #f0f; Padding:1em; Display:flex;}. Content { border:1px dotted #0ff; Padding:1em; Display:flex; Flex-direction:column; flex:250px;} Section { border:1px dotted #f00; Padding:1em;}. Content Section:nth-child (2) { Order:-1;} </style>Then specify the container element, that is, the Flex-wrap style property value of the P element with the ID attribute value of main is wrap, which specifies that the line layout is allowed for all p elements with the style class name content, as shown in the code below.
#main { border:1px dotted #f0f; Padding:1em; Display:flex; Flex-wrap:wrap;}Open the sample page in the browser, when the browser window is not wide enough to accommodate the P element of three style class named content, the rightmost style class named content P element is wrapped in a newline, as shown in.
You can combine Flex-direction style property values with Flex-wrap style property values in Flex-flow style properties. The following two pieces of code work exactly the same.
Use the Flex-direction style property with the Flex-wrap style property. content { flex-direction:row; Flex-wrap:wrap;} Use the Flex-flow style property. Content { Flex-flow:row wrap;}Some special terms in the flexible box layout
The next step is to introduce some of the special terms in the Flex box layout, which are described in terms of layout.
Main axis: The axis that is the layout datum when it is laid out, the horizontal axis when the layout is horizontal, and the vertical axis when the layout is vertical.
Main-start/main-end: Layout Start and end of layout when you are laying out. The horizontal layout is the left and right end of the container, which is the top and bottom of the container in portrait layout.
Cross axis: The axis perpendicular to main axis, which is the vertical axis when the layout is horizontal, and the horizontal axis in portrait layout.
Cross-start/cross-end:cross the start and end of Axis axis. The horizontal layout is the top and bottom of the container, while the vertical layout is the left and right end of the container. When the Flex-wrap property value is specified as wrap and a horizontal multiline layout is performed, the Cross-start to Cross-end direction, which is the layout from top to bottom, and the Flex-wrap property value is specified as Wrap-reverse and the horizontal multi-line layout is Press from Cross-end to Cross-start direction, that is, from bottom to top layout.
Justify-content Property
The Justify-content property is used to specify how the layout container in addition to the child elements in the main axis axis direction (landscape layout when the main axis direction is horizontal, vertical layout when the main axis axis direction is vertical) on the remaining blank portion.
When the Flex-grow property value is not 0 o'clock, each child element automatically fills the container in the direction of main axis, so the Justify-content property value is invalid.
The value of the Justify-content property can be specified as follows:
Flex-start: Layout All child elements (default values) starting from Main-start.
Flex-end: Layout All child elements starting from main-end.
Center: Centers all child elements in the layout.
Space-between: The first child element is laid out at Main-start, the last child element is laid out at Main-end, and the white space is evenly distributed between all child elements and child elements.
Space-around: Evenly distributes the white space in the following places: between Main-start and the first child element, between each child element and child element, and between the last child element and Main-end.
The differences between the above attribute values are shown (gray represents the blank part).
Align-items Properties and Align-self properties
The Align-items property is similar to the Justify-content property to specify the alignment of the child elements, but the Align-items property specifies the cross axis axis direction (horizontal layout with the direction perpendicular to the traverse axis, Vertical layout is aligned on the horizontal direction of the cross axis axis, and you can specify the property values as shown below.
Flex-start: Layout All child elements (default values) starting from Cross-start.
Flex-end: Layout All child elements starting from cross-end.
Center: Centers all child elements in the layout.
Baseline: If the layout direction of the child element is inconsistent with the layout direction of the container, the value is equivalent to the effect of the Flex-start property value. If the layout direction of the child element is consistent with the layout direction of the container, the contents of all child elements are aligned along the baseline.
Stretch: All child elements in the same row are height-adjusted to maximum. If no child element height is specified, the height of all child elements is adjusted to the closest container height (when the element border and padding are considered, when the border width and padding are 0 equals the container height).
The differences between the above attribute values are shown (gray represents the blank part).
The difference between the Align-self property and the Align-items property is that Align-items is specified as the Style property of the container element, which specifies the alignment of all child elements, and the Align-self attribute is specified as the style property of some child elements. Used to specify the alignment of these child elements individually. For example, when you specify the Align-items property value of a container element as center (center alignment), you can specify the value of the Align-self property of the first child element as Flex-start (aligned on the Cross-start side). The values you can specify are as follows:
Auto: Inherits the Align-items property value of the parent element
Flex-start
Flex-end
Center
Baseline
Stretch
Align-content Property
When you are making multi-line layouts, you can use the Align-content property to specify the line alignment. The difference between this property and the Align-items property is that the Align-items property is used to specify the alignment of child elements, and the Align-content property is used to specify row alignment. The property values that you can specify are as follows:
Flex-start: Layout All rows starting from Cross-start.
Flex-end: Layout All rows starting from Cross-end.
Center: Center layout all rows.
Space-between: The first row is laid out at Cross-start, the last row is laid out at Cross-end, and the empty portion is evenly spaced between the rows.
Space-around: Evenly distributes the blanks in the following places: between Cross-start and the first row, between rows and rows, and between the last row and Cross-end.
The differences between the above attribute values are shown (gray represents the blank part).
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
