The traditional layout

Normal flow layout, normal flow layout is to use display to set the box model and float with position

Uniform layout

The requirement for an equal layout is to ensure that each column is of the same width in view in the case of multiple columns.

DOM document

<div class="outer">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
</div>
Copy the code

The CSS part

.inner {
  width: 33.33%;
  height: 300px;
  display: inline-block;
  /* float: left */
  outline: 1px solid blue;/* Note that border takes up space. Outline does not take up space and does not affect the size or position of elements. Border can be applied to almost any tangible HTML element, while Outline is designed for elements such as links, form controls, and ImageMap
}
.outer {
  font-size: 0;
} /* Inline-block causes the third element to be wrapped because the space after the inner element is identified as empty white text. You can change the font size in outer to 0: */
Copy the code

Such as the layout

In the case of multiple columns, the height of each column is different. Ensure that the height of each column is the same as that of the longest column.

Negative margin + padding

The height difference of the child elements still exists, but it is visually equivalent to the height difference. This is achieved by using a negative margin and a Padding compensation method:

Set the padding-bottom of the column to a large enough value.
Set the margin-bottom of the column to a negative value that cancels out the positive value of the padding-bottom.
The parent container is set to overflow hide

DOM document

 <div class="layout parent">
        <div class="left"><p>left</p></div>
        <div class="center">
            <p>I am the content of the middle part</p>
            <p>I am the content of the middle part</p>
            <p>I am the content of the middle part</p>
            <p>I am the content of the middle part</p>
        </div>
        <div class="right"><p>right</p></div>
        <div style="clear: both;">11111111111</div>
    </div>
Copy the code

The CSS part

.parent{
    position: relative;
    overflow:hidden;
    color: #efefef;
}
.center..left..right {
    box-sizing: border-box;
    float: left;
}
.center {
    background-color: #2ECC71;
    width: 60%;
}

.left {
    width: 20%;
    background-color: #1ABC9C;
}
.right {
    width: 20%;
    background-color: #3498DB;
}
.left..right..center  {
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}
Copy the code

Using absolute

<div class="layout parent">
        <div class="left"><p>left</p> </div>
        <div class="center">
            <p>I am the content of the middle part</p>
            <p>I am the content of the middle part</p>
            <p>I am the content of the middle part</p>
            <p>I am the content of the middle part</p>
        </div>
        <div class="right"><p>right</p></div>
    </div>
Copy the code

The CSS part

.parent{
        position: absolute;
        color: #efefef;
        width:100%;
        height: 200px;
    }

    .left..right..center {
        position: absolute;
        box-sizing: border-box;
        top:0;
        bottom:0;
    }
    .center {
        background-color: #2ECC71;
        left: 200px;
        right: 300px;
    }

    .left {
        width: 200px;
        background-color: #1ABC9C;
    }
    .right {
        right:0;
        width: 300px;
        background-color: #3498DB;
    }
Copy the code

Two column adaptive layout

The layout of a two-column adaptive layout requires that one side be fixed in width or unfixed, while the other side occupies the rest to achieve adaptive. This layout is sometimes used in background systems, often to navigate from left to right, or to the left or right of pages advertising the remaining themes

float+margin

The processing of this method is to make the left float, the right margin-left element width, the left fixed width and the right adaptive.

DOM document

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

The CSS part

.left {
  float: left;
  width: 100px;
}
.right {
  margin-left: 100px;
}
Copy the code

Float + Overflow (BFC)

With the same structure as above, the left element floats and the right element fires the BFC using overflow, with nothing to do with the outside element. Reach left unfixed width right adaptive.

.left {
 float: left;
}
.right {
 overflow: hidden;
}
Copy the code

Three column adaptive layout

Three columns of adaptive layout usually refers to the fixed width on both sides, and the middle column of adaptive width. There are many application scenarios of it. The PC home page of many shopping malls adopts this layout, and the classic Holy Grail layout and the double-flying wing layout is also one of them.

Fluid Layout (float+ Margin) and BFC (Float + Overflow)

The premise of these two methods is that the left and right elements float respectively, and then the adaptive elements in the middle use margin to squeeze out the position, or use BFC to pull out the relationship.
The difference between these two methods is that margin needs to determine the width of the left and right sides, whereas BFC does not. However, they also have the same disadvantage, that is, the main content. Center cannot be loaded first, which will affect the user experience when there is too much content on the page.

DOM document

<div class="outer">
  <div class="left"></div>
  <div class="right"></div>
  <div class="center"></div>
</div>
Copy the code

The CSS part

.left {
  float: left;
  width: 100px;
}
.right {
  float: right;
  width: 120px;
}
.center {
  margin-left: 100px;
  margin-right: 120px;
  /* If it is BFC, remove the above margin */
  /* overflow: hidden; * /
}
Copy the code

Absolute positioning

Use the edge elements to absolutely position the flow away from the document to the left and right, while the middle elements use margins to isolate the two sides.
This method is simple to operate, but the absolute positioning is out of the document flow, meaning that all of the following child elements will also be out of the document flow, which can be problematic at high unknown levels, resulting in poor effectiveness and usability. (For example, if you want to add a new element at the end of the document, the elements behind it are not aligned properly because they are out of the document flow. You still need to use absolute positioning to find where it should be. If you add more elements at the end of the document, there may be overlapping problems.)

DOM document

<div class="outer">
  <div class="center"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>
Copy the code

The CSS part

.outer {
  position: relative;
}
.center {
  margin-left: 100px;
  margin-right: 120px;
}
.left {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
}
.right {
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
}
Copy the code

Grail and twin wings layout

Grail layout originated In 2006 In a List part of the Article: In Search of the Holy Grail · An List Apart Article, the double wing layout is the Holy Grail layout optimization version, proposed by Taobao UED. They are both side-wide, adaptive three-column layouts in the middle, with the middle column being rendered first before the document flow.

DOM document

<div class="header">header</div>
<div class="outer">
  <div class="center">center</div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>
<div class="footer">footer</div>
Copy the code

CSS Part 1 (Basic Styles)

.header {
      height: 40px;
      background: lightblue;
}
.footer {
      height: 80px;
      background: lightcoral;
}
.center {
  width: 100%;/* The width is 100% */ since the middle part is designed to adapt to the changes in the window
  height: 100px;
  background-color: peachpuff;
}
.left {
  width: 100px;
  height: 110px;
  background-color: skyblue;
}
.right {
  width: 120px;
  height: 120px;
  background-color: pink;
}
Copy the code

CSS Part 2(float left, Right, center)

.center {
  float: left;
}
.left {
  float: left;
}
.right {
  float: left;
}
Copy the code

CSS part 3(clear float so footer is displayed, add a clearfix class after outer in DOM document (omitted))

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
Copy the code

CSS Section 4(leave left, right, center in place)

.left {
  margin-left: -100%;
}
.right {
  margin-left: -120px;
}
Copy the code

There are two different solutions to this problem: the Grail layout and the twin wing layout.

The holy grail layout

When the center width is smaller than the width of the elements on either side, the layout will get messy. This can be avoided by setting the min-width property of the center or by using a twin-wing layout.

The CSS part 5

.left {
  position: relative;
  left: -100px;
}
.right {
  position: relative;
  left: 120px;/* Move the left and right elements to occupy the position of the parent element padding */
}
.outer {
  padding-left: 100px;
  padding-right:120px;/* Change the.center width so that it is exactly the width of the parent element - width of the left element - width of the right element */
}
Copy the code

Twin wing layout

The twin-wing layout solves the text coverage problem by adding a child element to the middle adaptive part as the content panel and adding a margin to it to control its display area.

DOM document (add a child element center-content to center)

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

The CSS part 5 ‘

.center-content {
  margin-left: 100px;  
  margin-right: 120px; 
}
Copy the code

The traditional solution to layout, based on the box model, relies on the display property +position property +float property. But it is very inconvenient for special layouts, such as vertical centring. The traditional layout is for the document structure, but with the business needs, there are a lot of “change the size of the box, so that their structure remains fixed” requirements, so the research of margin negative and other black technology collocation, but it is still difficult to understand there will be some side effects. In this case, the Flex layout was presented along with CSS3 to solve this problem.

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, and this container is called a Flex container, and all of its child elements automatically become container members, called Flex projects.

The way to use a Flex layout is to set the display attribute of the element to flex or inline-flex, the webKit-kernel browser, which must be prefixed with -webkit-.

Uniform layout

DOM document

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

The CSS part

.container {
  display: flex;
}
.item {
  flex-grow: 1;
}
Copy the code

Such as the layout

DOM document

<div class="container">
  <div class="child"></div>
  <div class="child"></div>
</div>
Copy the code

The CSS part

.container {
  display: flex;
}
.child {
  align-items: stretch; /* There is actually a default */
}
Copy the code

Two column adaptive layout

DOM document

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

The CSS part

.container {
  display: flex;
}
.right {
  flex-grow: 1;
}
Copy the code

Three column adaptive layout

Since flex defaults to one line, the width of the middle element is set to 100%; Because of the shrink property, the width should be fixed on both sides. Set the shrink property to Flex-shrink: 0 so that the size does not shrink when the space changes.

DOM document

<div class="container">
  <div class="left">left</div>
  <div class="center">center</div>
  <div class="right">right</div>
</div>
Copy the code

The CSS part

.container {
  display: flex;
}
.center {
  width: 100%;
}
.left {
  width: 100px;
  flex-shrink: 0;
}
.right {
  width: 200px;
  flex-shrink: 0;
}
Copy the code

The Flex layout is pretty good overall, but the only problem with it is compatibility. Flex only supports IE10+, so use it with context in mind. Another, more powerful layout approach is grid.

A Grid layout is similar to a Flex layout in that it can specify the location of multiple items within a container. But there are also important differences. Flex layout is an axis layout and can only specify the position of “items” against the axis, which can be considered as a one-dimensional layout. A Grid layout divides the container into “rows” and “columns”, generates cells, and then specifies the cells “where the project resides”, which can be thought of as a two-dimensional layout. The Grid layout is far more powerful than the Flex layout.

Grid layout

The Grid is the most powerful CSS layout scheme. It divides web pages into grids that can be arbitrarily combined to create a variety of layouts. Grid layout properties fall into two categories. One class is defined on the container and is called container properties. The other category is defined on a project and is called project attributes.

The way to use a grid layout is to set the display property of an element to grid or inline-grid. Grid compatibility can be seen in Caniuse. Overall compatibility is good, but it is not supported in IE 10 or below.

Three column adaptive layout

Fixed left and right, adaptive in the middle

DOM document

<div class="container">
    <div class="left">left</div>
    <div class="middle">middle</div>
    <div class="right">right</div>
</div>
Copy the code

The CSS part

.container {
    display: grid;
    grid-template-columns: 100px 1fr 100px;
    height: 200px;
}
.container div {
    text-align: center;
}
.left {
    background: greenyellow;
}
.middle {
    background: lightblue;
}
.right {
    background: greenyellow;
}
Copy the code

Scratchable latex

DOM document

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
</div>
Copy the code

The CSS part

.container {
    display: grid;
    grid-template-columns: repeat(3.1fr);
    grid-template-rows: repeat(3.1fr);
    height: 400px;
    width: 400px;
    grid-gap: 8px;
}
.item {
    background: lightskyblue;
}
Copy the code

Grail layout and twin wing layout

DOM document

<div class="container">
    <div class="header">header</div>
    <div class="left">left</div>
    <div class="body">body</div>
    <div class="right">right</div>
    <div class="footer">footer</div>
</div>
Copy the code

The CSS part

.container {
    display: grid;
    grid-template-columns: 100px 1fr 100px;
    grid-template-rows: 50px 300px 50px;
}
.header {
    grid-area: 1 / 1 / 2 / 4;
    background: lightsalmon;
}
.left {
    background: lightseagreen;
}
.body {
    background: lightslategray;
}
.right {
    background: lightyellow;
}
.footer {
    grid-area: 3 / 1 / 4 / 4;
    background: yellowgreen;
}
Copy the code

Repeat + auto-fit — Fix column width and change the number of columns

Requirements sometimes want our grid to have a fixed column width and change the number of columns depending on the width of the container. At this point, we can use the repeat() function and the auto-fit keyword. Grid-template-columns: repeat(auto-fit, 200px) indicates that the width of the fixed columns is 200px. The number of columns is adaptive. As long as there is enough space, the columns will be arranged upwards.

DOM document

<div class="wrapper">
  <div class="one item">One</div>
  <div class="two item">Two</div>
  <div class="three item">Three</div>
  <div class="four item">Four</div>
  <div class="five item">Five</div>
  <div class="six item">Six</div>
  <div class="seven item">Seven</div>
  <div class="eight item">eight</div>
  <div class="nine item">Nine</div>
</div>
Copy the code

The CSS part

.wrapper {
  margin: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, 200px);
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}

