Flex layout vs. traditional layout

The layout type

Box model

The traditional solution to layout, based on the box model, relies on the display property + position property + float property. The boxed model is composed of margin, border, padding and content attributes.

Flex layout

Flex, short for Flexible Box, is designed to provide maximum flexibility to Box models. Any container can be specified as a Flex layout.

Boxed models and Flex layouts allow for a variety of page layouts. But boxed models are inconvenient for special layouts, such as vertical centring. Flex layout for simple, complete, and responsive page layouts. Let’s look at the differences between the two layouts in detail by comparing their implementations

Flex layout syntax, which can be viewed by clicking on the link, is briefly listed here.

Basic Flex layout concepts

Elements with a Flex layout are called Flex containers, or “containers” for short. All of its child elements automatically become container members and are called Flex items, or “items.”The container has two axes by default: a horizontal main axis and a 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. By default, items are arranged along the main axis. The main axis space occupied by a single project is called main size, and the cross axis space occupied is called cross size.

compatibility

Container properties

1. flex-direction

Attributes determine the direction of the main axis (that is, the alignment of items).

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 in the vertical direction, and the starting point is in the upper edge.
Column-reverse: the main axis is vertical and the starting point is at the bottom.

2. flex-wrap

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

Nowrap (default) : no line breaks.
Wrap: The first line is at the top.
Wrap-reverse: newline with the first line at the bottom.

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

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

Flex-start (default) : left-aligned
Flex-end: right-aligned
Center: a center
Space-between: both ends are aligned with equal intervals between items.
Space-around: Equal spacing on both sides of each item. As a result, the spacing between items is twice as large as the spacing between items and the border.

5. align-items

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

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.
Stretch (default) : If the height is not set or auto is set, the project will occupy the entire height of the container.

6. align-content

The align-content property defines the alignment of multiple axes. This property has no effect if the project has only one 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.
Stretch (default) : Axis takes up the entire cross axis.

Project attributes

