Detailed explanation of CSS3 Flex elastic layout example code

1. Basic Concepts

 //Any container can be specified as a Flex layout.
 .box{
   display: flex;
 }
 //Inline elements can also use Flex layout.
 .box{
   display: inline-flex;
 }
 //Note that after setting to Flex layout, the float, clear and vertical-align attributes of the child elements will become invalid.

2. Container Properties

1. flex-direction

flex-direction determines the direction of the item arrangement

 .box {
   flex-direction: row | row-reverse | column | column-reverse;
 }

2. flex-wrap

By default, items are arranged on a line (also called an "axis"). The flex-wrap property defines how to wrap if one axis does not fit.

 .box{
   flex-wrap: nowrap | wrap | wrap-reverse;
 }

3. Flex-flow

The flex-flow property is a shorthand form of the flex-direction property and the flex-wrap property, and the default value is row nowrap.

 .box {
   flex-flow: <flex-direction> || <flex-wrap>;
 }

4. justify-content

The justify-content property defines how items are aligned horizontally.

 .box {
   justify-content: flex-start | flex-end | center | space-between | space-around;
 }

5. align-item

The align-item property defines the vertical alignment of items.

 .box {
   align-items: flex-start | flex-end | center | baseline | stretch;
 }

3.6 align-content property

The align-content property defines the alignment of multiple axes. If the project has only one grid line, this property has no effect.

 .box {
   align-content: flex-start | flex-end | center | space-between | space-around | stretch;
 }

3. Project attributes

1. order

The order attribute defines the order in which the items are sorted. The smaller the value, the higher the ranking. The default value is 0.

 .item {
   order: <integer>;
 }

2. flex-grow

The flex-grow attribute defines the magnification ratio of the item. The default value is 0, which means that if there is remaining space, it will not be enlarged.

 .item {
   flex-grow: <number>; /* default 0 */
 }
 // If all items have a flex-grow property of 1, they will divide the remaining space (if any) equally. If one item has a flex-grow property of 2 and the others have a flex-grow property of 1, the former will take up twice as much remaining space as the other items.

3. flex-shrink

The flex-shrink property defines the shrink ratio of the item. The default value is 1, which means that if there is not enough space, the item will shrink.

 .item {
   flex-shrink: <number>; /* default 1 */
 }

4. Flex-basis

The flex-basis property defines the main size that an item takes up before any extra space is distributed. The browser uses this property to calculate whether there is extra space on the main axis. Its default value is auto, which is the original size of the project.

 .item {
   flex-basis: <length> | auto; /* default auto */
 }
 /*It can be set to the same value as the width or height attribute (such as 350px), then the item will occupy a fixed space. */

4.5 flex property

The flex property is an abbreviation for flex-grow, flex-shrink and flex-basis. The default value is 0 1 auto. The last two attributes are optional.

    .item {
      flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    }

This property has two shortcut values: auto (1 1 auto) and none (0 0 auto).

4.6 The align-self property

The align-self property allows individual items to be aligned differently from other items, overriding the align-items property. The default value is auto, which means inheriting the align-items property of the parent element. If there is no parent element, it is equivalent to stretch. Equivalent to align-items

 .item {
   align-self: auto | flex-start | flex-end | center | baseline | stretch;
 }

Summarize

The above is a detailed explanation of the CSS3 Flex elastic layout example code introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!