Common CSS layouts and solutions

Common CSS layouts include horizontal and vertical centering of elements, single-column layout, three-column layout, etc. This paper analyzes the layout scheme under various circumstances.

A, in the middle

1. Horizontal center

(1) Implementation based on box model

Child elements are inline elements

<div class="parent parent-box">
  <span class="child">Child elements are inline elements</span>
</div>
Copy the code

.parent-box {
  width: 200px;
  height: 100px;
  border: 1px solid purple;
}
/* The inline element directly centers the text */
.parent {
  text-align: center;
}
Copy the code

The child element is a fixed-width block element

<div class="parent-box">
  <div class="child child-box">Constant width subelement</div>
</div>
Copy the code

.parent-box {
  width: 200px;
  height: 100px;
  border: 1px solid purple;
}
.child-box {
  width: 100px;
  height: 20px;
}
/* Set margin to split the remaining space */
.child {
  margin: auto;
}
Copy the code

Child elements are block elements of indefinite width

<div class="parent parent-box">
  <div class="child">Child elements are block elements of indefinite width</div>
</div>
Copy the code

.parent-box {
  width: 200px;
  height: 100px;
  border: 1px solid purple;
}
/* The child element is set to inline, and the parent element centers the text */
.parent {
  text-align: center;
}
.child {
  display: inline;
}
Copy the code

(2) Flex based implementation

<div class="parent parent-box">
  <div class="child">Flex layout</div>
</div>
Copy the code

.parent-box {
  width: 200px;
  height: 100px;
  border: 1px solid purple;
}
/* Use the elastic box with the horizontal axis set to center */
.parent {
  display: flex;
  justify-content: center;
}
Copy the code

2. Center vertically

(1) Implementation based on box model

The parent element is certain, and the child element is a single line of inline text

<div class="parent parent-box">
  <div class="child">The parent element is certain, and the child element is a single line of inline text</div>
</div>
Copy the code

.parent-box {
  width: 260px;
  border: 1px solid purple;
}
/* Sets an arbitrary row height */
.parent {
  line-height: 100px;
}
Copy the code

The parent element is certain, and the child element is multi-line inline text

<div class="parent parent-box">
  <div class="child">You have to have a parent, and you have to have a child that's inline for many lines of text and you have to have a child that's inline for many lines of text</div>
</div>
Copy the code

.parent-box {
  width: 300px;
  border: 1px solid;
  margin: 0 20px;
}
/* The parent element sets line-height */
.parent {
  line-height: 300px;
}
/* Set the child element to an inline block level box, vertically centered, and set the row height to any value */
.child {
  display: inline-block;
  line-height: 1.5;
  vertical-align: middle;
}
Copy the code

The parent element is certain, and the child element is block-level element

<div class="parent">
  <div class="child child-box"></div>
</div>
Copy the code

