preface

With the development of The Times, people pay more and more attention to the front-end user experience, whether it is on the Web end or mobile end (small program, H5, RN…). , especially in the mobile end, because the device screen is different, need front-end development to adapt to different screen size, on the layout of the requirements.

In current development, we often use Flex layouts to accommodate different screen sizes.

Today, I’ll talk about Flex from my experience with Flex.

What is theflexThe layout?

Flex layouts are also called elastic layouts. We can imagine that there are multiple children in a box. When we change the size of the box, the elastic layout provides us with rules for the layout of the sub-elements in the box

flexLayout properties

Properties of the parent container

  • display: flex

    Set the container to use an elastic layout

  • flex-direction

    Sets the arrangement of the main axis (the arrangement direction of the children)

    Attribute values describe
    row The main axis is horizontal, and the children are arranged from left to right
    column The main axis is vertical, and the child elements are arranged from top to bottom
    row-reverse The main axis is reversed horizontally, and the children are arranged from right to left (as opposed to row)
    column-reverse The main axis is reversed vertically, and the child elements are arranged bottom-up (andcolumnOn the contrary)

  • justify-content

    Sets the alignment rules for child elements in the main axis direction

    Attribute values describe
    flex-start The default value, the child elements are arranged from the beginning to the end of the main axis, aligned with the beginning direction of the main axis (left-aligned)
    flex-end The child elements are arranged from the end direction to the start direction of the principal axis (andflex-startOpposite), aligned with the end direction of the spindle (right aligned)
    center Child elements are centered in the middle of the principal axis
    space-around The ends are aligned so that the spacing on either side of the child elements is equal, and the spacing between the child elements is twice as large as the spacing between the head and tail child elements and the border
    space-between Both ends are aligned so that each child element is equally spaced

  • align-items

    Sets the alignment rules for child elements in the direction of the intersecting axis (the auxiliary axis that intersects perpendicular to the main axis)

    Attribute values describe
    flex-start Align the starting points of the cross axes
    flex-end The end points of the cross axes are aligned
    center Middle alignment of cross axes
    baseline Baseline alignment of the first line of text of the child element
    stretch The default value, the child element is not set to height or height is auto, will occupy the entire container height

  • align-content

    Set the vertical axis to allocate space between and around content items (multiple axes), invalid if child elements have only one row

    Attribute values describe
    flex-start Place flex elements from the starting point
    flex-end Place flex elements starting at the end point
    center Place the item in the middle alignment between the midpoint and the cross axis
    space-between Evenly distributed items, the first item is flush with the starting point and the last item is flush with the ending point
    space-around Distribute items evenly so that items have half the space at each end
    space-evenly Distribute items evenly, with equal space around them
    stretch The default value, evenly distribute items, stretch ‘automatic’ – sized items to fill containers

  • flex-wrap

    Specifies whether flex elements are displayed in a single line or multiple lines. If newlines are allowed, this property allows you to control the direction of the line stack

    Attribute values describe
    nowrap The default valueDon’t break.flexThe child elements of are placed on a row, which can cause an overflowflexThe container
    wrap It’s a newline. The first line is at the top.
    wrap-reverse Newline, first line down here. andwrapOn the contrary

  • flex-flow

    The flex-flow property is short for flex-direction and flex-wrap. The default value is Row nowrap

    flex-flow: <flex-direction> || <flex-wrap>;
Copy the code

Attributes of the child element

  • flex-grow

    Set the size of the element (Flex growth factor). Negative values are invalid. Default is 0.

  • flex-shrink

    Set the flex element shrink rule. Flex elements shrink only if the sum of their default widths is greater than the container. Negative values are invalid.

  • flex-basis

    Sets the initial size of the element in the main axis direction. This property determines the size of the Flex element’s content-box if you do not use box-sizing to change the box model. The default is Auto, which is the element’s original size

    When an element is set to both flex-basis (in addition to the value auto) and width (or height in the case of flex-direction: column), flex-basis has a higher priority.

  • flex

    Sets how an elastic item grows or shrinks to fit the space available in its elastic container. Is short for flex-grow, flex-shrink, and Flex-basis. Defaults to 0, 1 auto

    It can use one, two, or three values to specify flex properties

    1. Single-valued syntax (one)

    • An unitary number (number): it will be treated as flex:

      1 0; The value of Flex-shrink is assumed to be 1, and the value of Flex-basis is assumed to be 0.

      Common usage: flex: 1.

    • A valid width value: this will be treated as a flex-basis value.

    • Keyword None (1 1 auto), auto (0 0 auto).

    1. Double valued syntax (two)

    The first value must be an unitary number, and it will be treated as the value of the Flex-grow

    The second value has two formats:

    • An unitary number: It will be regarded asflex-shrinkThe value of the.
    • A valid width value: It will be regarded asflex-basisThe value of the.

  • align-self

    Sets the alignment of the current element, overriding the value of the existing align-items.

    Attribute values describe
    auto The default valueIs set to the parent elementalign-itemsValue, equivalent to stretch if there is no parent element
    flex-start Align the starting points of the cross axes
    flex-end The end points of the cross axes are aligned
    center Middle alignment of cross axes
    baseline Baseline alignment of the first line of text of the child element
    stretch Child elements that have no height or height set to Auto will fill the entire container height

These are the common flex layout properties, if you have errors, please be careful.

Attached to the reference:

  • Flex layout
  • Ruan Yifeng Flex layout tutorial: syntax