Flex layout tutorial, front-end will be the basic skills, interview will be the foundation

Time:2020-9-17

preface

Flex is a common CSS3 layout, which can efficiently realize various page layouts with a small amount of code. It is a basic but necessary basic skill, which is often used in interviews.

For example, the most basic let you realize the horizontal / vertical center of the elements, or extend it to other complex problems.

Next, let’s have a brief understanding of flex, and then explain each attribute with examples to further understand the use of flex and master the function of each attribute. There are many attributes, which can be used together to achieve a variety of layouts. In order to avoid too much redundancy, we will not give too many examples.

If you haven’t mastered flex layout before, I hope you can implement each example while reading this article, and try more permutations and combinations to achieve different effects and deepen your impression. And in the future applied to the actual project, so that we can really master this skill.

If you have mastered flex layout, I hope it can help you review and deepen your memory.

Sometimes, if you don’t use it for a period of time, you may forget the function of a certain attribute. If you look back at this article, you can quickly arouse your memory.

Welcome to learn and exchange together. If there are any mistakes or omissions, please point out^_ ^。

1、 Brief introduction to flex

Flex is the full name of flexible box layout model, usually called flexbox or flex, also known as flexible box or flexible layout. A more efficient CSS3 layout scheme.

Since it is a box, we need a container first, and then the item item. The container encapsulates the project, and through the configuration of different properties, a variety of permutations and distributions can be realized.

Flex has two axes, one is the main axis and the other is the cross axisflex-diretionThe cross axis is always perpendicular to the spindle.

Containers provide space for the distribution of items. The axis controls the arrangement and alignment direction of items. Flex is a one-dimensional layout. A container can only be one line (left and right) or one column (up and down). The main axis controls the arrangement direction of items (up and down / left and right), and the cross axes coordinate to achieve different alignment methods. Sometimes a row can’t be placed, which can realize the layout of multiple lines, but for flex, a new row is a new independent flex container. In contrast, another two-dimensional CSS grid layout can handle both row and column layouts.

Flex layout tutorial, front-end will be the basic skills, interview will be the foundation

  • Flex containerFlex item (sub element, also known as project)
  • Main axis: the direction of project arrangement layout. The default is horizontal direction.
  • Main start: the starting position of item arrangement layout and the left edge line position of container.
  • Main end: the end position of item arrangement layout and the right edge line position of container.
  • main size: the size of the item along the main axis.
  • Cross axis: perpendicular to the spindle, related to the alignment of the project, the default is vertical.
  • Cross start: the top edge line of the container.
  • Cross end: the bottom edge line of the container.
  • cross size: the size of the item along the cross axis.

2、 Two axes of flex

When using flex layout, the first thing you think of is two axes – the main axis and the cross axis. The main shaft is composed offlex-directionThe cross axis is perpendicular to the main axis.

It is very important to understand the concept of main axis and cross axis for aligning the items in flex. The feature of flexbox is to align the items along the main axis or cross axis. Next, all the attributes of flex are related to these two axes, so we must understand it.

Flex layout tutorial, front-end will be the basic skills, interview will be the foundation

In the direction of the main axis, the container edge line at the starting position of the arrow is the starting position of the corresponding axis, and the container edge line at the key position corresponds to the end position of the axis.

The cross axis is perpendicular to the principal axis, and the principal axis isrow/row-reverse-In the horizontal direction, the starting position of the cross axis is the top edge, and the end position is the bottom edge line. The spindle iscolumn/column-reverse-In the vertical direction, the starting position of the cross axis is the left edge line of the container, and the end position is the right edge line.

3、 Flex container

Flex must have a container container and multiple child elements item.

When an element’sdisplayProperty toflexperhapsinline-flexAfter that, it becomes a container.

flexAndinline-flexThe relationship is similarblockAndinline-blockDefines whether the container is an in line element or a block level element.

After the element becomes a container, it will have some default behaviors. If you can’t understand it now, I will have an impression first

  1. Project’sblockfloatclearandvertical-alignProperties are invalid. Because the alignment of items has become controlled by the flex property. The flex attribute has default values, which are described in detail later.
  2. Items are arranged in a row from left to right (spindle direction)(flex-directionThe initial value of the property isrow)。
  3. Items are in the major latitude (principal axis) direction and will not stretch, but if the items add up beyond the scope of the container, they will be automatically reduced by default and a new line will not be started.
  4. If the height of the item is not set in the cross axis direction, it will be stretched to fill the container. If the container is not set with height, the height of the highest item is the height of the container.

