As we all know, elastic layouts play an important role in front-end development, and can be used to create many complex layouts if used properly, but I mostly use them in responsive layouts.

Content structure

  • Container attribute
    • The spindle layout
      • flex-direction
      • flex-wrap
      • flex-flow
      • justify-content
    • The lateral axis layout
      • align-items
    • Multiaxial layout
      • align-content
  • The content attribute
    • order
    • flex-grow
    • flex-shrink
    • flex-basis
    • flex
    • align-self

Layout with Flex: display:flex;

demo

hmtl

<div class="warpper">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
    <div class="inner">4</div>
</div>
Copy the code

css

.warpper {
    width: 500px;
    height: 500px;
}
.inner {
    font-weight: bold;
    color: white;
    text-align: center;
    line-height: 100px;
    font-size: 40px;
}
.inner:nth-child(even){
    width: 100px;
    height: 100px;
    background-color: red;
}
.inner:nth-child(odd){
    width: 100px;
    height: 100px;
    background-color: #000000;
}
Copy the code

The effect

Container attribute

css

.warpper {
    width: 500px;
    height: 500px;
    display: flex;
}
Copy the code

The effect

The spindle layout

Spindle side axis concept

flex-direction

Using container style flex layout add: flex-direction: param;

@param: row: axis to the right row-reverse: axis to the left column: axis to the right column-reverse: axis to the right column-reverse: axis to the right column-reverse: axis to the right column-reverse: axis to the right columnCopy the code

flex-wrap

Use container style flex layout to add: flex-wrap: param;

@param: nowrap: no line wrap: wrap-reverse: wrap in the opposite directionCopy the code

flex-flow

Using a container style flex layout add: flex – flow: < flex – direction > | | < flex – wrap >;

justify-content

Use container-style Flex layout to add: context-content: param;

@param: flex-start: indicates the start of the spindle. Flex-end: indicates the start of the spindle. Center: indicates the center of the spindleCopy the code

The lateral axis layout

align-items

Use container style Flex layout to add: align-items: param;

@param: flex-start: flex-end: center: baseline: baseline alignment: stretch: no height! The default stretch fills the parent element heightCopy the code

Multiaxial layout

align-content

Use container style flex layout to add: align-content: param;

@param: flex-start: the starting point of the side axle flex-end: the end point of the side axle center: the side axle is centered space-between: both ends of the side axle are aligned space-around: evenly distributed on both sides of the side axle: No altitude! The default stretch fills the parent spaceCopy the code

No height stretch effect

The content attribute

order

This is followed by an integer, and the larger the value, the further back the element

css

.inner:nth-child(1){ width: 100px; height: 100px; background-color: red; order: 8; } .inner:nth-child(2){ width: 100px; height: 100px; background-color: #000000; order: -8; } .inner:nth-child(3){ width: 100px; height: 100px; background-color: red; order: 2; } .inner:nth-child(4){ width: 100px; height: 100px; background-color: red; order: 1; // (default)}Copy the code

The effect

flex-grow

With this attribute followed by an integer, the remaining space of the parent element is divided equally according to the proportion of the integers among the sibling attributes.

css

.inner:nth-child(1){
    width: 100px;
    height: 100px;
    background-color: red;
    flex-grow: 0;
}
.inner:nth-child(2){
    width: 100px;
    height: 100px;
    background-color: #000000;
    flex-grow: 1;
}
.inner:nth-child(3){
    width: 100px;
    height: 100px;
    background-color: red;
    flex-grow: 0;
}
.inner:nth-child(4){
    width: 100px;
    height: 100px;
    background-color: black;
    flex-grow: 0;
}
Copy the code

The effect

flex-shrink

  • withflex-growInstead, it shrinks when the parent element runs out of space, andflex-shrinkThat’s the property that controls the zoom
  • It’s followed by an integer, but his algorithm is a little bit tricky, and we just know that the bigger the number, the more it shrinks
  • The flex – the shrink: 0; It means no contraction

flex-basis

The initial space occupied by auto is the user-defined width

css

.inner:nth-child(1){
    width: 100px;
    height: 100px;
    background-color: red;
    flex-basis: 200px;
}
.inner:nth-child(2){
    width: 100px;
    height: 100px;
    background-color: #000000;
    flex-basis: 50px;
}
.inner:nth-child(3){
    width: 100px;
    height: 100px;
    background-color: red;
    flex-basis: 50px;
}
.inner:nth-child(4){
    width: 100px;
    height: 100px;
    background-color: black;
    flex-basis: 150px;
}
Copy the code

The effect

flex

  • flex: <flex-grow> || <flex-shrink> || <flex-basis>
  • auto: flex: 1 1 auto;
  • none: flex: 0 0 auto;

align-self

  • Different alignment of individual content boxes on the side axis
  • CSS: align – self:param;
@param: auto: inherit align-items flex-start: flex-end: flex-end: center: baseline: text alignment stretch: no height! The default stretch fills the parent element heightCopy the code

css

.inner:nth-child(1){
    width: 100px;
    height: 100px;
    background-color: red;
    align-self: center;
}
.inner:nth-child(2){
    width: 100px;
    height: 100px;
    background-color: #000000;
    align-self: flex-end;
}
.inner:nth-child(3){
    width: 100px;
    height: 100px;
    background-color: red;
    align-self: flex-start;
}
.inner:nth-child(4){
    width: 100px;
    /* height: 100px; */
    background-color: black;
    align-self: stretch;
}
Copy the code

The effect