Flexible layouts in CSS (also known as Flex layouts)

Flexbox is a powerful and compatible layout method introduced in the latest version of CSS3 that makes it easy to handle the layout of elements on a page and create dynamic user interfaces that automatically shrink and enlarge pages.

Because I can not always remember the meaning of each attribute, but also because of the reason of the internship, the use of the place is not enough skilled, here I comb through to deepen my memory.
  1. An elastic box consists of an elastic container (that is, the parent flex Container) and an elastic child (Flex Item).
  2. Defines an element as an elastic container, setdisplay:flex;Or display:inline-flex;(WebKit kernel browsers must add -webkit)
  • Let’s start by defining an elastic container and three sub-boxes, rendered as follows:
      .container {
        display: flex;
        width: 400px;
        height: 250px;
        background-color: pink;
      }
       .item {
           width: 100px;
           height: 100px;
           margin: 10px;
           background-color:red;
       }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>
Copy the code

The container has two axes by default: horizontal and vertical. The horizontal axis is called the main axis and the vertical axis is called the cross axis

There are six main attributes of a container

  • Flex-direction: determines the orientation of the main axis (the orientation of the child elements)

In the parent element set properties: flex – direction: row | row – reverse | column | column – reverse;

1.flex-direction:row; Default property, horizontal layout from left to right

2.flex-direction:row-reverse; : Horizontal layout from right to left

3.flex-direction:column; Layout vertically from top to bottom

  1. flex-direction:column-reverse;: Vertical layout from bottom to top

  • Flex-wrap: Determines whether a child element is wrapped

In the parent element set properties: flex – wrap: nowrap | wrap | wrap – reverse;

  1. flex-wrap:nowrap;By default, there are no line breaks and all elements are displayed on one line. (If the width of all child elements exceeds that of the parent element container, it is also displayed on one line, but the size of the child elements has changed.)

  1. flex-wrap: wrap:Newline, the excess child elements are displayed in order on the second line

  1. flex-wrap:wrap-reverse;Newline, the first line is shown in the following order

  • Flex-flow: short for the above two elements, the default is row nowrap(horizontal layout from left to right and displayed on a line)
  • Context-content: Determines the horizontal alignment of child elements.

Parent can set up: the justify – content: flex – start | flex – end | center | sapce – between | space – around;

  1. justify-content: flex-start: Default value, aligned to the left

  1. justify-content: flex-end;: Is aligned to the right

  1. justify-content:center;: center display, but does not determine the vertical orientation

4.justify-content:space-between; : Align both ends with equal spacing between items

  1. justify-content:space-around;: Equal spacing on both sides of each item. As a result, the spacing between items is twice as large as the spacing between borders.

  • Align-item: Defines the alignment of child elements on the vertical axis

The parent element can be set: the align – items: flex – start | flex – end | center | baseline | stretch;

  1. align-items: flex-start;: Align with the upper edge of the vertical direction

  1. align-items: flex-end;: Align with the bottom edge of the vertical direction

  1. align-items: center;: vertically centered

  1. align-items: baseline: The baseline alignment of the first line of text for the child element

  1. align-items: stretch;: If the child element is not set to height or is set to auto, it will fill the entire container height. The default value

  • Align-content: defines the alignment of multiple axes. This property does not work if there is only one axis

Parent can set up: the align – content: flex – start | flex – end | center | space – between | sapce – around | stretch; : This attribute is rarely used and will not be recorded for the time being

The child element has six attributes

  • Order: Defines the order of child elements. The smaller the value is, the more advanced it is. The default value is 0
  • Flex-grow: Defines the size of the child element. Default is 0, or no size if there is free space.

No amplification effect:

Zoom in 3 times:

  • Flex-shrink: Shrinks the element scale. Default is 1. If there is insufficient space, the project shrinks.
  • Flex-basis: Defines the principal axis space that the project occupies before allocating extra space. The browser calculates whether the main axis has extra space based on this property. Its default value is Auto, the original size of the project.
  • Flex: short for flex-grow flex-shrink flex-basis. The default value is 0. 1 Auto
    We usually use: Flex: 1; —–> allocates each child element evenly (flex: 1, 1, 0)
  • Align-self: Allows a single item to have a different alignment than other items, overwriting the align-items property. The default value is auto, which inherits the align-items property of the parent element. If there is no parent element, it equals stretch.

This property may take six values, all identical to the align-items property except auto.