CSS3 Flexible Box Model Flexbox full version tutorial

Article Directory

Basic knowledge

Properties Introduction

Display:flex | Inline-flex; (Applies to the parent class container element)

• • • Please note:
  • flex-direction (for the elements of the parent class container)
  • flex-wrap (for parent class containers)
  • Flex-flow (for parent class containers)
  • Justify-content (for parent class containers)
  • Align-items (for parent class containers)
  • Align-content (for parent class containers)
  • Order (for Elastic box model container child elements)
  • Flex-grow (for flexible box model container child elements)
  • Flex-shrink (for flexible box model container child elements)
    • Description:
  • flex-basis (for flexible box model container child elements)
  • Flex (for Elastic box Model child elements)
    • Description:
  • align-self (For Elastic box Model child elements)
  • Common examples
    • 1. Center alignment
    • 2. Adaptive navigation
    • 3. Common 3-column mobile first layout
  • related Properties
  • Additional Resources
  • Browser Support
    • provides a SASS function to help you understand

From a tutorial on CSS tricks, the original is: a complete guides to Flexbox. This paper introduces the relevant properties of the new elastic box in detail, and gives some examples of use. is an excellent tutorial for beginners to get started flexbox. Of course, most of the content is written according to the article. Each of these properties gives an example diagram, which is very easy to understand. I based on their ideas, combined with Chinese translation, wrote a complete tutorial flexbox, I hope it is useful to everyone.

The Flexible layout (flexible box) module (currently recommended by the candidate) is designed to provide a more efficient way to lay out, align, and distribute the contents between containers, even if their size is unknown or dynamically changing.

The main idea of resilient layout is to allow the container to have the ability to change the width and height of the project to fill the available space (primarily to accommodate all types of display devices and screen sizes).

Most importantly, the elastic box layout is independent of orientation, relative to the regular layout (blocks are vertical and inline level based), it is clear that these work and Web page design is inflexible, unable to support large and complex applications (especially when it involves changing direction, scaling, stretching and shrinking, etc.).

Note: The Flexbox layout is the most suitable component for an application, as well as a small-scale layout, while a grid layout is used for larger layouts.

• Basic knowledge

Since Flexbox is a monolithic module, rather than a single attribute, it involves a lot of things, including its entire set of properties. Some of them are set on the parent container, while others are set on the child container.

If the regular layout is based on the block and inline flow direction, the flexible layout is based on the "flexible flow direction". Please take a look at this number from the specification, explaining the main idea behind the flexible layout.

Basically, the project will develop any of the following spindles (from Main-start to main-end) or cross-axes (from Cross-start to Cross-end).

• Properties Introduction
• Display:flex | Inline-flex; (Applies to the parent class container element)

Defines a flex container, inline or based on a specified value, for the following subclass container.

• Box: Displays the object as an elastic telescopic box. (The oldest version of the Telescopic box) (CSS3)
• Inline-box: Displays the object as an inline block-level elastic expansion box. (The oldest version of the Telescopic box) (CSS3)
• Flexbox: Displays the object as an elastic telescopic box. (Telescopic box transition version) (CSS3)
• Inline-flexbox: Displays the object as an inline block-level elastic expansion box. (Telescopic box transition version) (CSS3)
• Flex: Displays the object as an elastic telescopic box. (Latest version of Telescopic box) (CSS3)
• Inline-flex: Displays the object as an inline block-level elastic expansion box. (Latest version of Telescopic box) (CSS3)
• Please note:

1.CSS columns (CSS columns) do not work in flexible boxes

2. float , clear and vertical-align does not work in flex projects

• Flex-direction (applies to the element of the parent class container)

Definition: Sets or retrieves the position of the child elements of a telescopic box object in the parent container.

Flex-direction:row | Row-reverse | Column | Column-reverse

• Row: Horizontal left-to-right (left-aligned), arranged by default.
• Row-reverse: Reverses the horizontal arrangement (right-aligned, from back to front, and the last item to the front.)
• Column: vertical arrangement.
• Row-reverse: Reverse the vertical arrangement, from the back to the front row, the last item on top.

