preface

Flexible layouts are a new generation of layouts. Using floating layouts in traditional layouts brings many disadvantages. For example, CSS code is highly dependent on HTML code structure.

PS: Elastic layout is suitable for relatively simple scenarios, too complex scenarios can try to use CSS3 Grid layout, elastic layout in the PC side still has compatibility problems, there is no compatibility problem in the mobile end, you can rest assured to use.

1. Container properties

Css3 provides several attributes for the newly added elastic layout, which are the container attributes of the elastic box model and the child elements attributes of the neutron elements of the elastic box.

1.1 the display

Css3 adds two new property values for display, flex and inline-flex

display:flex; /* declare the container as an elastic box model and the container behaves as a block-level element */ display:inline-flex; /* Declare the container as an elastic box model and represent the container as an in-line element */Copy the code

Container display: block;

1.2 the flex – direction

Flex-direction allows you to set the direction of the main axis. The default value is row.

The flex – direction: row | row – reverse | column | column – reverse

1.3 the flex – wrap

.box {
    width:500px;
    height:500px;
    margin:100px auto 0 auto;
    background: #eee;
    display: flex;
    flex-direction: row;
}
.box-item {
    width:200px;
    height:200px;
    line-height:200px;
    text-align: center;
    color:#fff;
    font-size:20px;
}
Copy the code

We can see that the container is 500px wide and 200px high, and the child elements are 200px wide and 200px high, so if we put 3 elements in a row, will the elements be newline like a floating layout?

The flex – wrap: nowrap | wrap | wrap – reverse

  • The flex – wrap: nowrap; /* No line feed, scale down */
  • The flex – wrap: wrap; /* Auto wrap */
  • The flex – wrap: wrap – reverse; /* Automatic reverse line feed, downward line feed becomes upward */

1.4 the justify – content

Justify-content Specifies the alignment of the spindle. By default, the axis is aligned to the start position of the spindle. The value is flex-start.

The justify – content: flex – start | | flex – end center | space – between | space – around

  • The justify – content: flex – start; /* Align to the start of the spindle */
  • The justify – content: flex – end; /* Align to the end of the spindle */
  • The justify – content: center; /* Center the main axis */
  • The justify – content: space – between; /* Align with equal spacing and leave no space */ on both ends
  • The justify – content: space – around; /* Align with the same spacing and leave both ends blank. The left spacing of each element is the same as the right spacing. See the following figure for details */

1.5 the align – items

Align-items control the alignment of the vertical axis. By default, align-items are aligned to the starting point of the main axis. The value is Flex-start.

The align – items: flex – start | flex – end | center | baseline | stretch

  • The align – items: flex – start; /* Align to the start of the vertical axis */
  • The align – items: flex – end; /* Align to the end of the vertical axis */
  • The align – items: center; /* Align the vertical axis with the center */
  • The align – items: baseline; /* Baseline text alignment, not often */
  • The align – items: stretch; /* If the height/width on the vertical axis is set to auto, then it is automatically filled, but it is still controlled by min/max-width/height. If the elastic box model is not set, the default height is the size of the content area. If the elastic box model is set and the align-items are set to stretch, the height will fill the entire parent container */

1.6 the align – content

If there is only one element in the vertical axis, will align-items still work if there are two? In order for the vertical axis to have two elements, we first set a wrap

flex-wrap:wrap;
Copy the code

In this case, we’re going to use align-content. The align – content: flex – start | flex – end | center | space – between | space – around

  • The align – content: flex – start; /* Align to the start of the spindle */
  • The align – content: flex – end; /* Align to the end of the spindle */
  • The align – content: center; /* Center the main axis */
  • The align – content: space – between; /* Align with equal spacing and leave no space */ on both ends
  • The align – content: space – around; /* Align the elements with equal spacing and leave both ends blank. The upper spacing of each element is the same as the lower spacing. See the figure below for details

2. Attributes of child elements

2.1 the order

The order attribute can be used to set the position of the child elements. The smaller the value of order, the higher the row. The default value is 0 and can be set as negative.

// Set the order of the third child to -1. Box-item3 {background: green; order:-1; }Copy the code

3. Summary

Flexible layout is simple and easy to use, after the use of skilled will find that only a little code can achieve the previous complex layout, flexible layout is the most important two axes, this must be skilled, many attributes of the direction are related to the two axes.

4. Communication

If this article helps you, feel good if you want to point a Star. github.com/lizijie123