Order: Property defines the order of items. The smaller the value is, the more advanced it is. The default value is 0.
Flex-grow: property defines the zoom scale of the project. Default is 0, that is, no zoom if there is free space. (If all projects 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 others.)
Flex-shrink: The flex-shrink attribute defines the scale by which the project shrinks. The default is 1, that is, if there is insufficient space, the project shrinks. (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. Negative values have no effect on this property.
Flex-basis: Property defines the main size of the project before allocating extra space. Based on this property, the browser calculates whether the main axis has extra space. Its default value is Auto, the original size of the project.
Flex: The properties are short for flex-grow, flex-shrink, and flex-basis. The default value is 0 1 auto. The last two attributes are optional.
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.

Flex layout compared to traditional layout examples

Dice layout single item

Single project

Demo: lxqnsys.com/code-run/#/…

1. The case where there is only one point in the upper left corner

Traditional layout

<div class="tra">
  <div class="tra-child tra-left"></div>
</div>
Copy the code

.tra {
    position: relative;
  }
  .tra-left {
    position: absolute;
    left: 0;
    top: 0;
  }
Copy the code

Flex layout

<div class="flex flex-left">
  <div></div>
</div>
Copy the code

  .flex {
    display: flex; 
  }
  .flex-left {
    justify-content: flex; // The alignment of items on the main axis (default) left aligned}Copy the code

Traditional layout

<div class="tra">
  <div class="tra-center-child"></div>
</div>
Copy the code

.tra {
    position: relative;
  }
 .tra-center-child {
    margin: 0 auto;
  }
Copy the code

Flex layout

<div class="flex flex-center">
  <div ></div>
</div>
Copy the code

  .flex {
    display: flex;
  }
  .flex-center {
    justify-content: center; // The alignment of items on the main axis is centered}Copy the code

Traditional layout

<div class="tra">
      <div class="tra-end"></div>
    </div>
Copy the code

.tra {
    position: relative;
  }
.tra-end {
    position: absolute;
    right:0;
    top: 0;
}
Copy the code

Flex layout

<div class="flex flex-end">
      <div ></div>
    </div>
Copy the code

  .flex {
    display: flex;
  }
  .flex-center {
    justify-content: flex-end; // Align items right on the main axis}Copy the code

Traditional layout

<div class="tra">
  <div class="tra-mid-left"></div>
</div>
Copy the code

.tra {
    position: relative;
  }
.tra-mid-left {
    position: absolute;
    left:0;
    top:calc(50% - 15px);
  }
Copy the code

Flex layout

<div class="flex middle-left">
  <div ></div>
</div>
Copy the code

  .flex {
    display: flex;
  }
.middle-left {
  align-items: center; // Align items on the cross axis at the midpoint of the cross axis. }Copy the code

Traditional layout

<div class="tra">
  <div class="tra-mid-center"></div>
</div>
Copy the code

.tra {
    position: relative;
  }
.tra-mid-center {
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
  }
Copy the code

Flex layout

<div class="flex middle-center">
  <div ></div>
</div>
Copy the code

  .flex {
    display: flex;
  }
middle-center {
    justify-content: center; // The alignment of items on the main axis is centeredalign-items: center; // Align items on the cross axis at the midpoint of the cross axis. }Copy the code

Traditional layout

<div class="tra">
  <div class="end-center"></div>
</div>
Copy the code

.tra {
    position: relative;
  }
.end-center {
    position: absolute;
    left:50%;
    bottom:0;
    transform: translate(-50%.0);
  }
Copy the code

Flex layout

<div class="flex end-center">
  <div ></div>
</div>
Copy the code

  .flex {
    display: flex;
  }
.end-center {
    display: flex;
    justify-content: center; // The alignment of items on the main axis is centeredalign-items: flex-end; // Align items on the cross axisCopy the code

Traditional layout

<div class="tra">
  <div class="end-end"></div>
</div>
Copy the code

.tra {
    position: relative;
  }
.end-end {
    position: absolute;
    right:0;
    bottom:0;
  }
Copy the code

Flex layout

<div class="flex end-end">
  <div ></div>
</div>
Copy the code

  .flex {
    display: flex;
  }
.end-end {
    justify-content: flex-end; // Align items right on the main axisalign-items: flex-end; // Align items on the cross axisCopy the code

For a simple layout with only one div, the amount of code is about the same

Double project

Demo: lxqnsys.com/code-run/#/…

Traditional layout

<div class="tra">
  <div class="tra-left"></div>
  <div class="tra-right"></div>
</div>
Copy the code

.tra {
    position: relative;
  }
  .tra-left {
    position: absolute;
    left: 0;
    top: 0;
  }
  .tra-right {
    position: absolute;
    right: 0;
    top: 0;
  }
Copy the code

Flex layout

<div class="flex flex-left">
      <div ></div>
      <div ></div>
    </div>
Copy the code

  .flex {
    display: flex;
  }
  .flex-left {
    justify-content: space-between; // Items are aligned at both ends on the main axis with equal spacing between items. }Copy the code

Traditional layout

<div class="tra">
  <div class="tra-left-top"></div>
  <div class="tra-left-bottom"></div>
</div>
Copy the code

.tra {
    position: relative;
  }
  .tra-left-top {
     position: absolute;
    left: 0;
    top: 0;
  }
  .tra-left-bottom {
    position: absolute;
    left: 0;
    bottom: 0;
  }
Copy the code

Flex layout

<div class="flex flex-left-left">
      <div ></div>
      <div ></div>
    </div>
Copy the code

  .flex {
    display: flex;
  }
  .flex-left-left {
    flex-direction: column; // The main axis is vertical, and the starting point is on the top.justify-content: space-between; // Items are aligned at both ends on the main axis with equal spacing between items. }Copy the code

Traditional layout

<div class="tra">
  <div class="tra-mid-top"></div>
  <div class="tra-mid-bottom"></div>
</div>
Copy the code

.tra {
    position: relative;
  }
.tra-mid-top {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%.0);
  }
  .tra-mid-bottom {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%.0);
  }
Copy the code

Flex layout

<div class="flex flex-center">
      <div ></div>
      <div ></div>
    </div>
Copy the code

  .flex {
    display: flex;
  }
  .flex-center {
    flex-direction: column; // The main axis is vertical, and the starting point is on the top.justify-content: space-between; // Items are aligned at both ends on the main axis with equal spacing between items.align-items: center; // Items are aligned at the midpoint of the cross axis on the cross axis. }Copy the code

Traditional layout

<div class="tra">
  <div class="tra-right-top"></div>
  <div class="tra-right-bottom"></div>
</div>
Copy the code

.tra {
    position: relative;
  }
.tra-right-top {
    position: absolute;
    right:0;
    top:0;
  }
  .tra-right-bottom {
    position: absolute;
    right:0;
    bottom:0;
  }
Copy the code

Flex layout

<div class="flex right-bottom">
      <div ></div>
      <div ></div>
    </div>
Copy the code

  .flex {
    display: flex;
  }
   .right-bottom {
    flex-direction: column; // The main axis is vertical, and the starting point is on the top.justify-content: space-between; // Items are aligned at both ends on the main axis with equal spacing between items.align-items: flex-end; // Items are aligned at the end of the cross axis on the cross axis. }Copy the code

Traditional layout

 <div class="tra">
      <div class="tra-left-top"></div>
      <div class="tra-mid-center"></div>
    </div>
Copy the code

.tra {
    position: relative;
  }
.tra-left-top {
     position: absolute;
    left: 0;
    top: 0;
  }
 .tra-mid-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
Copy the code

Flex layout

 <div class="flex middle-center">
      <div class="flex-child"></div>
      <div class="flex-child"></div>
    </div>
Copy the code

  .middle-center {
    display: flex;
  }
  .middle-center .flex-child:nth-child(2) {
    align-self: center; // Attribute allows a single item to be aligned differently from other items, centered}Copy the code

Three projects

Demo: lxqnsys.com/code-run/#/…

Traditional layout

 <div class="tra">
    <div class="tra-child tra-mid-top"></div>
  <div class="tra-child tra-mid-middle"></div>
  <div class="tra-child tra-mid-bottom"></div>
</div>
Copy the code

.tra {
    position: relative;
  }
.tra-mid-top {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%.0);
  }
  .tra-mid-middle {
      position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .tra-mid-bottom {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%.0);
  }
Copy the code

Flex layout

 <div class="flex middle-center">
      <div ></div>
      <div ></div>
      <div ></div>
    </div>
Copy the code

.flex {
   display: flex;
}
  .middle-center {
    flex-direction: column; // The main axis is vertical, and the starting point is on the top.justify-content: space-between; // Items are aligned at both ends on the main axis with equal spacing between items.align-items: center; // Items are aligned at the end of the cross axis on the cross axis. }Copy the code

Traditional layout

 <div class="tra">
    <div class="tra-child tra-right-middle"></div>
      <div class="tra-child tra-left-middle"></div>
      <div class="tra-child tra-mid-center"></div>
</div>
Copy the code

.tra {
    position: relative;
  }
.tra-right-middle {
    position: absolute;
    right:0;
    top:50%;
    transform: translate(0, -50%);
  }
  .tra-left-middle {
     position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
  }
  .tra-mid-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
Copy the code

Flex layout

 <div class="flex middle-center">
      <div ></div>
      <div ></div>
      <div ></div>
    </div>
Copy the code

.flex {
   display: flex;
}
  .middle-center {
    justify-content: space-between; // Align both ends with equal spacing between items.align-items: center; // Cross axis midpoint alignment}Copy the code

other

Demo: lxqnsys.com/code-run/#/…

Traditional layout

<div class="box">
  <div class="box-column-top">
     <span class="item item-left"></span>
    <span class="item item-right"></span>
  </div>
  <div class="box-column-bottom">
     <span class="item item-left"></span>
    <span class="item item-right"></span>
  </div>
</div>
Copy the code

.box {
  position: relative;
  float: left;
  margin-left: 320px;
}
.box-column-top {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.item-left {
  position: absolute;
  left: 0;
  top: 0;
}
.item-right {
  position: absolute;
  right: 0;
  top: 0;
}
.box-column-bottom {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 20px;
}
Copy the code

Flex layout

<div class="box">
  <div class="column">
    <span class="item"></span>
    <span class="item"></span>
  </div>
  <div class="column">
    <span class="item"></span>
    <span class="item"></span>
  </div>
</div>
Copy the code

.box {
  display: flex;
  flex-wrap: wrap; // The first line is at the top.align-content: space-between; // Align with the two ends of the cross axis, and the spacing between the axes is evenly distributed. }.column {
  flex-basis: 100%; // Defines the main axis space that the project occupies before allocating the extra space100%
  display: flex;
  justify-content: space-between; // Align both ends with equal spacing between items. }Copy the code

Traditional layout

<div class="box">
  <div class="box-column-top">
     <span class="item item-left"></span>
    <span class="item item-right"></span>
  </div>
  <div class="box-column-bottom">
     <span class="item item-left"></span>
    <span class="item item-right"></span>
  </div>
</div>
Copy the code

.box {
  position: relative;
  float: left;
  margin-left: 320px;
}
.box-column-top {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.item-left {
  position: absolute;
  left: 0;
  top: 0;
}
.item-right {
  position: absolute;
  right: 0;
  top: 0;
}
.box-column-bottom {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 20px;
}
Copy the code

Flex layout

<div class="box">
  <div class="column">
    <span class="item"></span>
    <span class="item"></span>
  </div>
  <div class="column column-center">
    <span class="item"></span>
  </div>
  <div class="column">
    <span class="item"></span>
    <span class="item"></span>
  </div>
</div>
Copy the code

.box {
  display: flex;
  flex-wrap: wrap; // The first line is at the top.align-content: space-between; // Align with the two ends of the cross axis, and the spacing between the axes is evenly distributed. }.column {
  flex-basis: 100%; // Defines the main axis space that the project occupies before allocating the extra space100%
  display: flex;
  justify-content: space-between; // Align both ends with equal spacing between items. }.column-center {
  display: flex;
  justify-content: center; // Align the items on the main axis center}Copy the code

Traditional layout

<div class="box">
  <div class="box-column-top">
    <span class="item item-left"></span>
    <span class="item item-center-center"></span>
    <span class="item item-right"></span>
  </div>
  <div >
    <span class="item item-left-center"></span>
  </div>
  <div class="box-column-bottom">
    <span class="item item-left"></span>
    <span class="item item-center-center"></span>
    <span class="item item-right"></span>
  </div>
</div>
Copy the code

.box-column-top {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.item-left-center {
  position: absolute;
  right:0;
  top:50%;
  transform: translate(0, -50%);
}
.item-left {
  position: absolute;
  left: 0;
  top: 0;
}
.item-right {
  position: absolute;
  right: 0;
  top: 0;
}
.box-column-bottom {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 20px;
}
.item-center-center {
  position: absolute;
  left:50%;
  top:0;
  transform: translate(-10px.0);
}
Copy the code

Flex layout

<div class="box">
  <div class="column">
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
  </div>
  <div class="column column-right">
    <span class="item"></span>
  </div>
  <div class="column">
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
  </div>
</div>
Copy the code

.box {
  display: flex;
  flex-wrap: wrap; // The first line is at the top.align-content: space-between; // Align with the two ends of the cross axis, and the spacing between the axes is evenly distributed. }.column {
  flex-basis: 100%; // Defines the main axis space that the project occupies before allocating the extra space100%
  display: flex;
  justify-content: space-between; // Align both ends with equal spacing between items. }.column-right {
  display: flex;
  justify-content: flex-end; // Align items right on the main axis}Copy the code

It is clear that flex’s advantages become apparent as the layout structure becomes more complex. Much less code

Grid layout

Demo:lxqnsys.com/code-run/#/…

Flex layout

<div class="flex">
    <h2>Flex layout</h2>
    <div class="box Grid">
      <div class="Grid-cell">1/2</div>
      <div class="Grid-cell">1/2</div>
    </div>
    <div class="box Grid">
      <div class="Grid-cell">A third</div>
      <div class="Grid-cell">A third</div>
      <div class="Grid-cell">A third</div>
    </div>
    <div class="box Grid">
      <div class="Grid-cell">A quarter</div>
      <div class="Grid-cell">A quarter</div>
      <div class="Grid-cell">A quarter</div>
      <div class="Grid-cell">A quarter</div>
    </div>
  </div>
Copy the code

.flex {
  background: rgb(218.218.218);
}
.box .Grid-cell {
  background: rgb(17.255.255);
  height: 32px;
  line-height: 32px;
  margin:0.25%;
}
.Grid {
  display: flex;
}
.Grid .Grid-cell {
  margin-top:12px;
  flex: 1; // Divide the remaining space of the spindle equally}Copy the code

The traditional layout

<div class="tra">
    <h2>The traditional layout</h2>
    <div class="tra-Grid">
      <div class="Grid-cell-right Grid-item">1/2</div>
      <div class="Grid-cell-left Grid-item">1/2</div>
    </div>
    <div class="tra-Grid">
      <div class="Grid-cell-three Grid-item">A third</div>
      <div class="Grid-cell-three Grid-item">A third</div>
      <div class="Grid-cell-three Grid-item">A third</div>
    </div>
    <div class="tra-Grid">
      <div class="Grid-cell-four Grid-item">A quarter</div>
      <div class="Grid-cell-four Grid-item">A quarter</div>
      <div class="Grid-cell-four Grid-item">A quarter</div>
      <div class="Grid-cell-four Grid-item">A quarter</div>
    </div>
  </div>
Copy the code

.tra {
  background: rgb(218.218.218);
}
.tra-Grid {  
  width:100%;
  clear: both;
}
.Grid-item {
  background: rgb(17.255.255);
  height: 32px;
  line-height: 32px;
  margin:0.25%;
}
.Grid-cell-right {
  float: right; 
  width:49.5%;
}
.Grid-cell-left {
  float: left; 
  width:49.5%;
}
.Grid-cell-three {
  width:32.83%;
  float: left;
}
.Grid-cell-four {
   width:24.5%;
  float: left;
}
Copy the code

Percentage layout

Demo:lxqnsys.com/code-run/#/…

The traditional layout

<div class="tra">
    <h2>The traditional layout</h2>
    <div class="tra-Grid">
      <div class="Grid-cell-right Grid-item">1/2</div>
      <div class="Grid-cell-auto Grid-item">auto</div>
      <div class="Grid-cell-auto Grid-item">auto</div>
    </div>
    <div class="tra-Grid">
      <div class="Grid-item Grid-item-auto3">auto</div>
      <div class="Grid-cell-three Grid-item">A third</div>
     
    </div>
    <div class="tra-Grid">
      <div class="Grid-cell-four Grid-item">A quarter</div>
      <div class="Grid-cell-auto4 Grid-item">auto</div>
      <div class="Grid-cell-auto5 Grid-item">auto</div>
     
    </div>
  </div>
Copy the code

.tra {
  background: rgb(218.218.218);
}
.tra-Grid {  
  width:100%;
  clear: both;
}
.Grid-item {
  background: rgb(17.255.255);
  height: 32px;
  line-height: 32px;
  margin:0.25%;
}
.Grid-cell-right {
  width:49.25%;
  float: left;
}
.Grid-cell-auto {
   width:24.625%;
  float: left;
}
.Grid-item-auto3 {
  width:66%;
  float: left;
}
.Grid-cell-left {
  float: left; 
  width:49.5%;
}
.Grid-cell-three {
  width:32.83%;
  float: left;
}
.Grid-cell-four {
   width:24.5%;
  float: left;
}
.Grid-cell-auto4 {
    width:41.5%;
  float: left;
}
.Grid-cell-auto5 {
    width:32.5%;
  float: left;
}
Copy the code

Flex layout

<div class="flex">
    <h2>Flex layout</h2>
    <div class="box Grid">
      <div class="Grid-cell u-lof1">1/2</div>
      <div class="Grid-cell">auto</div>
      <div class="Grid-cell">auto</div>
    </div>
    <div class="box Grid">
      <div class="Grid-cell">auto</div>
      <div class="Grid-cell u-lof2">A third</div>
    </div>
    <div class="box Grid">
      <div class="Grid-cell u-lof3">A quarter</div>
      <div class="Grid-cell">auto</div>
      <div class="Grid-cell u-lof2">auto</div>
    </div>
  </div>
Copy the code

.flex {
  background: rgb(218.218.218);
}
.box .Grid-cell {
  background: rgb(17.255.255);
  height: 32px;
  line-height: 32px;
  margin:0.25%;
}
.Grid {
 display: flex;
 }
.Grid .Grid-cell {
 flex: 1; // Divide the remaining space of the spindle equally}.Grid .u-lof1 {
 flex: 0 0 50%; // Do not zoom in, do not zoom out, divide the remaining space of the spindle equally50%
 }
.Grid .u-lof2 {
 flex: 0 0 33.33%// Do not zoom in, do not zoom out, divide the remaining space of the spindle equally33.3%
 }
.Grid .u-lof3 {
 flex: 0 0 25%// Do not zoom in, do not zoom out, divide the remaining space of the spindle equally25%
 }
Copy the code

While traditional layouts do not automatically divide evenly, requiring calculations of percentages and fixed widths, Flex layouts simply specify the proportions of the widths of the elements to be set, while other layouts automatically assign the proportions, making them more flexible and easier to write than traditional layouts

The holy grail layout

Demo: lxqnsys.com/code-run/#/…

The traditional layout

<div class="HolyGrailTra">
    <div class="headerTra">header</div>
    <div class="HolyGrail-body-tra">
      <div class="left">left</div>
      <div class="center">center</div>
      <div class="right">right</div>
    </div>
    <div class="footerTra">footer</div>
  </div>
Copy the code

.HolyGrailTra {
  position: relative;
}
.HolyGrailTra div {
  border: 1px solid #ddd;
  line-height: 32px;
}
.headerTra{}.HolyGrail-body-tra {
   min-height: 100px;
   div {
      width:33.22%;
      float: left;
      min-height: 100px; }}Copy the code

Flex layout

<div class="HolyGrail">
    <div class="header">header</div>
    <div class="HolyGrail-body">
      <div class="left">left</div>
      <div class="center">center</div>
      <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
  </div>
Copy the code

.HolyGrail {
  display: flex;
  flex-direction: column; // The main axis is vertical, and the starting point is on the top. }.HolyGrail div {
  border: 1px solid #ddd;
  line-height: 32px;
}
.HolyGrail .header..HolyGrail .footer {
  flex: 0 0 100%; // Do not zoom in, do not zoom out, divide the remaining space of the spindle equally100%
}
.HolyGrail-body {
  display: flex;
  flex: 1; // flex-growattribute1If all projectsflex-growAttributes are1, then they will divide the remaining space equallymin-height: 100px;
}
.HolyGrail-body .left..HolyGrail-body .center..HolyGrail-body .right {
  flex: 1; // flex-growattribute1If all projectsflex-growAttributes are1, then they will divide the remaining space equally}Copy the code

The middle elements, the child elements need to account for 1/3 of the total. For a traditional layout, you can only approximate 1/3 of the total. You can’t divide it evenly like flex

Hanging layout

Demo:lxqnsys.com/code-run/#/…

The traditional layout

<div class="MediaTra">
    <img src="Https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4132631755, & FM = 26 & gp = 0. 1579869755 JPG" alt="Here's the picture." />
    <p class="Media-body-tra">It's a long, long, long, long, long, long, long, long, long word</p>
  </div>
Copy the code

.MediaTra {
  img {
    width:100px;
    height:100px; 
    float: left;
  } 
  .Media-body-tra {
    margin:0 0 0 8px;
    float: left; }}Copy the code

Flex layout

<div class="Media">
    <img src="Https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4132631755, & FM = 26 & gp = 0. 1579869755 JPG" alt="Here's the picture." />
    <p class="Media-body">It's a long, long, long, long, long, long, long, long, long word</p>
  </div>
Copy the code

.Media {
  display: flex;
  align-items: flex-start; // Align the starting point of the cross axisimg {
    width:100px;
    height:100px; }}.Media-body {
  flex: 1;
  margin: 0 0 0 8px;
  padding: 0;
}
Copy the code

When the screen is reduced to a certain width, the traditional layout text will appear on another line. The Flex layout is fine. The Flex layout is good for mobile layout and can be adapted to multiple screens.

Fixed bottom bar

Demo: lxqnsys.com/code-run/#/…

The traditional layout

<div class="SiteTra">
    <div>header</div>
    <div class="Site-content-tra">main content</div>
    <div class="footerTra">footer</div>
  </div>
Copy the code

.SiteTra {
   min-height: 200px;
}
.SiteTra div {
  border: 1px solid #ddd;
}
.Site-content-tra {
  min-height:100px;
}
.footerTra {
  position: fixed;
  bottom:0;
  width:100%;
}
Copy the code

Flex layout

<div class="Site">
    <div>header</div>
    <div class="Site-content">main content</div>
    <div>footer</div>
  </div>
Copy the code

.Site {
  display: flex;
  min-height: 200px;
  flex-direction: column; // The main axis is vertical, and the starting point is on the top. }.Site div {
  border: 1px solid #ddd;
}
.Site-content {
  flex: 1; // flex-growattribute1If all projectsflex-growAttributes are1, then they will divide the remaining space equally}Copy the code

Traditional layout fixed bottom column, take position: fixed; The Flex method is positioned at the bottom relative to the current window, while Flex is positioned at the bottom relative to the parent element. The flexibility of the Flex layout is especially noticeable if it is a small number of elements in a window that require a fixed bottom column rather than a traditional layout.

Fluid layout

Demo: lxqnsys.com/code-run/#/…

The traditional layout

 <div class="parentTra">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
Copy the code

.parentTra {
   width: 200px;
  height: 150px;
  background-color: rgb(0.255.179);
  .item {
    background: rgb(255.6.6);
    width:24%;
    float: left;
    height: 50px;
    border: 1px solid rgb(153.153.153); }}Copy the code

Flex layout

 <div class="parent">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
Copy the code

.parent {
  width: 200px;
  height: 150px;
  background-color: rgb(0.255.179);
  display: inline-flex;
  flex-flow: row wrap;
  align-content: flex-start;
   .item {
    box-sizing: border-box;
    background: rgb(255.6.6);
    flex: 0 0 25%;
    height: 50px;
    border: 1px solid rgb(153.153.153); }}Copy the code

In streaming layouts, where the width percentage calculation takes into account the width of the border, it is not very good to give an accurate average allocation. Flex layouts can be set to 25% exactly, which is an even distribution of four child elements, which is more accurate

Taken together:

Traditional layout (1) good compatibility (2) cumbersome layout, when it comes to the need to evenly distribute width and height, it is difficult to calculate (3) in mobile terminal adaptation, percentage calculation needs to consider the border, so it cannot have a good layout on the mobile terminal

Flex layout features 1, any element can use Flex layout, flexibility is higher 2, in the need to evenly allocate space, minus tedious calculation, simple code 2, can better adapt to the mobile terminal layout

The above is a comparison of different layouts based on flex layout properties with traditional layouts, so that you can see some of the advantages of Flex layout more intuitively. When using flex syntax to implement the layout above, it’s not clear why it works the way it does. Here are some additional notes:

Flex: What exactly does 1 stand for?

The flex:1 attribute is used in both the holy Grail layout and the solid base layout. The document states that 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-grow is the property that defines the size of the project

The Flex-Shrink attribute defines the size of the project

Flex-basis calculates whether the project has extra space before assigning it to the above two attributes, and defaults to Auto, the size of the project itself

So what does Flex :1 look like in full? So let’s test that out

Demo: lxqnsys.com/code-run/#/…

<h2>flex: 1;</h2>
    <div class="container flex">
      <div class="div">I'm a div</div>
      <div class="div">I am a multi-word div</div>
      <div class="div">I am a more word and third div</div>
    </div>
     <h2>flex: 1 1 auto;</h2>
    <div class="containerOne flex">
      <div class="div">I'm a div</div>
      <div class="div">I am a multi-word div</div>
      <div class="div">I am a more word and third div</div>
    </div>
    <h2>flex: 1 1 0;</h2>
    <div class="containerTwo flex">
      <div class="div">I'm a div</div>
      <div class="div">I am a multi-word div</div>
      <div class="div">I am a more word and third div</div>
    </div>
Copy the code

.flex{
  display: flex;
}
.container .div{
  border: 1px solid rgb(255.115.0);
  flex: 1;
}
.containerOne .div {
  border: 1px solid rgb(255.175.3);
  flex: 1 1 auto;
}
.containerTwo .div {
  border: 1px solid rgb(255.175.3);
  flex: 1 1 0;
}
Copy the code

As you can see, when Flex is set to 1, auto indicates the size of the project itself, and if set to Auto, the boxes will be scaled up and down proportionally based on the size of their contents

When flex is 1, 1, 0, it is actually 1, 1 0px

If we set any other number with units of length, it will not be calculated by the item itself, so it does not care about the content, but just shrinks and enlarges the space in equal proportions

So flex: 1 === Flex: 1 1 any number + any unit of length

References:

www.ruanyifeng.com/blog/2015/0…

zhuanlan.zhihu.com/p/136223806

Flex layout vs. traditional layout

Flex layout vs. traditional layout

The layout type

Basic Flex layout concepts

Container properties

1. flex-direction

2. flex-wrap

3. flex-flow

4. justify-content

5. align-items

6. align-content

Project attributes

Flex layout compared to traditional layout examples

Dice layout single item

Single project

Double project

Three projects

other

Grid layout

Percentage layout

The holy grail layout

Hanging layout

Fixed bottom bar

Fluid layout

Flex: What exactly does 1 stand for?

Related Posts

Find and findIndex methods in an array

Interviewer: JS this point

JavaScript event loops in detail