Here is a simple example:

<div class="container">
  < div class = "item" > element 1 < / div >
  < div class = "item" > element 2 < / div >
  < div class = "item" > element 3 < / div >
</div>
<style>
  .container {
    display: flex;
    Width: 300px; // set container width to 300px; do not set height.
  }
  .item {
    Width: 150px; // the width of each item is 150px, which is greater than 300px
    Line height: 100px; // set the default opening height of the project to 100px
  }
  .container :nth-child(1) {
    background-color: #E3ABB3;
    Height: 100px; // the first item is given a fixed height of 100px;
  }
  .container :nth-child(2) {
    background-color: #9DC54B;
  }
  .container :nth-child(3) {
    background-color: #1FBEE7;
    height: 300px;
  }
</style>

Flex layout tutorial, front-end will be the basic skills, interview will be the foundation

The above example shows some changes to the container set to flex.

  1. Before setting, the in container items are block level elements. After setting, the behavior becomes in line elements.
  2. Before setting, the width of the item is 150px. After setting, it will be reduced to 100px automatically, because the container width is set to 300px.
  3. Before setting, the container height is set to 500px, and after setting, it becomes 300px, which is consistent with the highest project three height in the project.
  4. Before setting, “element 1” is 100px. After setting, the height remains unchanged, because the height of the project itself is set,
  5. Before setting, “element 2” is 100px. After setting, the height is stretched to 300px, which is equal to the height of the container, because “element 2” itself does not set the height.

Based on these default behaviors, some students may have questions.

What if you don’t want to go from left to right and want to go from right to left? (common requirements)

What if you don’t want the item to shrink automatically and want to wrap? (common requirements)

What if you don’t want the top aligned and want to center vertically?

With these questions in mind, let’s see how flex is implemented.

4、 Properties of flex

Flex related properties mainly include the following:

Properties for container container:
  1. <font color=”red”>flex-direction< / font > – used to specify the direction of the spindle, with 4 common optionsrowrow-reversecolunmcolunm-reverserowYes (andinlineBehavior is consistent, from left to right →),colunmIs column (andblockConsistent behavior, from top to bottom)。 closereverseThe original means reverserowIt’s aboutrow-reverseRight and leftcolumnIt’s up and down, thencolumnIt’s up and down
  2. <font color=”red”>flex-wrap< / font > – used to specify whether to wrap lines when there are too many items more than one line. defaultflex-wrap: nowrap;No line breaks.
  3. <font color=”red”>flex-flow< / font > – yesflex-directionandflex-wrapThe combined abbreviation of.flex-flow: <flex-direction> <flex-wrap>;
  4. <font color=”red”>justify-content< / font > – used to control the alignment of items on the spindle. The default isjustfy-content: flex-start;The starting line of the spindle is aligned.
  5. <font color=”red”>align-items< / font > – used to control the alignment of items on the cross axis. The default isalign-items:stretch;, if the project does not have a height set, the extrusion fills to the same height as the container, and if the height is set, the top is aligned.
  6. <font color=”red”>align-content< / font > – used to control the alignment of multiple axes (multiple lines) on the intersecting axis.
Properties for item item:
  1. <font color=”red”>flex-grow< / font > – used to control the proportion of the project stretching and enlarging in the main axis direction in the remaining space (if any). The default isflex-grow: 0, no stretching.
  2. <font color=”red”>flex-shrink< / font > – used to control the extent to which the item shrinks in the spindle direction. The default isflex-shrink: 1In the same proportion. The larger the value, the more shrinkage.
  3. <font color=”red”>flex-basis< / font > – used to initialize the size of the item occupying the spindle space, the default isflex-basis: auto;, automatically detect the size. If the item is set, the value of the item setting will be taken; otherwise, the size will be calculated according to the item content.
  4. <font color=”red”>flex< / font > – short for the above three combinationsflex: <flex-grow> <flex-shrink> <flex-basis>;
  5. <font color=”red”>align-self< / font > – controls the alignment of the project itself on the cross axis. Priority overalign-items。 The default isalign-self: auto;It means to usealign-itemsSet the value of. thanalign-itemsadvantageautoOptions, other options andalign-itemsagreement.
  6. <font color=”red”>order< / font > – used to control the arrangement order of items on the spindle. The default value is 0, and all items are arranged in order of spindle direction. After setting, it is arranged from small to large according to the numerical value.