Flex takes effect to define its parent element display as Flex or inline-flex (box or Inline-box, which is the old way)

Demo: flex-direction

• Flex-wrap (applies to the parent class container)

Sets or retrieves whether the child elements of a telescopic box object are wrapped when they are outside the parent container.

Flex-wrap:nowrap | Wrap | Wrap-reverse

• NoWrap: Does not wrap when child elements overflow the parent container.
• Wrap: Wraps automatically when a child element overflows the parent container.
• Wrap-reverse: Reverse wrap arrangement.

Demo: Flex-wrap

• Flex-flow (applies to the parent class container)

Composite properties. Sets or retrieves the arrangement of child elements of a telescopic box object.

Flex-flow: < ' flex-direction ' > | | < ' flex-wrap ' >

• [Flex-direction]: Defines the direction in which the elastic box elements are arranged.
• [Flex-wrap]: Defines whether the elastic box element overflows the parent container when wrapping.

Demo: Flex-flow

• Justify-content (applies to the parent class container)

Sets or retrieves the alignment of the elastic box element in the direction of the spindle (horizontal axis).

This property assists in allocating extra space when all child elements on a row in the elastic box cannot be scaled or have reached their maximum value. When an element overflows a row, this property is also controlled on the alignment.

Justify-content:flex-start | Flex-end | Center | Space-between | Space-around

• Flex-start: The Elastic box element aligns to the starting position of the line. The boundary of the primary start position of the first child element of the row is aligned with the boundary of the primary start position of the row, and all subsequent telescopic box items are aligned with the previous item.
• Flex-end: The Elastic box element aligns to the end of the line. The boundary of the primary end position of the first child element of the row is aligned with the boundary of the main end position of the row, and all subsequent telescopic box items are aligned with the previous item.
• Center: The Elastic box element aligns to the middle of the row. The child elements of the row are aligned to each other and centered in the row, while the first element is equal to the margin of the primary start position of the line with the margin of the last element and the primary end of the row (if the remaining space is negative, an overflow of equal lengths is maintained).
• Space-between: The elastic box elements are evenly distributed in the row. If the left-most remaining space is a negative number, or if the row has only one child element, the value is equivalent to ' Flex-start '. In other cases, the boundary of the first element is aligned with the boundary of the primary start position of the row, while the last element's boundary is aligned with the margin of the row's main end position, while the remaining telescopic box items are evenly distributed and ensure that the white space between 22 is equal.
• Space-around: The elastic box elements are evenly distributed across rows, leaving half of the space between child elements and child elements. This value is equivalent to ' center ' if the left-most remaining space is a negative number, or if the line has only one telescopic box item. In other cases, the telescopic box items are evenly distributed and ensure that the space between 22 is equal, while the space before the first element and the last element are half as many other white space.

Demo: Justify-content

• Align-items (applies to the parent class container)

Sets or retrieves the alignment of the elastic box element in the direction of the side axis (vertical axis).

Align-items:flex-start | Flex-end | Center | Baseline | Stretch

• Flex-start: The boundary of the starting position of the side axis (longitudinal axis) of the elastic box element is close to the start boundary of the side axis of the row.
• Flex-end: The boundary of the side axis (longitudinal axis) of the elastic box element is positioned close to the end boundary of the line's side axis.
• Center: The Elastic box element is centered on the side axis (vertical axis) of the row. (If the size of the row is smaller than the size of the elastic box element, it overflows the same length in two directions).
• Baseline: The value is equivalent to ' flex-start ' if the inline axis of the elastic box element is the same as the side axis. In other cases, the value will participate in the baseline alignment.
• Stretch: If the property value of the specified side axis size is ' auto ', its value causes the item's margin box to be as close to the size of the row as possible, but at the same time, the limit of the ' Min/max-width/height ' property is followed.

Demo: Align-items

• Align-content (applies to the parent class container)

Sets or retrieves the alignment of the Flex box stacking stretch line.