.one {
  background: #19CAAD;
}
.two { 
  background: #8CC7B5;
}
.three {
  background: #D1BA74;
}
.four {
  background: #BEE7E9;
}
.five {
  background: #E6CEAC;
}
.six {
  background: #ECAD9E;
}
.seven {
  background: #BEEDC7;
}
.eight {
  background: #F4606C;
}
.nine {
  background: #A0EEE1;
}
.item {
  text-align: center;
  font-size: 200%;
  color: #fff;
}
Copy the code

Repeat +auto-fit+minmax remove the space on the right

.wrapper {
  margin: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px.1fr));
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}
Copy the code

Repeat +auto-fit+minmax-span-dense solve the vacancy problem

.wrapper {
  margin: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px.1fr));
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}

.wrapper {
  margin-top: 200px;
  grid-auto-flow: row dense;
}
Copy the code

In the middle

The Grid center

Three combo

Set the container display: grid; align-items: center; justify-content: center;

<div class="box">
  <div class="child">hello</div>
</div>

<style>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  display: grid;
  align-items: center;
  justify-content: center;
}
.child {
  background: red;
}  
</style>
Copy the code

margin: auto

Set the container display: grid; Margin: auto;

<div class="box">
  <div class="child">hello</div>
</div>

<style>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  display: grid;
}
.child {
  background: red;
  margin: auto;
}  
</style>
Copy the code