The following is a description of each property

Take the following code as an example:

<div class="container">
  < div class = "item" > element 1 < / div >
  < div class = "item" > element 2 < / div >
  < div class = "item" > element 3 < / div >
  <div class="item">...</div>
</div>
<style>
  .container {
    display: flex;
    border: 1px dashed #666666;
    text-align: center;
    Width: 400px; // set container width to 400px; do not set height.
  }
  .item {
    Width: 100px; // the width of each item is 150px, which is greater than 300px
    Line height: 100px; // set the default opening height of the project to 100px
  }
  .container :nth-child(1) {
    background-color: #E3ABB3;
  }
  .container :nth-child(2) {
    background-color: #9DC54B;
  }
  .container :nth-child(3) {
    background-color: #1FBEE7;
  }
</style>

Flex container attribute: Flex direction

flex-directionWe mentioned this when we introduced the axis. Direction means direction, so this property is mainly used to change the direction of the axis. That is, the arrangement direction of the project.

flex-directionThere are four common option values.

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

Default value:flex-direction: row;

rowAndrow-reverseIt’s horizontal,cloumnAndcloumn-reverseIt’s vertical. Reverse means reverse, so the direction with reverse is always opposite to that without.

Note: in the following example, the item does not exceed the container. The white grid assumes that the container has “remaining space”. Here, the remaining space is for the convenience of understanding. In fact, this space is calledpositive free spaceIf the item exceeds the container space, the overflow is callednegative free space

Flex layout tutorial, front-end will be the basic skills, interview will be the foundation

  • row: the default value, the spindle direction is horizontal, fromLeft to rightArrange, starting from the containerLeftside line;
  • row-reverse: the spindle direction is horizontal, fromRight to leftArrange, starting from the containerrightside line;
  • column: vertical direction, fromtop to bottomIn fact, the position is the containerupperside line;
  • column-reverse: vertical direction, fromDown to upArrange, start with container islowerside line;

Flex container properties: Flex wrap

flex-wrapThere are three common option values that specify whether to wrap lines when there are too many items more than one line.

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

Default value:flex-wrap: nowrap;No line breaks.

Set the value towrapIf a line cannot hold all items, it will automatically display a new container in a new line. Ifflex-directionProperty isrow, create a new row, ifcolumnCreate a new column.

Set the value towrap-reverseAnd it will also wrap. With reverse, the direction of the new line will be opposite to the original.

Next, add a few more items in the above example to test itflex-wrapThe effect of example withflex-deriction: row;Horizontal direction test, can test the behavior of other directions, deepen the understanding.

Flex layout tutorial, front-end will be the basic skills, interview will be the foundation

  • nowrap: by default, the item does not wrap, the total width of the item exceeds the container, and the width is automatically reduced.
  • wrap: item line breaks, new line below item in first line.
  • wrap-reverse: the item is wrapped in a new line above the item in the first line.

Here you can try to set the height of the container above the height of the projectwrapandwrap-serverHow is the alignment in the direction of the cross axis

You can try itflex-directionSet tocolumnSee what the difference is

Flex container properties: Flex flow

yesflex-directionandflex-wrapThe combined abbreviation of.

.container {
  flex-flow: <flex-direction> <flex-wrap>;
}

The default isflex-flow: row nowrap;

for example

flex-flow: column wrap;
//Equivalent to
flex-direction: column;
flex-wrap: wrap;

Attribute of flex container: justify content

“Justify” translates to “make each line in line and make it line up”; content translates to “content”. Together, it means to align the contents of the lines. So,justify-contentIs used to control the alignment of items on the spindle.

There are six common options.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

Default value:justify-content: flex-start;

Flex layout tutorial, front-end will be the basic skills, interview will be the foundation

  • flex-start: by default, the items are aligned in the spindle direction with the starting position of the spindle. In the legend, the direction of the main axis is from left to right, and the starting position is the left line of the container. You can see that the items are aligned on the left.
  • flex-end: the item is aligned in the direction of the spindle and at the end of the spindle. The end position in the legend is the right line of the container, so it is right aligned.
  • center: the item is centered in the spindle direction.
  • space-between: the project is aligned at both ends in the direction of the main axis, and then the interval between the items is equal.
  • space-around: in the main axis direction, the remaining space is evenly distributed on both sides of each project.
  • space-evenly: on the spindle, the remaining space is evenly distributed, andspace-betweenThe difference is that between is between projects, and even is on the far left and right of the axis, and there will also be space allocation.

