This is the first day of my participation in the More text Challenge. For details, see more text Challenge

preface

The Flex layout was introduced by the W3C in 2009. It can be simple, complete, responsive to the implementation of a variety of page layouts. Flex support is as follows (don’t worry about compatibility! What? Are you still using the lower version of IE? This way, I suggest that you open your boss and change your boss.

Although Flex layout support is so good, there are still many students who don’t know how to use it. Some people are used to using float, display, position to layout, so you don’t know anything when you ask more questions. One of my interviewers teased me that he hired a front end and found that all his layouts were written in position (high, really high!). .

However, I have forgotten how to use many of Flex’s properties myself, and even misspell words when typing them by hand. If you’re like me, let’s relearn Flex in this article

Containers and items

1. Any box can be specified as a Flex layout. You can use the Flex layout for the elements inside the box.

We call the box that specifies the Flex layout a container, and the elements inside the container are called projects.

3. Both containers and items have six properties.

Specifying the Flex layout

display: flex | inline-flex; 
Copy the code

Depending on your layout, you can specify whether the Flex container box is a block-level element or an inline block element.

Note: When the Flex layout is set, float, clear, and vertical-align properties of child elements are disabled

Let’s take a closer look at the container and project properties

Container attribute

In the following example, if not specified, the item elements are 100px wide and the container is 800px wide and high.

There are six container properties:

1, flex-direction arrangement rule

It is used to control the direction and order of item arrangement, that is, to specify the direction of spindle and cross axis.

flex-direction: the row (the default) | row - reverse | column | column - reverse;Copy the code

Row: Horizontal arrangement, items are arranged in positive order.

Row-reverse: Items are arranged horizontally but in reverse order.

Column: As opposed to row, it is arranged vertically with items in positive order.

Column-reverse: Items are arranged vertically and in reverse order.

2, flex-wrap rules

Used to control project newline rules.

flex-wrap: nowrap (default) | wrap | wrap - reverse;Copy the code

Nowrap: No line breaks. If the width is insufficient, the project element width will be equitably reduced, and the weight will be higher than the project element width. For example, when the project elements are all 200px wide, the actual width is 133.34px. Below)

Item elements are arranged according to their width, or wrapped if they exceed the width of the parent container (for example, if the item elements are all 200px wide). Below).

Wrap-reverse: The effect is the reverse of wrap. The first row is wrapped close to the bottom of the container and lines are wrapped from bottom to top.

3, Flex-flow arrangement and line feed

The Flex-Flow property is a short collection of flex-Deriction and Flex-wrap properties.

Default: Row nowrap (horizontal, no line feeds)

4, center-content Specifies the alignment rules for the spindle

Controls the alignment of items on the spindle.

justify-content:flex| - start (the default)flex-end | center | space-between | space-around | space-evenly;
Copy the code

**flex-start: ** Left-align.

**center: **center.

Flex-end: Right alignment.

**space-between: ** Align the project elements along the main axis, align the left and right sides, the project elements are equally spaced, the left and right side of the project elements close to the container.

**space-around: ** Arrange the items along the main axis, with the space between the items on the left and right sides twice the space from the container.

Space-evenly: Arranged along the spindle, items are evenly spaced between items and containers.

5, align-items cross axis arrangement rules

Control items are arranged on the cross axis.

align-items| : stretch (the default)flex-start | flex-end | center | baseline;
Copy the code

** Stretch: ** Fill the container if the project element has no height set, or if the height is auto (e.g. change the project element height to AUTO).

**flex-start: ** Project elements cling to the top of the container.

** Flex-end: ** Contrary to flex-start, the project element is attached to the top of the container.

Center: The center position of the cross axis. (for example, change the second item element height to 200px)

Baseline: An array based on the baseline of the text in the item element. (for example, change the height of the second project element to 200px and the line-height to 200px)

6, align-content The alignment rule for multi-line items

Controls the alignment of multi-line items, not if the item has only one line. So flex-wrap: wrap; Or flex – wrap: wrap – reverse;

align-content| : stretch (the default)flex-start | flex-end | center | space-between | space-around | space-evenly;
Copy the code

Stretch: Allows project elements to stretch the entire container when the project height is not set, or when the height is auto. (for example, when the project element height is set to AUTO).

Flex-start: Aligns from the start of the cross axis.

Center: Aligns from the middle of the cross axis.

Flex-end: Aligns from the end of the cross axis.

Pace – between: with the justify – content: pace – between; Line up along the cross axis, both ends are aligned, the project elements are equally spaced, and the left and right project elements are close to the container along the cross axis. (for example, change the project element width to 200px)

Space – around: with the justify – content: space – around; Arranged along the cross axis, the space between items is twice the space between items on the left and right sides and the container. (for example, change the project element width to 200px)

Space – evenly: with the justify – content: space – evenly; Arranged along the intersecting axis, the spacing between items is equal to the spacing between items and containers. (for example, change the project element width to 200px)

The project properties

1, order The order in which item elements are arranged

Determine the order in which item elements are arranged.

order: 0(default);Copy the code

The smaller the value, the higher the ranking of items. (for example, set order to -1 for project element 12)

2. Does the Flex-Grow project element occupy the remaining space

Whether the project elements occupy the remaining space.

flex-grow: 0(default);Copy the code

Default not full; Note that even if you set a fixed width, it is full.

If the three project elements are set to 0,1,2, then the first project element takes up twice as much space as the second by its width and the second by its width.

(For example, set the project element width to 200px)

3, Flex-shrink indicates whether the project element shrinks the fit space

Whether the project element shrinks when the container runs out of space.

flex-shrink: 1(the default, geometric narrow) |0(not shrinking);Copy the code

By default, project elements are scaled down together when space is insufficient. Note that even if you set a fixed width, it shrinks. (For example, flex-shrink is set to 0 for project element 1)

4, Flex -basis sets the project width

Set the project element width, default auto.

flex-basis: auto(default);Copy the code

By default auto, the project will keep the default width or use width as its own width, but if you set flex-basis: 200px, then the weight will be higher than the width property and overrides the widTN property. If you set the flex-basis of project element 1 to 300px and width to 100px, the actual effect is 300px.

5, shorthand for Flex properties

Shorthand for flex-grow, Flex-shrink, and Flex-basis. The last two attributes are optional.

flex: 0 1 auto(default);Copy the code

Used to define project element zoom in, zoom out and width.

This property has two shortcut keys, which are auto(1, 1 auto) and none(0, 0 auto).

6, align-self different alignment for other items

The align-self attribute allows a single item element to have a different alignment than other item elements, overriding the container’s align-items attribute. The default value is Auto, which means that the align-items property of the parent element is inherited, and is equivalent to stretch if there is no parent element.

align-self: auto(the default) | flex - start | flex - end | center | baseline | stretch;Copy the code

Auto: inherits the align-items property from the parent container.

Flex-start: Align-items: flex-start;

Flex-end: align-items: flex-end;

Center: The current element alignment is align-items: center;

Baseline: Current element alignment is as follows: align-items: baseline;

Stretch: Default if there is no parent element.

Afterword.

I had to really do it again to understand the Flex layout, which wasn’t that hard, but after I did it again, it turned out to be pretty easy. And also have a new understanding of the properties, after all, look at the old to know new, refueling together!