Flex center

Three combo

Display: flex; align-items: center; justify-content: center;

<div class="box">
  <div class="child">hello</div>
</div>

<style>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: center;
}
.child {
  background: red;
}  
</style>
Copy the code

margin: auto

Set the container display: flex; Margin: auto;

<div class="box">
  <div class="child">hello</div>
</div>

<style>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  display: flex;
}
.child {
  background: red;
  margin: auto;
}  
</style>
Copy the code

Absolute positioning is centered

The container is set position: relative. Child sets position: Absolute; left: 50%; top: 50%; transfrom: translate(-50%, -50%);

<div class="box">
  <div class="child">hello</div>
</div>

<style>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  position: relative;
}
.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: red;
}  
</style>
Copy the code

I’ll use line-height to center it

Add a dummy element to the container and set line-height to the height of the container. Set display: inline-block to the child;

<div class="box">
  <div class="child">hello</div>
</div>

<style>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  text-align: center;
}
.box::after {
  content: "";
  line-height: 200px;
}
.child {
  display: inline-block;
  background: red;
}
  
</style>
Copy the code

Other methods

The container is set position: relative. Child sets position: Absolute; Set fixed width and height; Set top, left, bottom, and right to 0; Margin set to auto; Can also achieve vertical horizontal center.

<div class="box">
  <div class="child">hello</div>
