What is the Flex

Flex, short for Flexible Box, is designed to provide maximum flexibility to boxed models. Any container can be specified as a Flex layout

    .box{
        display:flex;
    }
Copy the code

Inline elements can also be laid out using Flex

    .box{
        display:inline-flex;
    }
Copy the code

Webkit-kernel browsers must be prefixed with -webkit.

    .box{
      display: -webkit-flex; /* Safari */
      display: flex;
    }
Copy the code

Achieve vertical center

    display: flex;
    justify-content: center; // Center the spindlealign-items: center; // Set the side axis to centerCopy the code

Flex properties:

Flex-direction: determines the spindle alignment

    display:flex;
    flex-direction:row; // Set horizontal alignment (default)flex-direction:row-reverse; // Set horizontal arrangement, reverse arrangementflex-direction:column; // Set the vertical displayflex-direction:column-reverse; // Set vertical display, reverseCopy the code

Flex-wrap: sets whether to wrap a line

    display:flex;
    flex-wrap:nowrap; // No line breaks by defaultflex-wrap:wrap; // The first line is at the topflex-wrap:reverse; // Newline, first line belowCopy the code

Flex-flow: short for flex-direction and flex-wrap

    .box {
      flex-flow: <flex-direction> <flex-wrap>;
    }
Copy the code

Context-content: Sets the spindle alignment

    flex-start // Defaults to left aligned with the top of the spindleflex-end // right-aligned, bottom of spindle to center // spindle centered space-around // All distances will automatically evenly split the space-around // each box will evenly split the left and right sides (similar to the right and right sides)margin// The two ends are aligned and the middle distance is evenCopy the code

Align-items: Sets the alignment of the side axis

    flex-start // Top of side axis alignedflex-end // Align the bottom of the side axis with the center // Align the bottom of the side axis with the center (vertical center). * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *Copy the code

Align-content: Sets multi-line alignment

    flex-start // Cancel the line spacing and align the top of the side axisflexConter // Cancel line spacing, space around // space between // align both ends, Evenly split the space-instituted // all distances automatically evenly split stretch //Copy the code

Align-self: Sets the attributes of flexible elements (child elements)

    flex-start // Align the top of the side axis of the single flexible elementflex-end // The bottom of the side axis of the single flexible element is aligned with the center // The side axis of the single flexible element is centered (vertically centered) stertch // The content of the single flexible element is stretchedauto// Inherits the parent elementalign-itemsThe value of theCopy the code

Attributes of flexible elements (child elements)

Flex: flex-grow stretch, flex-shrink, flex-basis;

    order// The larger the value is, the further the value is. The smaller the value is, the further the value is0
    flex-growNote: The width and height of the flexible element cannot be greater than the width and height of the parent element, the need for free space, default value0;
    flex-shrinkNote: The width of the flexible element must be greater than the width of the parent element for the effect to shrink, default1/auto; flex-shrink:0No shrinkage; // reassign the width or height of the flexible element px/%/auto, // default auto, auto is the width or height of the flexible element itself flex: <flex-grow>, <flex-shrink>, <flex-basis> // Default: flex:0 1 auto;
Copy the code