.parent {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid purple;
}
.child-box {
  width: 100px;
  height: 100px;
  border: 1px solid purple;
}
/* margin equalizes the remaining space */
.child {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
Copy the code

(2) Flex based implementation

<div class="parent parent-box">
  <div class="child"></div>
</div>
Copy the code

.parent-box {
  width: 300px;
  height: 300px;
  border: 1px solid purple;
}

.parent {
  display: flex;
  align-items: center;
}

.child {
  width: 100px;
  height: 100px;
  border: 1px solid purple;
}
Copy the code

Two, single column layout

1. Header, Content, and footer are browser widths

Scheme 1: Calculate the height of the middle column

<body class="layout">
  <div class="header">The head</div>
  <div class="content">content</div>
  <div class="footer">The tail</div>
</body>
Copy the code

.layout {
  margin: 0 auto;
  height: 100vh;
}

.header..footer {
  height: 40px;
  background: #009cff;
}

.content {
  height: calc(100vh - 80px);
}
Copy the code

Scenario 2: Flex layout

.layout {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  height: 100vh;
}

.header..footer {
  height: 40px;
  background: #009cff;
}

.content {
  flex: 1;
}
Copy the code

2. The width of header and footer is the width of the browser, and the width of content is smaller than the width of the browser

<body class="layout">
  <div class="header">The head</div>
  <div class="content">content</div>
  <div class="footer">The tail</div>
</body>
Copy the code

.layout {
  margin: 0;
  height: 100vh;
}

.header..footer {
  height: 40px;
  background: #009cff;
}

.content {
  width: 80%;
  height: calc(100vh - 80px);
  background: #eee;
  margin: 0 auto;
}
Copy the code

Another option is to refer to the previous demo

Three, three column layout

1. Implementation based on box model

float + margin

The left and right columns are written first, and the middle column is written last. Set a floating width for the left and right columns, and set the left and right columns to the width of the left and right columns.

<body class="layout">
  <div class="sub">sub</div>
  <div class="extra">extra</div>
  <div class="main">main</div>
</body>
Copy the code

.layout {
  height: 100vh;
  margin: 0;
}

.sub {
  float: left;
  width: 20%;
  height: 100px;
  background: #009cff;
}

.extra {
  float: right;
  width: 10%;
  height: 200px;
  background: #009cff;
}

.main {
  margin-left: 20%;
  margin-right: 10%;
  height: 100%;
  background: #dff;
}
Copy the code

position + margin

Margin-left and margin-right of the middle elements correspond to the width of the left and right elements.

<body class="layout">
  <div class="sub">left</div>
  <div class="main">main</div>
  <div class="extra">right</div>
</body>
Copy the code

.layout {
  min-height: 100vh;
  margin: 0;
}

.sub..extra {
  position: absolute;
  top: 0;
  height: 100%;
  background: rgb(56.165.238);
}
.sub {
  left: 0;
  width: 10%;
}

.extra {
  right: 0;
  width: 20%;
}

.main {
  margin-left: 10%;
  margin-right: 20%;
}
Copy the code

All of the above implementations have intermediate columns either in the middle or at the back, which is not conducive to SEO and rendering priority for the main content. What if we want to render the main content first? The DOM Tree parses from the top down, so we need to bring Main up front, and we have the following layout scheme.

2. Enhanced three-column layout based on the box model

Twin wing layout

Float +margin: float+margin: float+margin: float+margin: float+margin The essence of the layout scheme is that the left column and middle column float left, right column float right, left column set margin: -100%, pull the column back to its original position, right column set margin to negative its width, back to the previous row. The width of main is set to the width of the container, and the left and right of the child element margin is set to the width of the left and right columns.

<body class="layout">
  <div class="main">
    <div class="content"></div>
  </div>
  <div class="left"></div>
  <div class="right"></div>
</body>
Copy the code

.layout {
  min-height: 100vh;
  margin: 0;
}
.left {
  float: left;
  width: 200px;
  height: 100vh;
  margin-left: -100%;
  background-color: antiquewhite;
}
.right {
  float: right;
  width: 200px;
  height: 200px;
  margin-left: -200px;
  background-color: aquamarine;
}
.main {
  width: 100%;
  float: left;
}
.content {
  height: 100vh;
  margin-left: 200px;
  margin-right: 200px;
  background-color: bisque;
}
Copy the code

The holy grail layout

The grail layout has less nesting of elements than the twin wings layout. The main essence is that all columns are set to float left and left and right columns to position: relative, with offset values for each direction. The parent element sets the left and right margins to the width of the left and right columns.

<body class="layout">
  <div class="main">content</div>
  <div class="left">left</div>
  <div class="right">right</div>
</body>
Copy the code

.layout {
  min-height: 100vh;
  margin: 0;
  margin-left: 300px;
  margin-right: 200px;
}
.left {
  float: left;
  position: relative;
  margin-left: -100%;
  left: -300px;
  width: 300px;
  height: 100vh;
  background-color: antiquewhite;
}
.right {
  float: left;
  position: relative;
  right: -200px;
  width: 200px;
  height: 200px;
  margin-left: -200px;
  background-color: aquamarine;
}
.main {
  float: left;
  width: 100%;
  height: 100vh;
  background-color: bisque;
}
Copy the code

3. Three column layout based on Flex

<body class="layout">
  <div class="main">Main interior column width adaptive</div>
  <aside class="left">The sidebar width is fixed</aside>
  <aside class="right">The sidebar width is fixed</aside>
</body>
Copy the code

.layout {
  display: flex;
  height: 100vh;
  margin: 0;
}

.main {
  flex: 1;
  background: #aaa;
}

.left..right {
  height: 100%;
}
.left {
  order: -1;
  width: 10%;
  background: #009cff;
}

.right {
  width: 20%;
  background: orange;
}
Copy the code

Original article, first published in personal blog, reproduced please indicate the source