Align-content:flex-start | Flex-end | Center | Space-between | Space-around | Stretch

• Flex-start: Each row is stacked to the starting position of the elastic box container. The start boundary of the side axis of the first row in the Elastic box container is close to the start boundary of the side axis of the elastic box container, and each row immediately follows the front row.
• Flex-end: The rows are stacked to the end position of the elastic box container. The end boundary of the side axis of the last line in the Elastic box container is close to the end of the side axis of the elastic box container, and each row immediately follows the previous row.
• Center: Each row is stacked to the middle of the elastic box container. Each row 22 is close to live at the same time in the Elastic Box Container center alignment, keep the elastic box container side axis start content boundary and the distance between the first row and the side of the container end of the content boundary and the last row of the same distance. (If the remaining space is negative, the rows are equal distances that overflow in two directions.) ）
• Space-between: The rows are evenly distributed in the elastic box container. If the remaining space is negative or there is only one row in the Elastic box container, the value is equivalent to ' Flex-start '. In other cases, the start boundary of the side axis of the first row is close to the boundary of the start of the side axis of the elastic box container, the end boundary of the side axis of the last line is close to the end boundary of the side axis of the elastic box container, and the remaining rows are arranged in a flexible box window to maintain equal space between 22.
• Space-around: The rows are evenly distributed in the elastic box container, with half of the space between the child elements and the child elements preserved on both ends. If the remaining space is negative or there is only one row in the Elastic box container, the value is equivalent to ' center '. In other cases, the rows are arranged in a flexible box container in a certain way to maintain equal space between 22, while the space behind the first line and the last line is half the rest of the space.
• Stretch: Each row will stretch to occupy the remaining space. If the remaining space is a negative number, the value is equivalent to ' Flex-start '. In other cases, the remaining space is divided by all rows to enlarge their side axis dimensions.

Demo: Align-content

• Order (For Elastic box model container child elements)

Order: <integer>

• <integer>: Use integer values to define the order of arrangement, with small values in front. Can be a negative value.

Demo: Order

• Flex-grow (for Flexible box model container sub-elements)

Sets or retrieves the expansion ratio of the elastic box.

Allocate the remaining space as a ratio based on the expansion factor set by the elastic box element.

Flex-grow: <number> (default 0)

• <number>: Defines the expansion ratio using numeric values. Negative values are not allowed
• The default value for Flex-grow is 0, and if no display defines the property, there is no allocation of the remaining space rights. In this case, b,c two has explicitly defined the Flex-grow, and you can see that the remaining space is divided into 4 parts, of which B is 1, and C is 3, or 1:3

Demo: Flex-grow

• Flex-shrink (for Flexible box model container sub-elements)

Sets or retrieves the shrink ratio of the elastic box, which shrinks the space according to the shrink factor set by the elastic box element as a ratio. ）

Flex-shrink: <number> (default 1)

Demo: Flex-shrink

• Description
• The default value of Flex-shrink is 1, and if no display defines the property, the ratio is automatically calculated as the default value of 1 after all the factors are summed to make space shrinkage.
• In this example, C explicitly defines that FLEX-SHRINK,A,B is not explicitly defined, but will be calculated according to the default value, you can see that the remaining space is divided into 5 parts, of which A is 1, B is 1, and C is 3 points, that is 1:1:3
• We can see that the parent container is defined as 400px, the subkey is defined as 200px, and then 600px after the addition, beyond the parent container 200px. Then the 200px needs to be a,b,c digested.
• According to the above definition a,b,c will be assigned 200px according to 1:1:3, the calculation can be 40px,40px,120px, in other words, a,b,c need to digest 40px,40px,120px, then you need to subtract the value from the original defined width, and finally get a to 160px , B is 160px,c to 80px
• Flex-basis (for Flexible box model container sub-elements)

Sets or retrieves the Flex box scaling reference value.

Flex-basis: <length> | Auto (default Auto)

