Welcome to visit personal blog website: www.zhuxin.club

1. What is FlexBox

FlexBox (” Elastic layout “) is a new set of properties for layout provided by CSS3 that includes two classes of properties for containers (elastic containers, Flex Containers) and for their immediate child elements (elastic items, Flex Items)

FlexBox controls the following aspects of the Flex item:

  • Size, based on content and available space
  • Flow direction, horizontal or vertical, forward or reverse
  • Alignment and distribution of two axes
  • Order, can override the order in the source code

Flex Container has two axes by default: a horizontal main axis and a vertical cross axis. The starting position of the main axis (horizontal axis) (where it intersects with the border) is called main start, and the ending position is called main end; The starting position of the cross axis (vertical axis) is called cross start and the ending position is called cross end.

Flex 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.

The FlexBox layout largely solves the problems and drawbacks of inline blocks, floats, and table layouts. Today, as browsers become more compatible with Flex layouts, it should become the dominant layout solution for both PC and mobile pages

2. Flex Container

.flex-container{
        display: flex;
    }
Copy the code
<div class="flex-container">
    <span>flex item</span>
    <div>flex item</div>
    <p>flex item</p>
</div>
Copy the code

When you define display:flex for an element of any type, the element becomes flex Container. At this point, all of its immediate children (regardless of element type) become the elastic flex item, right

Elements that become Flex Containers can set the following CSS properties:

(1) flex-direction Flex-direction determines the direction of the main axis (i.e. the arrangement direction of flex items). It has four possible values:

Row (default) : The main axis is horizontal and starts at the left end of the container.

Row-reverse: The main axis is horizontal and the starting point is at the right end of the container.

Column: The main axis is vertical, and the starting point is at the top of the container.

Column-reverse: the main axis is vertical and the starting point is at the bottom of the container.

(2)flex-wrap

By default, all Flex items in a container line up, and flex-wrap defines how to wrap a line if the line does not fit. It has three possible values:

Nowrap (default) : No line breaks, and each Flex item shrinks proportionally in accordance with certain rules when one line is exceeded.

Wrap: the first line is at the top (left to right, top to bottom).

Wrap-reverse: Newline with the first line at the bottom (left to right, bottom to top).

(3)flex-flow

The flex-flow property is a short form of the flex-direction and flex-wrap properties. The default value is Row Nowrap.

(4)justify-content

Context-content defines the alignment of flex items on the main axis (horizontal axis). There are five possible values:

  • Flex-start (default) : left-aligned
  • Flex-end: right-aligned
  • Center: a center
  • Space-between: both ends are aligned with equal spacing between Flex items (if there are only two Flex items, one on each side of the main axis). If there is only one Flex item, it is arranged at the beginning of the container’s main axis.
  • Space-around: Equal spacing on both sides of each Flex item. So, the space between Flex items is twice as large as the space between the flex items on both sides of the main axis to the left and right edges (if there is only one Flex item in the middle).

(5)align-items

Align-items defines the alignment of Flex items on the vertical axis. There are five possible values:

  • Stretch (default) : If the height is not set or auto is set, the project will occupy the entire height of the container.
  • Flex-start: Alignment of the starting point of the cross axes.
  • Flex-end: alignment of ends of crossed axes.
  • Center: Alignment of the midpoint of the cross axis.
  • Baseline: The baseline alignment of the first line of text of the project.

(6)align-content

The align-content property defines the alignment of multiple axes (that is, multiple rows). This property has no effect if the project has only one axis (one row).

  • Stretch (default) : Axis takes up the entire cross axis.
  • Flex-start: align with the starting point of the cross axis.
  • Flex-end: aligns with the end of the cross axis.
  • Center: aligns with the midpoint of the intersecting axis.
  • Space-between: aligned with both ends of the intersecting axes, with evenly distributed spacing between axes.
  • Space-around: The spacing on both sides of each axis is equal. Therefore, the spacing between axes is twice as large as the spacing between axes and borders.

Vertical center technique

Set context-content: Center and align-items: Center to center all Flex items vertically and horizontally relative to the Flex Contanier

3. Flex item

Elements that become elastic items can set the following CSS properties:

(1)order

