Deep parsing layout tool -Flex layout

preface

Traditional web layout is based on a box model, which relies on display +position +float properties. However, the limitations and flexibility of this approach are poor, and the elements on the screen can become messy, making it difficult for users to layout the page. This is where Flex (Flexible Box) layout comes in. It can complete, simple, and responsive layouts for multiple pages, making the user the “master” of the page layout.

Basic knowledge of

  • Here’s an example:

    <div class="outside"> <div class="inside1"> Child element 1</div> <div class="inside2"> Child element 2</div> </div>Copy the code

    We can turn on the Flex layout by adding the display: flex attribute to the parent element. The element that opens the Flex layout is called a Flex container, or “container,” and all of its children automatically become members of the container, called a Flex item, or “item.” The elastic box is made up of a Flex container and a Flex item.

    .outside {
  display: flex;
}
Copy the code

    After opening, it will look like the following figure:

  • The Flex layout is shown below:

The container has two axes by default: a horizontal main axis and a vertical cross axis. The starting position of the spindle (where it intersects with the border) is called main start and the ending position is called main end; The start position of the cross axis is called cross start and the end position is called cross end, and the items are arranged along the main axis by default. The main axis space occupied by a single project is called main size, and the cross axis space occupied is called cross size

Properties of the Flex container

flex-wrap

  • Sets whether the elastic container wraps when an elastic element overflows in a child element

  • Properties:

    nowrap By default, elements are not wrapped
    wrap The element wraps along the secondary axis
    wrap-reverse The element winds in reverse along the auxiliary axis 
  •   .outside {
    flex-wrap: nowrap | wrap | wrap-reverse;
  }
Copy the code
flex-direction

  • Specifies how the elastic elements in the container are arranged

  • Properties:

    row By default, elastic elements are arranged horizontally in the container
    row-reverse The elastic elements are arranged horizontally in reverse in the container
    column The elastic elements are arranged longitudinally
    column-reverse The elastic elements are arranged in reverse longitudinal directions 
  •   .outside {
    flex-direction: row | row-reverse | column | column-reverse;
  }
Copy the code
justify-content

  • Set how elements on the spindle are arranged (that is, how to allocate white space on the spindle)

  • Properties:

    flex-start The elements are edged along the principal axis
    flex-end The elements are arranged along the terminal edge of the principal axis
    center The elements are centered
    space-around White space is evenly distributed on both sides of the element
    space-between White space is evenly distributed between elements
    space-evenly Whitespace is distributed to one side of the element
flex-flow

  • It is a short form of the flex-direction and flex-wrap properties, and the default value is Row Nowrap

  • . Outside {flex - flow: < > 'flex - direction' | | < > 'flex - wrap'}Copy the code
align-items

  • Define how items are aligned on the cross axis

  • Properties:

    stretch Default value that sets the length of the element to the same value
    flex-start Elements do not stretch and are aligned along the secondary axis
    flex-end Align along the final edge of the secondary
    center Align center
    baseline Baseline alignment 
  •   .outside {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  }
Copy the code
align-content

  • Used to modify the behavior of the flex-wrap attribute, but instead of setting the alignment of the elastic child elements, it sets the alignment of the rows

  • Properties:

    flex-start Align with the starting point of the cross axis
    flex-end Align with the focus of the cross axis
    center Align with the midpoint of the intersecting axis
    space-between Align with both ends of the cross axes and evenly distribute the spacing between the axes
    space-around The spacing on both sides of each axis is equal
    stretch By default, the axis takes up the entire cross axis 
  •   .outside {
    flex-wrap: wrap;
    align-content: stretch | flex-start | flex-end | center | space-between | space-around
  }
Copy the code

Properties of the Flex project

The container has its own property “privileges”, so should the project!

order

  • Used to set attributes of elastic child elements in an elastic container. Syntax:

    order: <integer>
Copy the code

  • : Uses integer values to define the order. The default value is 0, and the smallest value takes precedence.

    .inside2 { order: -1; } // Place the second child firstCopy the code

　　　　　　　　　　　　　　　　

flex-shrink

  • Defines the scale by which an item is shrunk. The default value is 1. If space is insufficient, the item is shrunk

  •   .inside2 {
    flex-shrink: 3;
  }
Copy the code

　　　　　　　　　　　　　　　　　　　

flex-basis

  • Defines the main size of the project before allocating extra space. The default value is auto

  •   .inside2 {
    flex-basis: 20px;
  }
Copy the code

　　　　　　　　　　　　　　　　　　　

flex-grow

  • Defines the zoom scale of the project. Default is 0

  •   .inside2 {
    flex-grow: 2
  }
Copy the code

　　　　　　　　　　　

flex

  • This attribute is short for flex-grow, flex-shrink, and Flex-basis. The default value is 0 1 auto. The latter two attributes are optional

  •   .inside2 {
    flex: 0 1 auto;
  }
Copy the code
align-self

  • Defines the alignment of flex children in the lateral (vertical) direction alone. The default value is auto, which inherits the align-items property of the parent element, or stretch if there is no parent element

  •   .inside2 {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
  }
Copy the code

  • Property is used the same as align-items except for auto


The last

If it helps you, please like and bookmark this article and let more people see it ~ (“▔□▔)/

If you have any objections, please leave them in the comments section and I will reply one by one

If you are interested, please visitA blogger with a light in his eyes