• Auto: No specific width value, depending on other property values
• <length>: Defines the width with a length value. Negative values are not allowed
• <percentage>: Defines the width in percent. Negative values are not allowed

Demo: flex-basis

• Flex (For Elastic box model child elements)

Composite properties. Sets or retrieves how the child elements of a telescopic box object allocate space.

If the abbreviation is flex:1, its calculated value is: 1 1 0

Flex:none | [Flex-grow] | | [Flex-shrink] | | [Flex-basis]

• The None:none keyword is calculated as: 0 0 Auto
• [Flex-grow]: Defines an extended ratio of elastic box elements.
• [Flex-shrink]: Defines the shrinkage ratio of the elastic box element.
• [Flex-basis]: Defines the default datum value for the elastic box element.

Demo: Flex

• Description
• In the example above, the parent container width (that is, the spindle width) is defined as 800px, and the child element will overflow 1400-800=600px because the child element sets the scaling datum value flex-basis, and the 300+500+600=1400 is added.
• Because the shrinkage factor is set at the same time, the weighted synthesis can get 300*1+500*2+600*3=3100px;
• So we can calculate what amount of overflow the a,b,c will be removed:
• A is removed overflow amount: 300*1/3100*600=3/31, that is approximately equal to 58px
• B is removed overflow: 500*2/3100*600=10/31, i.e. approximately equal to 194px
• C is removed overflow: 600*3/3100*600=18/31, i.e. approximately equal to 348px
• The actual widths of the last a,b,c were: 300-58=242px, 500-194=306px, 600-348=252px
• Align-self (For Elastic box model sub-elements)

Sets or retrieves the alignment of the elastic box element itself in the direction of the side axis (vertical axis).

Align-self:auto | Flex-start | Flex-end | Center | Baseline | Stretch

• Auto: If the value of ' align-self ' is ' auto ', it evaluates to the ' Align-items ' value of the element's parent element, and if it does not have a parent element, the value is ' stretch '.
• Flex-start: The boundary of the starting position of the side axis (longitudinal axis) of the elastic box element is close to the start boundary of the side axis of the row.
• Flex-end: The boundary of the side axis (longitudinal axis) of the elastic box element is positioned close to the end boundary of the line's side axis.
• Center: The Elastic box element is centered on the side axis (vertical axis) of the row. (If the size of the row is smaller than the size of the elastic box element, it overflows the same length in two directions).
• Baseline: The value is equivalent to ' flex-start ' if the inline axis of the elastic box element is the same as the side axis. In other cases, the value will participate in the baseline alignment.
• Stretch: If the property value of the specified side axis size is ' auto ', its value causes the item's margin box to be as close to the size of the row as possible, but at the same time, the limit of the ' Min/max-width/height ' property is followed.

Demo: align-self

• Common examples
• 1. Center Alignment

. flex-container {/  * We First create a Flex layout context */  Display:flex;  /* Then we define the flow direction and if we allow the items to wrap * Remember This is the    same as:   * flex-dire Ction:row;   * FLEX-WRAP:WRAP;   */  Flex-flow:row wrap;  /* Then we define what is distributed the remaining space */  Justify-content:space-around;}

• You control the arrangement of child elements by setting the CSS code of the parent class container (Flex-direction:row) from left to right (the default).
• Whether the child element wraps when it exceeds the content. Flex-wrap:wrap (in line wrapping mode).
• Together, it's flex-flow:row wrap.
• Sets the alignment of a child element's elastic box stacking stretch line to a draw distribution in a box justify-content:space-around

Demo: Flexbox3

• 2. Adaptive navigation

/* Large */.navigation {  display:flex;  Flex-flow:row Wrap;  /* This aligns items to the end line on Main-axis */  justify-content:flex-end;} /* Medium Screens */@media all and (max-width:800px) {  . Navigation {/* When on    Medium sized screens, we center I T by evenly distributing empty space around items */    justify-content:space-around;  }}  /* Small Screens */@media all and (max-width:500px) {  . Navigation {/    * on Small screens, we is no longer using Row direction But column */    flex-direction:column;  }}

