• Column address: CSS features and applications
  • Author: Front-end Xiao Dong

First, flex elasticity concept:

Elastic boxes are a one-dimensional layout method for laying out elements in rows or columns. Elements can expand to fill extra space, shrink to fit smaller Spaces, and work on any element, if an element uses flex elastic layout (hereinafter referred to as: Flex layout), which forms an INTERNAL BFC, is supported by all browsers, which means it is now safe and secure to use the technology.

Two, spindle and cross shaft:

Learning flex layout requires understanding the concepts of “axes” and “cross axes”. The elements of a Flex layout are called “Flex containers”, and all of their children are flex items of the container. The container has two axes by default: Horizontal main axis and 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.

Properties of the container

The container and the project each have six attributes, as shown in the figure below

3.1 the flex – direction

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

flex-direction: row | row-reverse | column | column-reverse;
Copy the code
  • row(Default) : The main axis is horizontal and the starting point is on the left.
  • row-reverse: The main axis is horizontal and the starting point is at the right end.
  • column: The main axis is vertical, and the starting point is on the upper edge.
  • column-reverse: The main axis is vertical and the starting point is down.

3.2 FLX – wrap

By default, items are placed on a single line and are not actively wrapped regardless of the given width:

.main {
    width: 500px;
    height: 300px;
    background: skyblue;
    display: flex;
}

.main div {
    width: 100px;
    height: 100px;
    background: pink;
    font-size: 20px;
}
Copy the code

If line breaks are required, you need to set flex-wrap

  flex-wrap: nowrap | wrap | wrap-reverse;
Copy the code
  • nowrap(Default) : no line breaks.
  • wrap: newline, first line above.
  • wrap-reverse: newline, first line below.

3.3 the flex – flow

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

flex-flow: <flex-direction>|| <flex-wrap>;
Copy the code
3.4 the justify – content

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

justify-content: flex-start | flex-end | center | space-around | space-between | space-between;
Copy the code
  • flex-start(Default) : Left-justified
  • flex-end: the right alignment,
  • centerCenter:
  • space-around: Equal spacing on both sides of each item.
  • space-between: Align both ends with equal spacing between items.
  • space-evenly: The interval for each item is equal to the interval between the item and the container.

3.5 the align – items

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

align-items: flex-start | flex-end | center | baseline | stretch;
Copy the code
  • flex-start: Aligns the starting point of the cross axis.
  • flex-end: Aligns the ends of the intersecting axes.
  • center: Midpoint alignment of cross axes.
  • baseline: Baseline alignment of the first line of the project.
  • stretch(Default) : If the item is not set to height or is set to Auto, it will fill the entire container height.

3.6 the align – content

The align-content property defines the alignment of multiple axes, unless flex-wrap: wrap is set

align-content: flex-start | flex-end | center | space-between | space-around | stretch;
Copy the code
  • flex-start: aligns with the starting point of the crossing axis.
  • flex-endAlign with the endpoint of the intersecting axis.
  • centerAlign with the midpoint of the intersecting axis.
  • space-between: Aligned with both ends of the cross axes, the spacing between axes is evenly distributed.
  • space-aroundThe spacing on both sides of each axis is equal.
  • stretch(Default) : Axis takes up the entire cross axis.

4. Project attributes

4.1 the order

The order attribute defines the order of items. The smaller the value, the higher the rank. The default value is 0, and the value can be negative.

order: <integer>;
Copy the code

4.2 the flex – turns up

Flex-grow How much remaining space in the Flex container should be allocated to the project, also known as the expansion rule. The final project has a width of its own + the allocated size of the remaining space in the container. Flex-grow has a maximum of 1 and expands by 1 after 1

flex-grow: <number>;
/* default 0 */
Copy the code

4.3 the flex – the shrink

The Flex-shrink attribute specifies the shrink rule for flex elements. Flex elements shrink only when the sum of the default widths is greater than the container, which is based on the Flex-shrink value. The default value is 1

flex-shrink: <number>;
/* default 1 */
Copy the code

By default, the first div is 200 width and the second 300 width, and the two should add up to more than 400 of the parent element, but since flex-shrink is set to 1 for both divs, it shrinks both divs into the parent element

.item { width: 400px; height: 300px; background: skyblue; display: flex; padding: 5px; }.item div { height: 100px; font-size: 20px; }.item div:nth-child(1) { flex-shrink: 1; width: 200px; background: pink; }.item div:nth-child(2) { flex-shrink: 1; width: 300px; background: cadetblue; }Copy the code

