Common layout

One 、 Static layout （Static Layout）

Traditional web Design No matter how big the browser is , The layout of the web page is arranged according to the layout of the code written at that time ;

• Block-level elements ： Each block level element will start another line under the previous element , They'll be set up margin Separate . Block level elements are vertically organized .
• Inline elements ： Not another line , As long as there is enough space within the width of its parent block level element , They are arranged on the same line as other inline elements . If there's not enough space , The overflow text or element will be transferred to a new line

1. advantage It is generally used css2 The way I wrote it before , There is no browser compatibility . The layout is simple .

2. shortcoming Mobile and pc The client cannot use the same page , The layout of the two pages is inconsistent , The mobile terminal needs to design another layout by itself and present it with different domain names .

Two 、 Elastic layout （Flexible Box）

Flexible layout is CSS3 The introduction of a powerful layout ,Flex yes Flexible Box Abbreviation , Meaning for ” Elastic layout ”, To provide maximum flexibility for box models .

Any container can be specified as Flex Layout

.box{
    display: flex;
}
 Copy code 

Inline elements can also be used Flex Layout

.box{
    display: inline-flex;
}
 Copy code 

flex-direction attribute

Control the arrangement order of child elements

• row（ The default value is ）： Flexible items will be displayed horizontally , Just like a line .
• row-reverse： And row identical , But in reverse order .
• column： Flexible items will be displayed vertically , Just like a column .
• column-reverse： And column identical , But in reverse order .

<div id="big">
  <div id="main">
    <div style="background-color:coral;">A</div>
    <div style="background-color:lightblue;">B</div>
    <div style="background-color:khaki;">C</div>
    <div style="background-color:pink;">D</div>
    <div style="background-color:lightgrey;">E</div>
    <div style="background-color:lightgreen;">F</div>
  </div>
</div>
 Copy code 

#main {
    display: flex;
    flex-direction::row|row-reverse|column|column-reverse;
}
 Copy code 

row

Running effect ：

row-reverse

Running effect ：

column

Running effect ：

column-reverse

Running effect ：

justify-content attribute

How to align the child elements on the main axis

• flex-start（ The default value is ）： Align left
• flex-end： Right alignment
• center： The project is in the center of the container .
• space-between： The item is in a container with Spaces between the rows .
• space-around： Items precede each row 、 Between 、 Empty containers after that .

<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
</div>
 Copy code 

#main {
    width: 400px;
    height: 150px;
    border: 1px solid #c3c3c3;
    display: flex;
    justify-content: flex-start|flex-end|center|space-between|space-around;
}
 Copy code 

flex-start

Running effect ：

flex-end

Running effect ：

center

Running effect ：

space-between

Running effect

space-around

Running effect ：

align-items attribute

How to align the child elements on the horizontal axis

• flex-start： The element is at the beginning of the container .
• flex-end： The element is at the end of the container .
• center： The element is in the center of the container .
• baseline: The element is on the baseline of the container . For example, the inner axis of the elastic box element is the same as the side axis , Then the value is equal to 'flex-start' equivalent . In other cases , This value will participate in baseline alignment .
• stretch（ The default value is ）： If the project is not set to height or set to auto, Will fill the entire container .

<div id="main">
  <div style="background-color:coral;">RED</div>
  <div style="background-color:lightblue;">BLUE</div>
  <div style="background-color:lightgreen;">Green div with more content.</div>
</div>
 Copy code 

#main {
    width: 220px;
    height: 300px;
    border: 1px solid black;
    display: flex;
    align-items: center;
}
 Copy code 

flex-start

Running effect ：

flex-end

Running effect ：

center

Running effect ：

baseline

Running effect ：

stretch

The operation effect is ：

summary ：CSS Center all methods horizontally and vertically ：

Full note link