Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Attribute classification

Properties associated with elastic containers

attribute Attributes that
flex-direction Set the main axis and determine the arrangement of elastic child elements
flex-wrap Whether to wrap an elastic child element when it is outside the elastic container
flex-flow Shortcuts to flex-direction and flex-wrap, compound properties
justify-content Sets the alignment on the main axis of the elastic child element
align-items Sets the alignment on the side axis of the elastic child element
align-content Set the alignment of the elastic child’s side axis when there is blank space on the side axis and there are multiple lines

Define the elastic box model

To set the elastic box model in CSS3, use the display style property to set the value to flex or inline-flex.

display : flex;
display : inline-flex;
Copy the code

Set the specified element to an elastic box model as shown in the example above, which becomes a flex container and its children become flex items.

  • Flex: Sets an elastic box model that specifies elements as block-level elements.
  • Inline-flex: Sets the elastic box model that specifies elements as in-line block-level elements.

The elastic box model still has browser compatibility issues:

display : -webkit-flex;
display: -ms-flex;
display: -moz-flex;
display: -o-flex;
Copy the code

The flex – direction attribute

The CSS flex-direction property applies to flex path elements and is used to create the direction of the spindle.

flex-direction: row| row-reverse| column| column-reverse
Copy the code
  • Row: Sets the spindle to be horizontal.
  • Row-reverse: Indicates the reverse direction of rows.
  • Column: Sets the main axis to be vertical.
  • Column-reverse: indicates the reverse direction of column.

DEMO row

.c1{
            flex-direction:row;
        }
Copy the code

DEMO row-reverse

.c2{
            flex-direction: row-reverse ;
        }
Copy the code

DEMO column

.c3{
            flex-direction: column ;
        }
Copy the code

DEMO column-reverse

.c4{
            flex-direction: column-reverse ;
        }
Copy the code

The justify – content attribute

The CSS context-content property applies to flex container elements and is used to set the alignment of flex items along the main axis.

justify-content: center| flex-start | flex-end| space- between | space-around
Copy the code
  • Center: Flex items to the middle of the first row.
  • Flex-start: Flex project aligned to the beginning of line -.
  • Flex-end: Flex items aligned towards the end of the first line.
  • Space-between: Scaling items are evenly distributed on a row.
  • Space-instituted: Projects will evenly split in a row, reserving half the space on each end.

DEMO center

.c2{
            /* Center one indicates the flex container along the middle of the spindle */
            justify-content: center;
        }
Copy the code

DEMO flex-start

.c1{
            /* flex-start - indicates the start of the flex container along the spindle */
            justify-content:flex-start;
        }
Copy the code

DEMO flex-end

.c3{
            /* flex-end - indicates the end of the flex container along the main axis */
            justify-content: flex-end;
        }
Copy the code

DEMO space-between

.c4{
            /* space-between indicates that scaling items are evenly distributed among scaling containers */
            justify-content: space-between;
        }
Copy the code

**DEMO ** space-evenly

.c5{
            /* SPACE-instituted - indicates that a flex item will evenly split into a flex container, with a blank start and end positions */
            justify-content: space-evenly;
        }
Copy the code

The align – the items property

The cSS align-items property applies to scaling container elements and is used to set the alignment of the row of scaling items along the side axis.

align-items: center| flex-start| flex-end| baseline| stretch
Copy the code
  • Center: Flex items aligned to the middle of the side axis.
  • Flex-start: Flex the project to the starting position of the side axis.
  • Flex-end: Flex items aligned to the end of the side axis.
  • Baseline: Flex items are aligned according to the baseline of flex items.
  • Stretch: Default value, stretch items stretch to fill the entire stretch container.

DEMO center

.c2{
            /* Center indicates the middle position of the flex container along the side axis */
            align-items: center;
        }
Copy the code

DEMO flex-start

.c1{
            /* align-items: - indicates the start of the flex container along the side axis */
            align-items: flex-start;
        }
Copy the code

DEMO flex-end

.c3{
             /* flex-end - indicates the end of the flex container along the side axis */
            align-items: flex-end;
        }
Copy the code

The flex – wrap attributes

The CSS flex-wrap property applies to flex container elements and is used to set whether the child elements of a flex container are displayed on a single line or multiple lines.

flex-wrap: nowrap| wrap| wrap-reverse
Copy the code
  • Nowrap: Sets the display of scaling items in a single line. This approach can cause an overflow of the scaling container.
  • Wrap: Displays scaling items in multiple lines.
  • Wrap-reverse: The reverse of wrap.

DEMO nowrap

.c2{
            width: 500px;
            flex-wrap: nowrap;
        }
Copy the code

DEMO wrap

.c3{
            width: 500px;
            flex-wrap: wrap;
        }
Copy the code

DEMO wrap-reverse

.c4{
            width: 500px;
            flex-wrap: wrap-reverse;  
        }
Copy the code

The align – content attribute

The CSS align-content property applies to flex container elements and is used to set the alignment of flex rows. This property changes the effect of the flex-wrap property.

align-content: center | flex-start | flex-end | space-between| space-around| stretch
Copy the code
  • Center: Align the rows in the middle of the flex container.
  • Flex-start: Line aligned to the starting position of the flex container.
  • Flex-end: lines aligned to the end of the flex container.
  • Space-between: Rows are evenly distributed in a row.
  • Space-around: Rows are evenly distributed in a row, with -half of the space reserved at both ends.
  • Stretch: Default, rows will stretch to take up extra space.

DEMO center

c2{
            align-content: center;
        }
Copy the code

DEMO flex-start

.c1{
            align-content: flex-start;
        }
Copy the code

DEMO flex- end

.c3{
            align-content: flex-end;
        }
Copy the code

DEMO space-between

.c4{
            align-content: space-between;
        }
Copy the code

DEMO space- around

.c5{
            align-content: space-around;
        }
Copy the code

DEMO stretch

.c6{
            align-content: stretch;
        }
Copy the code