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