This is the fifth day of my participation in the More text Challenge. For details, see more text Challenge

The foregoing

Today, I saw a CSS problem that said how many ways can you implement CSS with fixed width left and right, adaptive layout in the middle? Just did not write the layout for a long time, today through a few layout ways to consolidate, deepen the impression.

I used the Holy Grail layout, the wings layout, the Flex layout, and the Absolute positioning layout

The holy grail layout

Holy Grail layout is a three-column web layout with fixed left and right columns and an adaptive border in the middle column

Features: Float floating three-column layout, middle width adaptive, both sides fixed width; The middle element should be at the beginning of the HTML structure;

The HTML code is as follows:

<div class="container">
    <! -- Mian to let go of the head -->
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>

  <style>
    .container {
      min-width: 600px;
      overflow: hidden;
      padding: 0 200px;
      box-sizing: border-box;
    }

    .left..main..right {
      float: left;
      min-height: 100px;
    }

    .left {
      position: relative;
      left: -200px;
      margin-left: -100%;
      width: 200px;
      background: green;
    }

    .main {
      width: 100%;
      background: blue;
    }

    .right {
      position: relative;
      right: -200px;
      margin-left: -200px;
      width: 200px;
      background: red;
    }
  </style>
Copy the code

The effect is as follows:

Resolution:

  • Here,.mainUsing thewidth:100%, which may lead to.leftand.rightIt’s going to break lines, so.leftthemargin-left:100%(Margin-left Percentage is relative to the parent element),.rightthemargin-left: -200px(200px is exactly its width) on the same line
  • .containerthepaddingJust with.leftand.rightOf the same length, convenient.leftTo the left,.rightTo the right, move the length of its width relative to the position to avoid occlusion.main
  • then.containerYou need to set upmin-widthBecause the.leftthemargin-leftis100%As opposed toThe parent elementIf the.containerWidth becomes smaller, then.mainThe width is going to be smaller if it’s less than.leftIs not enough to sum.mainIn a row,.leftWill wrap

Here is to speak of their own understanding, coarse words a bit, if you do not understand, they can copy the code, to see their own, will understand deeper.

Double wing layout

Twin-wing layout is also a three-column web layout with fixed left and right columns and adaptive border of the middle column. It also solves problems similar to the Holy Cup layout. It uses float in all three columns, plus negative margin in both left and right columns, and forms a three-column layout alongside div in the middle column. The main difference is in the way to solve the “middle column DIV content is not blocked”.

The HTML code is as follows (note ⚠ : HTML structure changed to include div.content)

  <div class="container">
    <div class="main">
      <div class="content">main</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
  <style>
    .main {
      width: 100%;
      background: blue;
    }

    .content {
      margin: 0 200px;
    }

    .left..main..right {
      float: left;
      min-height: 100px;
    }

    .left {
      margin-left: -100%;
      width: 200px;
      background: green;
    }

    .right {
      margin-left: -200px;
      width: 200px;
      background: red;
    }
  </style>
Copy the code

Main differences with grail layout:

  • .mainThere are more children insidediv.content
  • Child elementsdiv.contentIn the usemargin-leftandmargin-rightTo promise not to be.leftand.rightKeep out
  • .left..rightNo need to use positioning to avoid occlusion.main

Flex layout

  <div class="container">
    <! -- left main right -->
    <div class="left">left</div>
    <div class="main">main</div>
    <div class="right">right</div>
  </div>
  <style>
    .container {
      display: flex;
      min-height: 100px;
    }

    .left {
      flex-basis: 200px;
      background: green;
    }

    .main {
      flex: auto;
      background: blue;
    }

    .right {
      flex-basis: 200px;
      background: red;
    }
  </style>
Copy the code

Resolution:

  • Flex layout, flexible layout, allows easy, complete and responsive implementation of various page layouts, the preferred solution for future layouts (of course, if you are considering IE, say another word)
  • .mainuseflexProperties,.left 和.rightuseflex-basisattribute
  • flexAttributes areflex-grow(If there is free space, whether to expand),flex-shrink(If there is not enough space, whether compression) andflex-basisShort for (the size of its own space), default is0 1 auto. The last two attributes are optional
  • Flex propertiesThere are two shortcut values:auto (1 1 auto) 和 none (0 0 auto)In this case, it isautoIf there is enough space, it expands. If there is not enough space, it compresses

Absolute layout

The position of an element is independent of the document flow and therefore does not take up space. This is different from relative positioning, which is actually considered part of the normal stream positioning model.

  <div class="container">
  <! -- left main right -->
    <div class="left">left</div>
    <div class="main">main</div>
    <div class="right">right</div>
  </div>
  <style>
    .container {
      position: relative;
    }

    .left..main..right {
      min-height: 100px;
    }

    .left {
      position: absolute;
      left: 0;
      top: 0;
      width: 200px;
      background: green;
    }

    .main {
      margin: 0 200px 0 200px;
      background: blue;
    }

    .right {
      position: absolute;
      right: 0;
      top: 0;
      width: 200px;
      background: red;
    }
  </style>
Copy the code

Resolution:

  • .mainusemarginTo avoid being.leftand.rightKeep out
  • .leftand.rightuseabsoluteLocation, does not occupy the document stream

Conclusion:

Flex layout > Absolute layout = Double wing layout > Holy Grail Layout Flex layout is preferred, because this is the future layout of the preferred solution, properties easy to set, practical, easy to understand; The Absolute layout and twin-wing layout are moderate, the Grail layout is hard to understand (to me); Everyone can understand, is the so-called more skills do not pressure the body.