The order property defines the ordering of Flex items. The smaller the value, the higher the rank. By default, each Flex item is 0, which means that the HTML code defines the order of the elastic item elements. The value can be positive or negative

Although the custom setting of order can override the rendering order of HTML elements in the source code, the actual writing should be done in a logical order because keyboard Tab switching and screen readers are not affected by the order attribute

(2)flex grow

The flex-grow property defines the size of the Flex item, which defaults to 0, or does not expand if there is free space. It cannot be negative.

By default, the actual width of each Flex Item is determined by the width property (or by its own contents if not set); If flex-grow is not set to 0, the effect of this property overrides the effect of width

For example: If all Flex items have a flex-grow attribute of 1, they divide the remaining space equally (if any). If one project has a flex-grow attribute of 2 and all the other projects are 1, the former takes up twice as much free space as the other items.If the flex grow of each Flex item is x, the width of each flex item occupies the width of the containerX/The sum of x for all Flex items. (3)flex-shrink

The Flex-shrink attribute defines the scale by which a project shrinks. The default is 1, that is, if there is insufficient space, the project shrinks. Cannot be negative

If all projects have a Flex-shrink attribute of 1, they are scaled equally when space is insufficient. If the flex-shrink attribute is 0 for one project and 1 for all other projects, the former does not shrink when space is insufficient.

(4)flex-basis

The Flex-basis property defines the main size of the flex item before the extra space is allocated. Based on this property, the browser calculates whether the main axis has extra space. The default value is Auto, which is the original size of the Flex item.

To some extent, you can think of this property as the initial width of the Flex item or as the width property. In the same way as width, even if flex-basis is set, the actual final width of the Flex item is affected by flex-grow and flex-shrink (when both width and flex-basis exist, flex-basis takes precedence).

(5)flex

The flex attribute is a short term for flex-grow, flex-shrink, and flex-basis, and the default values are 0, 1 auto, in that order. The last two attributes are optional.

It is recommended to use this attribute in preference to writing three separate attributes, as the browser will infer related values.

(6)align-self

The align-self property allows a single Flex item to have a different vertical alignment than other Flex items, overriding 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, the value is the same as stretch.

Rules for shrinking A Flex Item:

In cases where the total flex item width exceeds the width of a container row and no line wrap is set (flex-wrap: nowRAP), by default each Flex Item shrinks proportionally according to its own Flex-basis coefficient and flex-shrink value. Instead of saying, “Each Flex item is evenly distributed according to the total width exceeding it, shrinking by the same amount,” remember that the calculation rules for shrinking according to flex-grow are different from those for shrinking according to flex-grow

Extension technique

If you specify a Margin of Auto on a side of a Flex item and there is room on that side of the Flex Container, the margin will expand to take up the available space

To take advantage of this feature, the following scenarios can be applied:

(1) Implement a layout with one Flex item on one side and the other Flex Tiem on the other

<div class="flex-container">
   <div></div>
    <div></div>
    <div></div>
</div>
Copy the code
    .flex-container{
        display: flex;
        width: 500px;
        height: 300px;
        background-color: green;
    }
    .flex-container>div{
        width: 100px;
        height: 100px;
        background-color: red;
        border:1px solid #cccccc
    }
    .flex-container>div:first-child{
    /* Place the first Flex item on the left and the margin takes up the remaining space */
        margin-right: auto;
    }
Copy the code

(2) Another style of “vertical horizontal center” 

   .flex-container{
        display: flex;
        width: 500px;
        height: 300px;
        background-color: green;
    }
    .flex-container>div{
        width: 100px;
        height: 100px;
        background-color: red;
        border:1px solid #cccccc;
        margin:auto;
    }
Copy the code

Note: This vertical horizontal center differs from strict horizontal vertical center in that the distance between each Flex item and the distance relative to the left and right boundaries is evenly distributed based on the remaining space. In general, the distance between each Flex item is twice the distance between the Two Flex TEM and the corresponding boundary

4. Other details

  • Even though a Flex item is specified to shrink, it has an “implicit minimum width”; in other words, it does not shrink indefinitely. You can override this minimum width by setting the min-width property. Similarly, we can control the maximum size of the Flex item by setting the max-width.
  • A Flex item can also use the z-index attribute without setting a non-static location value, which overrides the stack order and creates a new stack context