preface

The traditional page layout, based on the box model margin + border + padding + content, relies on display + position + float. It is very inconvenient for special layouts, such as vertical center, which is not easy to implement.

Flex layout, you only need to learn a few CSS properties, you can write simple elegant complex page layout. Flex layouts now allow for simple, complete, and responsive page layouts. It is already supported by all browsers.

What is flex layout?

Flex stands for Flexible Box.

There are two axes in the Flex container by default, the main axis and the vertical cross axis.

The starting position of the spindle (where it intersects with the border) is called main start and the ending position is called main end; The starting position of the intersecting axis is called cross start and the ending position is called cross end.

The neutrons in the container automatically become members of the container and are called flex items, or “items”. Each project occupies the space of main axis (main size) and the space of cross axis (cross size).

Flex container

First, implementing a Flex layout requires specifying a container. Any container can be specified as a Flex layout so that elements within the container can be laid out using Flex.

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

Note that with Flex layout, the float, clear, and vertical-align attributes of the child elements are invalidated.

Container properties

  • The flex-direction attribute determines the direction of the main axis (that is, the alignment of items).

  • The flex-wrap property determines how to wrap a line if an axis does not fit.

  • The flex-flow property is a short form of the Flex-direction and flex-wrap properties

  • The context-content attribute defines the alignment of items on the main axis.

  • The align-items property defines how items are aligned on the cross axis.

  • The align-content property defines the alignment of multiple axes.

1. The flex – direction attribute

Values: the row (the default) | row – reverse | column | column – reverse

Used to control the direction and sequence of items.

The default row is horizontal, with the main axis horizontal and the starting point on the left. The items are arranged in positive order 1-2-3-4-5

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

Row-reverse is also horizontal, with the main axis in the horizontal direction and the starting point at the right end. But the items are in reverse order 5-4-3-2-1.

.box {
  display: flex;
  flex-direction: row-reverse;
}
Copy the code

Column, in contrast to row, is vertically arranged, with the main axis in the vertical direction and the starting point in the upper edge. The items are in positive order 1-2-3-4-5.

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

Column-reverse is also arranged vertically, with the main axis in the vertical direction and the starting point in the bottom. The items are in reverse order 5-4-3-2-1.

.box {
  display: flex;
  flex-direction: column-reverse;
}
Copy the code

2. Flex-wrap property

Values: nowrap (default) | wrap | wrap – reverse

Used to control whether an item is wrapped. Nowrap indicates that no line is wrapped.

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
Copy the code

Nowrap (default) : no line breaks.

flex-wrap: nowrap
Copy the code

Wrap: The first line is at the top. That is, items are not divided equally by the container width, but rather arranged by their own width and wrapped naturally if they exceed the parent container width.

flex-wrap: wrap
Copy the code

Wrap-reverse: newline with the first line at the bottom. Note that the first row will be attached to the bottom of the container, not the top of the container as expected.

flex-wrap: wrap-reverse
Copy the code

3, flex – flow

The flex-flow property is a short term for flex-deriction and flex-wrap properties. The default property is Row Nowrap, which is stacked horizontal and non-line breaking. This property is recommended if you want to control project alignment and line breaking instead of writing both separately.

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

4. Justify -content attribute

Values: flex – start (the default) | flex – end | center | space – between | space – around | space – evenly;

The context-content property controls the alignment of items on the main axis.

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
Copy the code

The default flex-start is left-aligned.

Center to center

Flex-end is right-aligned.

The space-between ends are aligned, and the spacing between items is equal.

Space-around Each project has equal spacing on both sides. As a result, the spacing between items is twice as large as the spacing between items and the border. More special layout, daily use is not too much.

The space-instituted spacing between projects equal to the spacing between the project and the container, equalizing the project width and evenly allocating the remaining width as the left and right margin of the project.

5. Align -items property

Values: flex – start | flex – end | center | baseline | stretch (default)

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
Copy the code

Flex-start places the project against the top of the container on the vertical axis, flex-end does the opposite:

Center is arranged in the center of the vertical axis:

Baseline is special because it arranges items according to the baseline of the first line of text:

It is used to control the arrangement of items on the vertical axis. By default, “Stretch” means that if the height of the item is not set, or the height is auto, the whole container will be occupied.

Note that by default, precy-content and align-items handle the horizontal and vertical aligns of items, respectively. If we change flex-direction to column, they switch axes. Align-items handles the horizontal axis.

6.align-content

Values: flex – start | flex – end | center | space – between | space – around | space – evenly | stretch (default);

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
Copy the code

Used to control the alignment of multi-line items, if the item has only one line will not work; The default stretch allows the item to fill the entire container if the height is not set or auto, similar to align-items. Note that I did not set heights for any of the 12 items shown below.

Flex-start, center, flex-end behave the same as the align-items properties:

.box {
  width: 200px;
  height: 500px;
  border-radius: 4px;
  background: #e8e8e8;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start | center | flex-end;
}
.item {
  width: 60px;
  background: pink;
}
Copy the code

Space-around remains consistent, meaning that the space between items is twice the space between the items on the upper and lower ends and the container.

align-content: space-around;
Copy the code

Space-between means that the items on the upper and lower sides are close to the container.

align-content: space-between;
Copy the code

Similarly, the spacing between projects will equal the spacing between projects and containers.

Align-content also has other values available, such as baseline, that behave the same as the property described above, with the difference between a single line item or a multi-line item.

The project properties

Order is used to determine the order of items. The smaller the value, the higher the order of items.

Flex-grow is used to determine whether a project should be enlarged if it has free space.

Flex-shrink is used to determine whether a project should shrink when there is insufficient space.

Flex-basis is used to set the width of the project, which is retained by default when auto is used.

The FlexFlex attribute is a shorthand for flex-grow, Flex-shrink, and Flex-basis attributes.

Align-self inherits the align-items property of the parent container.

1, the order

The order attribute defines the order of items. The smaller the value is, the more advanced it is. The default value is 0.

2, flex – turns up

The Flex-Grow property defines the project’s zoom scale, which defaults to 0, or no zoom if there is free space.

Note that it will zoom in even if the width is fixed.

.item {
  flex-grow: <number>; /* default 0 */
}
Copy the code

By default, if the left and right items of the three items are 0 and the middle one is 1, the last item will fill all the remaining space.

flex-shrink

Value: The default value is 1. This parameter is used to determine whether to shrink the project when the space is insufficient. The default value is 1. Note that even if you set a fixed width, it will shrink.

However, if flex-Shrink is set to 0 for a project, it does not shrink itself even if there is insufficient space.

The second flex-shrink item in the figure above is 0, so it does not shrink itself.

flex-basis

The default value is auto, which is used to set the width of the project. If auto is used, the project will retain the default width or use width as its own width. If flex-basis is used, the weight of the width attribute will be higher and therefore the widtn attribute will be overridden.

// 以80px为准
.item {
    flex-basis: 80px;
    width: 60px;
}
Copy the code

5, flex

Value: 0 by default 1 Auto, the flex attribute is a short form of flex-grow, flex-shrink, and flex-basis, which defines the expansion, shrink, and width of a project.

This property has two shortcut keys: auto(1 1 auto) equal zoom in and out, and None (0 0 auto) no zoom in and out.

6, the align – self

Values: auto (default) | flex – start | flex – end | center | baseline | stretch, inherit the align – the items property of the parent container. If there is no parent element, stretch is default.

Used to allow individual items to have different alignments than other items, with values behaving exactly as the parent’s align-items property.

The Flex layout is now covered.

Reference nguyen other www.ruanyifeng.com/blog/2015/0…

For more exciting recommendations, please check out javascript Art ▼