Horizontal and vertical center

/* Public code */
<div class="wp">
  <div class="box size">123123</div>
</div>
Copy the code

Fixed width and height of the center element

Absolute + negative margin

.wp {
  border: 1px solid red;
  width: 300px;
  height: 300px;
  position: relative;
}
.box {
  background: green;    
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
}
Copy the code

absolute + margin auto

.wp {
  border: 1px solid red;
  width: 300px;
  height: 300px;
  position: relative;
}
.box {
  background: green;    
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
Copy the code

absolute + calc

.wp {
  border: 1px solid red;
  width: 300px;
  height: 300px;
  position: relative;
}
.box {
  background: green;    
  width: 100px;
  height: 100px;
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
}
Copy the code

Center elements vary in width and height

absolute + transform

.wp {
  border: 1px solid red;
  width: 300px;
  height: 300px;
  position: relative;
}
.box {
  background: green; 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
Copy the code

line-height + height

.wp {
  border: 1px solid red;
  width: 300px;
  height: 300px;
  line-height: 300px;  /* Line height is the same as height */
  text-align: center;
  font-size: 0;   /* Eliminate the ghost blank node, near center bug*/
}
.box {
  background: green; 
  display: inline-block;  /* If the element is a block level, it needs to be changed to inline or inline block level */
  vertical-align: middle;
  font-size: 16px;
  line-height: initial; /* Default value */
  text-align: left; /* Correct the text */
}
Copy the code

inline-block

.wp {
  border: 1px solid red;
  width: 300px;
  height: 300px;
  position: relative;
  display: inline-block;
  white-space: nowrap;
  text-align: center;
}
.wp::after {
content:' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.box {
  background: green; 
  display: inline-block;  /* If the element is a block level, it needs to be changed to inline or inline block level */
  vertical-align: middle;
}
Copy the code

The contents of a table Tabel cell are naturally centered vertically, so you need to add a horizontally centered attribute. This method is too redundant

<table>
    <tbody>
        <tr>
            <td class="wp">
                <div class="box">123123</div>
            </td>
        </tr>
    </tbody>
</table>
// css
.wp {
    text-align: center;
}
.box {
    display: inline-block;
}
Copy the code

Table-cell: a new table attribute in the CSS, which can turn common elements into table elements. This method has the same principle as table, but with less redundant code and good compatibility

.wp {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    border: 1px solid red;
    width: 300px;
    height: 300px;
}
.box {
    background: green; 
    display: inline-block;
}
Copy the code

Flex: Pay attention to compatibility

.wp {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid red;
    width: 300px;
    height: 300px;
}
.box {
    background: green; 
}
Copy the code

Grid: A grid layout with very little code, but less compatibility than Flex

.wp {
    display: grid;
    border: 1px solid red;
    width: 300px;
    height: 300px;
}
.box {
    background: green; 
    align-self: center;
    justify-self: center;
}
Copy the code

Writing-mode: you can change the display direction of text. For example, you can change the display direction of text to vertical by writing-mode, combined with text-align

<div class="wp">
  <div class="wp-inner">
      <div class="box">123123</div>
  </div>
</div>

wp {
    writing-mode: vertical-lr;
    text-align: center;
    border: 1px solid red;
    width: 300px;
    height: 300px;
}
.wp-inner {
    writing-mode: horizontal-tb;
    display: inline-block;
    width: 100%;
}
.box {
    background: green; 
    display: inline-block;
}
Copy the code

The PC does not meet compatibility requirements. Flex is recommended. Flex is recommended for mobile applications. For flex compatibility solutions, see Flex Layout on Mobile

Two columns of the layout

The left column is constant width, and the right column is adaptive

float + margin

<div class="left"</div><div class="right">The right column is adaptive</div>

.left {
    background-color: red;
    float: left;
    width: 100px;
    height: 500px;
}
.right {
    background-color: yellow;
    height: 500px;
    margin-left: 100px; /* is greater than or equal to the width of left */
}
Copy the code

float + margin(fix)

<div class="left"</div><div class="right-fix">
      <div class="right">The right column is adaptive</div>
</div>

.left {
    background-color: red;
    float: left;
    width: 100px;
    height: 500px;
}
.right-fix {
    float: right;
    width: 100%;
    margin-left: -100px; /* A positive value is greater than or equal to the width of the left to display on the same line */
}
.right {
    background-color: yellow;
    height: 500px;
    margin-left: 100px; /* is greater than or equal to the width of left */
}
Copy the code

float + overflow

Advantages: simple code, easy to understand, no need to pay attention to the width of the fixed width, using BFC to achieve adaptive effect
Disadvantages: Floating from the document flow, need to manually clear the floating, otherwise prone to high collapse; Does not support ie6

<div class="left"</div><div class="right">The right column is adaptive</div>

.left {
    background-color: red;
    float: left;
    width: 100px;
    height: 500px;
}
.right {
    background-color: yellow;
    height: 500px;
    overflow: hidden; /* Trigger BFC to achieve adaptive */
}
Copy the code

Absolute positioning

<div class="parent">
  <div class="left">The left column width</div>
  <div class="right">The right column is adaptive</div>
</div>

.parent {
    position: relative;  /* The child must be the father */
}
.left {
    background-color: red;
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 500px;
}
.right {
    background-color: yellow;
    height: 500px;
    position: absolute;
    top: 0;
    left: 100px;  /* is greater than or equal to the left width */
    right: 0;
}
Copy the code

flex

<div class="parent">
  <div class="left">The left column width</div>
  <div class="right">The right column is adaptive</div>
</div>

.parent {
    width: 100%;
    height: 500px;
    display: flex;
}
.left {
    width: 100px;
    background-color: red;
}
.right {
    background-color: yellow;
    flex: 1; /* Equalizes the remaining space of the parent element */
}
Copy the code

table

Advantages: simple code, easy to understand, no need to pay attention to the width of the fixed width, the use of automatic cell allocation to achieve self-adaptive effect
Disadvantages: margin failure; Setting interval is troublesome; Does not support ie8 –

<div class="parent">
  <div class="left">The left column width</div>
  <div class="right">The right column is adaptive</div>
</div>

.parent {
    width: 100%;
    height: 500px;
    display: table;
}
.left, .right {
    display: table-cell;  /* Automatically allocates the width using cells */
}
.left {
    width: 100px;
    background-color: red;
}
.right {
    background-color: yellow;
}
Copy the code

Grid

<div class="parent">
  <div class="left">The left column width</div>
  <div class="right">The right column is adaptive</div>
</div>

.parent {
    width: 100%;
    height: 500px;
    display: grid;
    grid-template-columns: 100px auto;  /* Set auto to 1fr */
}
.left {
    background-color: red;
}
.right {
    background-color: yellow;
}
Copy the code

The left column is adaptive and the right column is fixed width

float + margin

<div class="parent">
  <div class="left">The left column is adaptive</div>
  <div class="right">Right column width</div>
</div>

.parent {
    padding-left: 100px;  /* Offset left margin-left to achieve parent level center */
}
.left {
      width: 100%;
      height: 500px;
      float: left;
      margin-left: -100px; /* Positive value is equal to the width of right */
      background-color: #f00;
}
.right {
      height: 500px;
      width: 100px;
      float: right;
      background-color: #0f0;
}
Copy the code

float + overflow

<div class="parent">
  <div class="right">Right column width</div>
  <div class="left">The left column is adaptive</div><! </div>. Left {background-color: #f00; overflow: hidden;/ * trigger landing * /
    height: 500px;
}
.right {
    height: 500px;
    width: 100px;
    float: right;
    background-color: #0f0;
}
Copy the code

Other methods such as absolute positioning, Flex, Table, and Grid are the opposite

One column is of variable width, one column is adaptive (box width changes as content increases or decreases, the other box ADAPTS)

Before the change

After the change

float + overflow

<div class="parent">
  <div class="left">The left column may not be wide</div>
  <div class="right">The right column is adaptive</div>
</div>

.left {
    margin-right: 10px;
    float: left;  /* Set float only, not width */
    height: 500px;
    background-color: #f00;
}
.right {
    overflow: hidden;  /* Trigger BFC */
    height: 500px;
    background-color: #0f0;
}
Copy the code

flex

<div class="parent">
  <div class="left">The left column may not be wide</div>
  <div class="right">The right column is adaptive</div>
</div>

.parent{
      display: flex;
}
.left { /* No width */
      margin-right: 10px;
      height: 500px;
      background-color: #f00;
}
.right {
      height: 500px;
      background-color: #0f0;
      flex: 1;  /* Split the remaining part of the parent */
}
Copy the code

Grid

<div class="parent">
  <div class="left">The left column may not be wide</div>
  <div class="right">The right column is adaptive</div>
</div>

.parent{
      display: grid;
      grid-template-columns: auto 1fr;  /* auto = 1fr; /* auto = 1fr
}
.left {
      margin-right: 10px;
      height: 500px;
      background-color: red;
}
.right {
      height: 500px;
}
Copy the code

Three column layout

Two columns are constant width and one is adaptive

float + margin

<div class="parent">
  <div class="left">The left column width</div>
  <div class="center">In the middle of fixed width</div>
  <div class="right">The right column is adaptive</div>
</div>

.parent {
      min-width: 310px; /* 100+10+200, in case of insufficient width, child element newline */
}
.left {
      margin-right: 10px;  /* Left and center space */
      float: left;
      width: 100px;
      height: 500px;
      background-color: red;
}
.center {
      float: left;
      width: 200px;
      height: 500px;
      background-color: green;
}
.right {
    margin-left: 320px;  /* is equal to the width of left and center plus the spacing, which is the spacing between right and center */
    height: 500px;
    background-color: #0f0;
}
Copy the code

float + overflow

<div class="parent">
  <div class="left">The left column width</div>
  <div class="center">In the middle of fixed width</div>
  <div class="right">The right column is adaptive</div>
</div>

.parent{
      min-width: 320px; /* 100+10+200+10, in case of insufficient width, child element newline */
}
.left {
      margin-right: 10px;  /* Left and center space */
      float: left;
      width: 100px;
      height: 500px;
      background-color: red;
}
.center {
      float: left;
      width: 200px;
      height: 500px;
      background-color: green;
      margin-right: 10px; /* Define the interval with right */
}
.right {
    overflow: hidden;  / * trigger landing * /
    height: 500px;
    background-color: yellow;
}
Copy the code

flex

<div class="parent">
  <div class="left">The left column width</div>
  <div class="center">In the middle of fixed width</div>
  <div class="right">The right column is adaptive</div>
</div>

.parent{
    height: 500px;
    display: flex;
}
.left {
      margin-right: 10px;  /* Left and center space */
      width: 100px;
      background-color: red;
}
.center {
      width: 200px;
      background-color: green;
      margin-right: 10px; /* Define the interval with right */
}
.right { 
    flex: 1;  /* Equalize the remaining parts of the parent to achieve adaptive */
    background-color: yellow;
}
Copy the code

table

<div class="parent">
  <div class="left">The left column width</div>
  <div class="center">In the middle of fixed width</div>
  <div class="right">The right column is adaptive</div>
</div>

.parent{
    width: 100%; 
    display: table;
    height: 520px; /* Cancels out the height effect of the 10*2 spacing */
    margin: -10px 0;  /* Cancels out the position effect of the upper and lower 10 */
    /* The spacing between the left and right sides is a bit larger
    border-spacing: 10px;  /* < span style = "box-sizing: border-box! Important; Set the spacing */
}
.left {
      display: table-cell;
      width: 100px;
      background-color: red;
}
.center {
      width: 200px;
      background-color: green;
      display: table-cell;
}
.right { 
    display: table-cell;
    background-color: yellow;
}
Copy the code

Grid

<div class="parent">
  <div class="left">The left column width</div>
  <div class="center">In the middle of fixed width</div>
  <div class="right">The right column is adaptive</div>
</div>

.parent{
    height: 500px;
    display: grid;
    grid-template-columns: 100px 200px auto; /* Set the width of the first and second columns, and the third column auto or 1fr*/
}
.left {
    margin-right: 10px;  / * / * spacing
    background-color: red;
}
.center {
    margin-right: 10px;  / * / * spacing
    background-color: green;
}
.right { 
    background-color: yellow;
}
Copy the code

Fixed width on both sides, adaptive in the middle

The holy grail layout

Using floating and relative positioning
Disadvantages: The Grail layout has a problem when shortening the browser width enough to make the middle child smaller than the left and right child, so be sure to set the minimum width for the entire container when using the Grail layout

<div class="header">header</div>
<div class="parent">
  <! --#center needs to come first -->
  <div class="center">Intermediate adaptive<hr>  <! -- Convenient observation principle -->
  </div>
  <div class="left">The left column width</div>
  <div class="right">Right column width</div>
</div>
<div class="footer">footer</div>.header, .footer { height: 60px; background-color: #ccc; } .parent { height: 300px; padding: 0 215px 0 115px; }. Parent div {height: < span style = "box-sizing: border-box; line-height: 20px; 300px } .left, .center, .right { position: relative; float: left; } .left { margin-left: -100%; /* left a line */ left: -115px; /* Font-size: 16px; background-color: red; width: 100px; } .center { width: 100%; /* Box-sizing: border-box; /* box-sizing: border-box; border: 1px solid #000; background-color: yellow; } .right { left: 215px; /* Adjust the right position relative to the position, greater than or equal to its width */ width: 200px; margin-left: -200px; /* make the right line */ background-color: green; }Copy the code

Twin wing layout

In order to solve the disadvantages of the holy cup layout, the middle part of the adaptive implementation of a nested div and no longer use the relative positioning

<div class="header">header</div>
<div class="parent">
  <! --#center needs to come first -->
  <div class="center">
    <div class="center_inner">Intermediate adaptive</div>
    <hr>  <! -- Convenient observation principle -->
  </div>
  <div class="left">The left column width</div>
  <div class="right">Right column width</div>
</div>
<div class="footer">footer</div>

.header, .footer {
    height: 60px;
    background-color: #ccc;
}

.parent, .parent div {
    height: 300px
}

.left, .center, .right {
    float: left;
}

.left {
    margin-left: -100%;  /*使 left 上去一行*/
    background-color: red;
    width: 100px;
}

.center {
    width: 100%;
    border: 1px solid #000;
    background-color: yellow;
}

.center_inner {
    height: 280px;
    border: 1px solid #000;
    margin: 0 220px 0 120px;  /*关键!!!左右边界等于左右盒子的宽度，多出来的为盒子间隔*/
}

.right {
    width: 200px;
    margin-left: -200px;  /*使 right 上去一行*/
    background-color: green;
}
Copy the code

flex

flex: flex-grow | flex-shrink | flex-basis; Respectively: space sufficient amplification ratio, space insufficient reduction ratio and the width value before calculating the remaining space

<div class="parent">
  <div class="left">The left column width</div>
  <div class="center">Intermediate adaptive</div>
  <div class="right">Right column width</div>
</div>

.parent {
    display: flex;
}

.parent div {
    height: 300px;
}

.left, .right {
    width: 200px;  /* flex: 0 0 200px; * /
}

.left {
    background-color: red;
}

.center {
    flex: 1;
    background-color: yellow;
}

.right {
    background-color: green;
}
Copy the code

position

Advantages: easy to understand, good compatibility
Disadvantages: need to manually calculate the width to determine the margin; Out of the document flow; The code is various

<div class="parent">
  <div class="left">The left column width</div>
  <div class="center">Intermediate adaptive</div>
  <div class="right">Right column width</div>
</div>

.parent {
    position: relative; /* The child must be the father */
}

.parent div {
    height: 300px;
}

.left, .right {
    width: 200px;  /* flex: 0 0 200px; * /
}

.left {
    position: absolute;
    top: 0;
    left: 0;
    background-color: red;
}

.center {
    margin-left: 200px; /* is greater than or equal to the width of the left or adds the same size padding-left*/ to the parent
    margin-right: 200px;  /* is greater than or equal to the width of the right or adds the same size padding-right*/ to the parent
    background-color: yellow;
}

.right {
    position: absolute;
    top: 0;
    right: 0;
    background-color: green;
}
Copy the code

table

Advantages: simple code, easy to understand;
Disadvantages: margin is invalid, the spacing between the two sides cannot be eliminated using the border-spacing table; Does not support ie8 –

<div class="parent">
  <div class="left">The left column width</div>
  <div class="center">Intermediate adaptive</div>
  <div class="right">Right column width</div>
</div>

.parent {
    width: 100%;
    height: 500px;
    display: table;
}

.left, .right {
    width: 200px;  /* flex: 0 0 200px; * /
}

.left {
    display: table-cell;
    background-color: red;
}

.center {
    display: table-cell;
    background-color: yellow;
}

.right {
    display: table-cell;
    background-color: green;
}
Copy the code

Grid

Grid is Microsoft’s web layout solution, supported by the latest versions of Safari, Chrome and Firefox. I feel Grid layout is more powerful than Flex layout, width and height can be controlled in both directions and Grid is easier to understand (but Grid support on mobile should not be as strong as Flex)

<div class="parent">
  <div class="left">The left column width</div>
  <div class="center">Intermediate adaptive</div>
  <div class="right">Right column width</div>
</div>

.parent {
    display: grid;
    grid-template-columns: 200px auto 200px;
    grid-template-rows: 100px
}

.left {
    background-color: red;
}

.center {
    background-color: yellow;
}

.right {
    background-color: green;
}
Copy the code

<div class="parent">
  <div class="header"></div>
  <div class="left">The left column width</div>
  <div class="center">Intermediate adaptive<hr />
    </div>
  <div class="right">Right column width</div>
  <div class="footer"></div>
</div>

.parent {
    height: 500px;
    display: grid;
    grid-template-columns: 100px auto 200px; /* Set 3 columns */
    grid-template-rows: 60px auto 60px; /* Set 3 lines */
    /* Set the grid area distribution */
    grid-template-areas:
      "header header header"
      "leftside main rightside"
      "footer footer footer";
}

.header,.footer {
    background-color: #ccc;
}

.header {
    grid-area: header; /* Specify which grid region */
}

.left {
    grid-area: leftside;
    background-color: red;
}

.center {
    grid-area: main; /* Specify which grid region */
    margin: 0 15px; /* Set the interval */
    border: 1px solid #000;
    background-color: yellow;
}

.right {
    grid-area: rightside; /* Specify which grid region */
    background-color: green;
}

.footer {
    grid-area: footer; /* Specify which grid region */
}
Copy the code

The range of calc

CSS3 provides the calC function to achieve the width height set dynamic value, support + – * / four operations, pay attention to the operator to leave a space on both sides of the setting otherwise invalid
You also need to set the float to display the three elements side by side

<div class="parent">
    <div class="left">The left column width</div>
    <div class="center">Intermediate adaptive</div>
    <div class="right">Right column width</div>
</div>

.parent div {
    float: left;
    height: 300px;
}

.left, .right {
    width: 200px;
    background-color: red;
}

.center {
    width: calc(100% - 400px);
    background-color: green;
}
Copy the code

Multi-column layouts

Multi-column uniform width layout

float

Advantages: simple code, easy to understand; Good compatibility
Disadvantages: Need to manually clear the float, otherwise it is easy to produce height collapse

<div class="parent">
  <div class="column">Equi-width equi-width equi-width equi-width equi-width</div>
  <div class="column">Equi-width equi-width equi-width equi-width equi-width</div>
  <div class="column">Equi-width equi-width equi-width equi-width equi-width</div>
  <div class="column">Equi-width equi-width equi-width equi-width equi-width</div>
</div>

.column {
    width: 25%;
    float: left;
    box-sizing: border-box;
    border: 1px solid #000;
    background-clip: content-box; /* The background color starts from the content for easy viewing */
    height: 500px;
}

.column:nth-child(odd) {
      background-color: red;
}

.column:nth-child(even) {
      background-color: green;
}
Copy the code

flex

<div class="parent">
  <div class="column">Equi-width equi-width equi-width equi-width equi-width</div>
  <div class="column">Equi-width equi-width equi-width equi-width equi-width</div>
  <div class="column">Equi-width equi-width equi-width equi-width equi-width</div>
  <div class="column">Equi-width equi-width equi-width equi-width equi-width</div>
</div>

.parent {
    margin-left: -15px;  /* Makes the content look centered */
    height: 500px;
    display: flex;
}

.column {
    flex: 1; /* Split parent*/
    margin-left: 15px; /* Set the spacing */
}

.column:nth-child(odd) {
      background-color: red;
} 

.column:nth-child(even) {
      background-color: green;
}
Copy the code

table

<div class="parent">
  <div class="column">Equi-width equi-width equi-width equi-width equi-width</div>
  <div class="column">Equi-width equi-width equi-width equi-width equi-width</div>
  <div class="column">Equi-width equi-width equi-width equi-width equi-width</div>
  <div class="column">Equi-width equi-width equi-width equi-width equi-width</div>
</div>

.parent {
    height: 500px; 
    display: table; 
    margin: -20px 0;  /* Offset the 20*2 spacing */
    /* The distance between the two sides of the page is large. Use the padding as a child element to avoid this problem
    border-spacing: 20px;  /* Set the spacing */
}

.column {
    display: table-cell;
}

.column:nth-child(odd) {
      background-color: red;
}

.column:nth-child(even) {
      background-color: green;
}
Copy the code

Grid

<div class="parent">
  <div class="column">Equi-width equi-width equi-width equi-width equi-width</div>
  <div class="column">Equi-width equi-width equi-width equi-width equi-width</div>
  <div class="column">Equi-width equi-width equi-width equi-width equi-width</div>
  <div class="column">Equi-width equi-width equi-width equi-width equi-width</div>
</div>

.parent {
    height: 500px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);  /*4 is the number of columns */
}

.column:nth-child(odd) {
      background-color: red;
}

.column:nth-child(even) {
      background-color: green;
}
Copy the code

Nine grid layout

table

<div class="parent">
  <div class="row">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
  </div>
  <div class="row">
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
  </div>
  <div class="row">
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
  </div>
</div>

.parent {
    width: 1200px;
    height: 500px;
    margin: 0 auto;
    display: table;
}

.row {
    display: table-row;
}

.item {
    border: 1px solid #000;
    display: table-cell;
}
Copy the code

flex

<div class="parent">
  <div class="row">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
  </div>
  <div class="row">
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
  </div>
  <div class="row">
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
  </div>
</div>

.parent {
    width: 1200px;
    height: 500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    flex: 1;
}

.item {
    flex: 1;
    border: 1px solid #000;
}
Copy the code

Grid

The CSS Grid is very powerful and can implement a wide variety of three-dimensional layouts

<div class="parent">
  <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>

.parent {
    width: 1200px;
    height: 500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* is the same as 1fr 1fr 1fr, which is a repeated combination */
    grid-template-rows: repeat(3, 1fr);  /* is the same as 1fr 1fr 1fr, which is a repeated combination */
}

.item {
    border: 1px solid #000;
}
Copy the code

Grid system

Advantages: simple code, easy to understand; Improve the fluidity of page content, can adapt to a variety of devices

Less

/* Generate a grid system */
@media screen and (max-width: 768px){
  .generate-columns(12);     /* Set the number of generated columns */
  .generate-columns(@n, @i: 1) when (@i <= @n) {
    .column-xs-@{i} {
      width: (@i * 100% / @n);
    }
    .generate-columns(@n, (@i+1));
  }
}
@media screen and (min-width: 768px){
  .generate-columns(12);    /* Set the number of generated columns */
  .generate-columns(@n, @i: 1) when (@i <= @n) {
    .column-sm-@{i} {
      width: (@i * 100% / @n);
    }
    .generate-columns(@n, (@i+1));
  }
}
div[class^="column-xs-"] {float: left;
}
div[class^="column-sm-"] {float: left;
}
Copy the code

Compiled CSS code

@media screen and (max-width: 768px) {
  .column-xs-1 {  width: 8.33333333%;  }
  .column-xs-2 {  width: 16.66666667%;  }
  .column-xs-3 {  width: 25%;  }
  .column-xs-4 {  width: 33.33333333%;  }
  .column-xs-5 {  width: 41.66666667%;  }
  .column-xs-6 {  width: 50%;  }
  .column-xs-7 {  width: 58.33333333%;  }
  .column-xs-8 {  width: 66.66666667%;  }
  .column-xs-9 {  width: 75%;  }
  .column-xs-10 {  width: 83.33333333%;  }
  .column-xs-11 {  width: 91.66666667%;  }
  .column-xs-12 {  width: 100%;  }
}
@media screen and (min-width: 768px) {
  .column-sm-1 {  width: 8.33333333%;  }
  .column-sm-2 {  width: 16.66666667%;  }
  .column-sm-3 {  width: 25%;  }
  .column-sm-4 {  width: 33.33333333%;  }
  .column-sm-5 {  width: 41.66666667%;  }
  .column-sm-6 {  width: 50%;  }
  .column-sm-7 {  width: 58.33333333%;  }
  .column-sm-8 {  width: 66.66666667%;  }
  .column-sm-9 {  width: 75%;  }
  .column-sm-10 {  width: 83.33333333%;  }
  .column-sm-11 {  width: 91.66666667%;  }  
  .column-sm-12 {  width: 100%;  }
}
div[class^="column-xs-"] {float: left;
}
div[class^="column-sm-"] {float: left;
}
Copy the code

The size is not fixed and the image is centered horizontally and vertically

See vertical and horizontal centering of Images of variable size and Multi-line text

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.

Common CSS layouts

Horizontal and vertical center

Fixed width and height of the center element

Center elements vary in width and height

Two columns of the layout

The left column is constant width, and the right column is adaptive

The left column is adaptive and the right column is fixed width

One column is of variable width, one column is adaptive (box width changes as content increases or decreases, the other box ADAPTS)

Three column layout

Two columns are constant width and one is adaptive

Fixed width on both sides, adaptive in the middle

Multi-column layouts

Multi-column uniform width layout

Nine grid layout

Grid system

The size is not fixed and the image is centered horizontally and vertically

Common CSS layouts

Horizontal and vertical center

Fixed width and height of the center element

Center elements vary in width and height

Two columns of the layout

The left column is constant width, and the right column is adaptive

The left column is adaptive and the right column is fixed width

One column is of variable width, one column is adaptive (box width changes as content increases or decreases, the other box ADAPTS)

Three column layout

Two columns are constant width and one is adaptive

Fixed width on both sides, adaptive in the middle

Multi-column layouts

Multi-column uniform width layout

Nine grid layout

Grid system

The size is not fixed and the image is centered horizontally and vertically

Related Posts

React Interview will be Day9

Node.js static server is new

An overview of JS stacks, stacks, execution stacks and Eventloops