The following is my personal understanding. In order to deepen the impression of these parameters, you can refer to them or understand them in your own way.

Space means “space” and “between” means “between”. So, you can see thatspace-betweenThe remaining space is evenly distributed between projects.

Around means “around”. The left and right sides of each project are allocated equal spaces, and the spaces between projects are independent and not merged. In the legend, on the left side of “element 1”, there is only space around it, while on the right side there are spaces for “element 2” and “element 3”, so the space on the right side is twice as large as that on the left side. By analogy, the spacing between items in the middle is “twice”, until the space on the right of the last item is “double”.

Even only means “average, even”, so the remaining space is evenly distributed.

Suppose there are n projects,space-betweenThere is no space allocated at both ends, and only the interval between projects is allocated. The space is evenly distributed n-1, which is distributed between projects.space-evenlyThere are also two ends, and the space is evenly distributed n + 1.space-aroundIt is on both sides, with an average distribution of 2n shares.

Attribute of flex container: align items

align-itemsControls the alignment of items on the cross axis.

There are five common options.

.container {
  align-items: stretch | flex-start | flex-end | center | baseline;
}

Default value:align-items: stretch;

Flex layout tutorial, front-end will be the basic skills, interview will be the foundation

  • stretch: by default, if the project is not set to a fixed height, it will be stretched to fill the remaining space in the cross axis direction.
  • flex-start: items are aligned at the starting line along the intersection axis.
  • flex-end: items are aligned along the intersection axis end line location.
  • center: the item is centered in the direction of the cross axis.
  • baseline: the item is aligned along the baseline of the first line of text in the project in the direction of the intersection axis.

Stretch means “stretch”, so the project will be stretched. Here, if the project is set to a fixed height, it is aligned along the starting position of the cross axis.

Start, end, and center respectively mean “start”, “end” and “middle”, so the items are the starting position, terminal position and center alignment.

Baseline means “baseline, baseline”. Here is the meaning of alignment along the baseline of text.

Attribute of flex container: align content

align-contentControls the alignment of multiline items (multiple primary axes). similar justify-contentIt’s just that,align-contentIt controls the allocation of space between rows,justify-contentIt controls the allocation of space between projects.

There are seven common options.

.container {
  align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly;
}

Default value:align-content: stretch;

<div class="container">
  < div class = "item" > element 1 < / div >
  < div class = "item" > element 2 < / div >
  < div class = "item" > element 3 < / div >
  < div class = "item" > element 4 < / div >
  < div class = "item" > element 5 < / div >
  < div class = "item" > element 6 < / div >
  < div class = "item" > element 7 < / div >
  < div class = "item" > element 8 < / div >
  < div class = "item" > element 9 < / div >