</div>

<style>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  position: relative;
}
.child {
  background: red;
  width: 100px;
  height: 40px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}  
</style>
Copy the code

reference

Contour layout in several ways _ personal article – SegmentFault thinking no

CSS Remodeling (3) – CSS layout

Grid Layout introduction – Cloud + community – Tencent Cloud

(more) what are the ways to achieve the center

The Grid layout is the most powerful CSS layout

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Take stock of common HTML+CSS layouts

The traditional layout

Uniform layout

Such as the layout

Negative margin + padding

Using absolute

Two column adaptive layout

float+margin

Float + Overflow (BFC)

Three column adaptive layout

Fluid Layout (float+ Margin) and BFC (Float + Overflow)

Absolute positioning

Grail and twin wings layout

The holy grail layout

Twin wing layout

Flex layout

Uniform layout

Such as the layout

Two column adaptive layout

Three column adaptive layout

Grid layout

Three column adaptive layout

Scratchable latex

Grail layout and twin wing layout

Repeat + auto-fit — Fix column width and change the number of columns

Repeat +auto-fit+minmax remove the space on the right

Repeat +auto-fit+minmax-span-dense solve the vacancy problem

In the middle

The Grid center

Three combo

margin: auto

Flex center

Three combo

margin: auto

Absolute positioning is centered

I’ll use line-height to center it

Other methods

reference

Take stock of common HTML+CSS layouts

The traditional layout

Uniform layout

Such as the layout

Negative margin + padding

Using absolute

Two column adaptive layout

float+margin

Float + Overflow (BFC)

Three column adaptive layout

Fluid Layout (float+ Margin) and BFC (Float + Overflow)

Absolute positioning

Grail and twin wings layout

The holy grail layout

Twin wing layout

Flex layout

Uniform layout

Such as the layout

Two column adaptive layout

Three column adaptive layout

Grid layout

Three column adaptive layout

Scratchable latex

Grail layout and twin wing layout

Repeat + auto-fit — Fix column width and change the number of columns

Repeat +auto-fit+minmax remove the space on the right

Repeat +auto-fit+minmax-span-dense solve the vacancy problem

In the middle

The Grid center

Three combo

margin: auto

Flex center

Three combo

margin: auto

Absolute positioning is centered

I’ll use line-height to center it

Other methods

reference

Related Posts

ESLint+Prettier uses ESLint+Prettier independently for format verification

Research on font enlargement in mobile terminal

What you need to know — DNS