If the first div is set to flex-shrink: 0; If the container does not shrink, it is displayed according to the actual width of the container

How do you calculate the width of the subterm after shrinking? In fact, there is a public sign:

  1. (200 + 300)The sum of the widths of all the subterms minus(400).Width of container =(100).
  2. Width ratio of the first subterm:2/5, the proportion of the width of the second subitem:3/5
  3. Then the width of the first subitem is:200 – 2/5 * 100= 160, the width of the second subitem is:300 – 3/5 * 100 = 240
4.4 the flex – basis

Flex-basis specifies the initial size of the child along the main axis of the container, with priority over its own width

flex-basis: 0 | 100% | auto | <length>
Copy the code

The width is 200, but because flex-basis is set to 300px; , so the final width of the child is greater than the width set by itself

.item { width: 400px; height: 300px; background: skyblue; display: flex; padding: 5px; }.item div { height: 100px; font-size: 20px; }.item div { width: 200px; flex-basis: 300px; background: pink; }Copy the code

4.5 the flex

The flex attribute is short for flex-grow, flex-shrink, and flex-basis. The default value is 0 1 Auto. The last two attributes are optional.

flex: none | [ <'flex-grow'><'flex-shrink'>? || <'flex-basis'>]
Copy the code
4.6 the align – self

The align-self property allows a single item to have a different alignment than other 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, it equals stretch.

align-self: auto | flex-start | flex-end | center | baseline | stretch;
Copy the code
.item { width: 400px; height: 300px; background: skyblue; display: flex; padding: 5px; }.item div { height: 100px; font-size: 20px; }.item div { width: 200px; flex-basis: 300px; }.item div:nth-child(1) { background: pink; align-self: flex-start; } .item div:nth-child(2) { background: violet; align-self: center; } .item div:nth-child(3) { background: greenyellow; align-self: flex-end; }Copy the code

5, about the Flex layout in the IE browser pit

Although The Flex layout is already supported by Internet Explorer, some of the properties do not work in Internet Explorer, or do not work the same way in other browsers. In Flexbugs, you can see detailed descriptions of how the Flex layout behaves badly in Internet Explorer

Here is a summary of a few solutions, please see the link

  • Flex-direction: column does not take effect
  • Min-height and Flex: 1 are not supported
  • Align-items: center Text overflow

Six, layout cases

6.1 Contour layout

The contents of each column are different, but the height of the container is constant

.item { width: 400px; height: 300px; background: skyblue; display: flex; justify-content: space-between; padding: 5px; }.item div { width: 100px; font-size: 20px; background: pink; }.item div p { text-align: center; }Copy the code

6.2 The width of the left side is fixed, and the layout of the right side is adaptive

A common TOB system layout has a menu tree on the left and content on the right

html, body { margin: 0; padding: 0; }.container { display: flex; width: 100%; height: 100vh; background: skyblue; }.left-tree { width: 200px; height: 100%; background: pink; }.main { flex: 1 1 auto; }Copy the code

6.3 Sticky footers

No matter how much content there is in the middle, the footer is always displayed at the bottom

html, body { margin: 0; padding: 0; }.container { display: flex; flex-direction: column; width: 100%; height: 100vh; }.header { width: 100%; height: 60px; background: pink; }.main { flex: 1 1 auto; background: skyblue; }.footer { width: 100%; height: 60px; background: pink; }Copy the code

Seven,

Flex layout is one of the most popular layout methods at present. It has the advantages of good browser compatibility, low learning cost, easy to get started, and you can quickly achieve the layout effect through Flex layout. The disadvantage is that flex layouts are one-dimensional compared to grid layouts and are generally used for single-row or single-column layouts. Gird is recommended for multi-row, multi-column layouts.

Understanding the concept of axes is crucial to learning flex layouts, which will help you write layouts with less effort! This article introduces the concept of axis, container and project as a whole, combined with a few specific layout examples to explain flex layout, hope to help readers, thank you!

Eight, reference

  • MDN
  • Ruan Yifeng: Flex layout tutorial
  • Learn flex layout in one article
  • caniuse.com
  • IE 11 Flex layout compatibility problem —- Min-height and Flex :1 are not supported
  • About the Flex layout pit on IE
  • Flexbugs
  • CSS: Flex layout browser compatible with IE8, IE9
  • W3C