</div>
<style>
  .container {
    border: 1px dashed #666666;
    margin: 100px auto;
    display: flex;
    width: 150px;
    height: 250px;
    text-align: center;
    flex-direction: row;
    flex-wrap: wrap;
    /* flex-flow: column wrap; */
    /* justify-content: flex-start; */
    /* align-items: stretch; */
    align-content: stretch;
  }
  .item {
      Width: 50px; // Project width is 50px
  }
  .container :nth-child(1) { background-color: #E3ABB3; height: 50px; }
  .container :nth-child(2) { background-color: #9DC54B; }
  .container :nth-child(3) { background-color: #1FBEE7; }
  .container :nth-child(4) { background-color: #218BCC; height: 50px; }
  .container :nth-child(5) { background-color: #6695D3; }
  .container :nth-child(6) { background-color: #CFD841; }
  .container :nth-child(7) { background-color: #F1B605; }
  .container :nth-child(8) { background-color: #E3ABB3; }
  .container :nth-child(9) { background-color: #9DC54B; height: 50px; }
</style>

Flex layout tutorial, front-end will be the basic skills, interview will be the foundation

In the legend above, “elements 1, 5, and 9” set a fixed height. The height of other items is automatically recognized. becausealign-itemsOther items are extruded and filled to the same height as the row.

  • stretch: by default, the remaining space in the cross axis direction is evenly allocated to each row, and the height of the row will stretch to fill the space of the whole row. In the legend, becausealign-itemsBy default, the height of the first row is originally the height of the highest “element one”. And then becausealign-contentThe effect of stretching the height of the row. Among them, “element 1” is set with a fixed height, so it is not stretched, while “element 2 and 3” is not set with height, so it is stretched and filled to the same height as the row.
  • flex-start: all rows are aligned in the direction of the cross axis to the starting position of the cross axis.
  • flex-end: all rows are aligned in the direction of the cross axis to the end of the cross axis.
  • center: all rows are centered on the cross axis.
  • space-between: the rows are aligned at both ends in the direction of the cross axis, and then the spaces in the middle of the rows are equal.
  • space-around: in the direction of the cross axis, the remaining space is evenly distributed on both sides of each row.
  • space-evenly: in the direction of cross axis, the remaining space is evenly distributed, andspace-betweenThe difference is that between is between rows, and even is on the far left and far right of the axis, and there will also be space allocation.

Property of flex project: flow growth

flex-growUsed to control the proportion of the remaining space (if any) that the project stretches and enlarges in the spindle direction.

Grow means “expand, grow”, so it means to enlarge the project.

.item {
  flex-grow: <number>;
}

Default value:0, do not zoom in.

Flex layout tutorial, front-end will be the basic skills, interview will be the foundation

In the example, the container width is set to 300px and the project width is set to 50px. The total width of the project is 150px, and the remaining space is 150px

When flex grow is set to 1, the project is stretched to 100px, and the remaining space is allocated according to 1:1:1, and each project accounts for 1 / 3.

When flex grow is set to 33, 66 and 66, the items are stretched to 87.5px, 125px and 87.5px respectively. The remaining space is allocated according to 1:2:1, and the items account for 1 / 4, 1 / 2 and 1 / 4 of the remaining space respectively.

It can be seen that the magnification is independent of the size of the value, but related to the scale of the value.

Property of flex project: flow shrink

flex-shrinkIt is used to control the extent to which the item shrinks in the direction of the spindle. The larger the value, the more shrinkage. But it’s notflex-growDifferent, not in proportion to shrink, the specific shrinkage algorithm principle can refer to the control of flex sub elements on the spindle proportion.

Shrink means “shrink”, so it means to shrink the project.

.item {
  flex-shrink: <number>;
}

The default isflex-shrink: 1In the same proportion.

Flex layout tutorial, front-end will be the basic skills, interview will be the foundation

In the example, the container is 400px wide and the project is 100px wide. The project was automatically shrunk because it exceeded the container space. The default flex shrink is 1, and all items are scaled down to 80px.

On the top right, set flex shrink to 0. Save the width of the original setting to 100px. Do not shrink it, so the container space overflows.

In the middle right, set the flex shrink to 6, 6, 6, default, and default, and change the item width to 70px, 70px, 70px, 95px, 95px. The extra 100px is divided into 20 parts and scaled down.

On the top right, set the flex shrink to 999, default, default, default, and default, and change the project width to 16px, 96px, 96px, 96px. You can see that it is not scaled down here.

Flex project properties: Flex basis

flex-basisUsed to initialize the main size of each item occupying the spindle space.

.item {
  flex-basis: <length> | auto;
}

Default value:flex-basis: auto, automatically detect the size. If the item has a set size, the value set by the item will be taken; otherwise, the size will be calculated according to the content of the item.

Can be set likewidthheightSame settingsflex-basis

Properties of flex project: Flex

flexIt’s a shorthand for the three combinations above.

.item {
  flex: <flex-grow> [<flex-shrink>] [<flex-basis>];
}

Default value:flex: 0 1 auto;The last two parameters are optional.

This attribute has the following predefined abbreviations:

  • flex: initial: equivalent toflex: 0 1 auto。 Default value. hereflex-growby0, so the project will not stretch by default and will not exceed its ownflex-basisSize.flex-shrinkby1, so projects can be scaled down to prevent them from overflowing.flex-basisbyauto, which can be manually set or automatically calculated according to the content.
  • flex: auto: equivalent toflex: 1 1 auto。 It can stretch and shrink, and automatically calculate the project size. Generally, it will automatically stretch and fill the whole container.
  • flex: none: equivalent toflex: 0 0 auto。 Cannot stretch, cannot shrink, directly use theflex-basisSize.
  • flex: <positive-number>: equivalent toflex: <positive-number> 1 0。 Positive number, for exampleflex: 1Equivalent toflex: 1 1 0

####Attribute of flex project: align self

align-selfControls the alignment of the project itself on the intersection axis. Priority overalign-itemsalign-itemsIs the container that controls the alignment of each item in the container,align-selfThe alignment is the control of the project itself.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Default value:align-self: auto;, inheriting thealign-itemsValue of. That is, it is set by the container by defaultalign-itemsUnify the alignment of items on the cross axis.

Except foralign-itemsadvantageautoIn addition to the options, other options andalign-itemsagreement.

.container {
  dispaly: flex;
  Align items: Flex start; // the container controls the top alignment of all items
}
.item.four {
    Align self: Flex end; // the fourth item controls the bottom alignment
}

Flex layout tutorial, front-end will be the basic skills, interview will be the foundation

Property of flex project: order

orderUsed to control the arrangement order of items on the spindle.

.item {
 order: <number>;
}

Default value:order: 0;The parameter value can be positive or negative, and all items are arranged in order according to the direction of the main axis. After setting, it is arranged from small to large according to the numerical value.

Flex layout tutorial, front-end will be the basic skills, interview will be the foundation

5、 Tips

1. Solve the use of flex layoutspace-betweenAlignment and misalignment of the last line

Flex layout tutorial, front-end will be the basic skills, interview will be the foundation

This is a common layout, but most of the time we want the last line to be left to right rather than justified

Solution: use the after pseudo element and set the width to be the same as item

.conatainer::after {
  content: ""; 
  width: 50px;
  /*Height: 50px; * // / if you set the height and background color of the pseudo element, you can see its effect.
  /* background-color: #eeeeee; */
}

Flex layout tutorial, front-end will be the basic skills, interview will be the foundation

The principle is to use the after pseudo element to simulate the last item, pretending to have one more item occupying the last position. If you set the height and background color of the pseudo element, you can see its effect.

But this method has an obvious drawback, which is only suitable for three items per line. More than three projects won’t work.

2. Solve the problem of flex layoutspace-evenlyCompatibility issues

Abovejustify-content: space-evenly;Alignment, which has an obvious disadvantage, is poor compatibility.

When the environment needs to be compatible with more browsers, the following solutions can be considered.

.container {
    display: flex;
    justify-content: space-between;
}
.container::after,
.container::before {
  content: '';
  display: block;
}

After pseudo element is used to simulate two items with length of 0 at both ends of the container to achieve the same effect even ly.

The disadvantage is that it fits only one row layout.

6、 Examples

Grail layout

<header>header</header>
  <div id='main'>
      <article>article</article>
      <nav>nav</nav>
      <aside>aside</aside>
  </div>
<footer>footer</footer>
<style>
  body { font: 24px Helvetica; }
  #main {
    min-height: 500px;
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-flow: row;
  }
  #main > article {
    margin: 4px;
    padding: 5px;
    border: 1px solid #cccc33;
    border-radius: 7pt;
    background: #dddd88;
    flex: 3 1 60%;
    order: 2;
  }
  #main > nav {
    margin: 4px;
    padding: 5px;
    border: 1px solid #8888bb;
    border-radius: 7pt;
    background: #ccccff;
    flex: 1 6 20%;
    order: 1;
  }
  #main > aside {
    margin: 4px;
    padding: 5px;
    border: 1px solid #8888bb;
    border-radius: 7pt;
    background: #ccccff;
    flex: 1 6 20%;
    order: 3;
  }
  header, footer {
    display: block;
    margin: 4px;
    padding: 5px;
    min-height: 100px;
    border: 1px solid #eebb55;
    border-radius: 7pt;
    background: #ffeebb;
  }
  /*Narrow enough to support three columns*/
  @media all and (max-width: 640px) {
    #main, #page {
      flex-direction: column;
    }
    #main > article, #main > nav, #main > aside {
      /*Restore to natural order within the document*/
      order: 0;
    }
    #main > nav, #main > aside, header, footer {
      min-height: 50px;
      max-height: 50px;
    }
  }
</style>

Flex layout tutorial, front-end will be the basic skills, interview will be the foundation

Reference document: MDN flex layout document

Flex layout tutorial, front-end will be the basic skills, interview will be the foundation

Sweep below the two-dimensional code or WeChat search, pay attention to official account “genius front-end plan”, reply to “front-end interview 5” to get resource links.

The video is from the Internet for personal learning only.

Flex layout tutorial, front-end will be the basic skills, interview will be the foundation

Thank you for your support^_^