• Sets the child element to be left-to-right (Flex-direction:row), and the content is out of line wrapping (Flex-wrap:wrap).
• Set the content of child elements to align Right (justify-content:flex-end)
• When less than 800px, the content is centered, and when it is less than 500px, the content is arranged vertically, from top to bottom.

Demo: flexbox4

• 3. Common 3 column Mobile priority layout

. wrapper {  Display:flex;  Flex-flow:row Wrap;} /* We tell all items to be 100% width */.header,. Main,. Nav,. aside,. footer {  flex:1 100%;} /* We rely on source order for Mobile-first approach * in this case: * 1. Header * 2. Nav * 3. Main * 4. aside * 5.  Footer *//* Medium Screens */@media all and (min-width:600px) {/  * We tell both sidebars to share a row */  . Aside {Flex:1 auto;}}  /* Large Screens */@media all and (min-width:800px) {/  * We Invert order of first sidebar and main * and tell the   Main element to take twice as much width as the and the other sidebars    */  . main {flex:2 0px;}  . aside-1 {order:1;}  . Main    {order:2;}  . aside-2 {order:3;}  . Footer  {order:4;}}

• Set child elements from left to right, beyond line breaks (Flex-flow:row wrap;).
• By default, all child elements have a scale of 1 (flex-grow:1) and a scaling ratio of 100% (flex-basis:100%).
• Greater than 800px,. Main expands to 2. The scaling value is 0 (flex-basis:0px), and the sidebar aside-1 is arranged in the first position, main in the second position, and aside-2 in the third position.
• Greater than 600: The aside element has an expansion ratio of 1 (flex-grow:1), and the scaling ratio is auto (Flex-basis:auto).

Demo: flexbox5

• Related properties
• Grid
• Other resources
• Flexbox in the CSS specifications
• Flexbox at MDN
• Flexbox at Opera
• Diving to Flexbox by Bocoup
• Mixing syntaxes for Best browser support on Css-tricks
• Flexbox by Raphael Goetter (FR)
• Flexplorer by Bennett Feely
• http://devbryce.com/site/flexbox/
• Http://css.doyoe.com/properties/flex/index.htm
• http://css-tricks.com/snippets/css/a-guide-to-flexbox/
• Browser support
• (modern) refers to the syntax from the most recent norm (e.g. Display:flex;)
• (mixed) refers to from 2011 unofficial grammars (e.g. display:flexbox;)
• (old) grammatical means since 2009 (e.g. Display:box;)

Chrome	Safari	Firefox	Opera	IE	Android	iOS
21+ (modern) 20-(old)	3.1+ (old)	2-21 (old) 22+ (New)	12.1+ (modern)	(hybrid)	2.1+ (old)	3.2+ (old)

Blackberry Browser to support the new syntax

For more information on browser compatibility, please visit: simple version, CSS tricks another article or Devopera

• Here is a SASS function to help you understand

@mixin Flexbox () {  display:-webkit-box;  Display:-moz-box;  Display:-ms-flexbox;  Display:-webkit-flex;  Display:flex;} @mixin Flex ($values) {  -webkit-box-flex: $values;  -moz-box-flex:  $values;  -webkit-flex:  $values;  -ms-flex:  $values;  Flex:  $values;} @mixin Order ($val) {  -webkit-box-ordinal-group: $val;    -moz-box-ordinal-group: $val;       -ms-flex-order: $val;       -webkit-order: $val;    Order: $val;}. wrapper {  @include flexbox ();}. Item {  @include Flex (1 200px);  @include order (2);}

This article for Cai Baojian carefully authored articles, all rights reserved, without my permission, prohibit copying, reprint, excerpt part or all, violators will be held liable.

Original link: CSS3 flexible box Model Flexbox full version of the tutorial All rights reserved, please specify the source when reproduced, offenders must investigate.
Annotated source format: front-end Development blog (http://caibaojian.com/flexbox-guide.html) 7

CSS3 Flexible Box Model Flexbox full version tutorial