current position:Home>[youth training camp] - CSS layout

[youth training camp] - CSS layout

2022-01-26 23:58:48 Li Xinyi

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 :

image (1).png

row-reverse

Running effect :

image (2).png

column

Running effect :

image (3).png

column-reverse

Running effect :

image (4).png

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 .

image (5).png

<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 :

image (6).png

flex-end

Running effect :

image (7).png

center

Running effect :

image (8).png

space-between

Running effect

image (9).png

space-around

Running effect :

image (10).png

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 .

image (11).png

<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 :

image (12).png

flex-end

Running effect :

image (13).png

center

Running effect :

image (14).png

baseline

Running effect :

image (15).png

stretch

The operation effect is :

image (16).png

summary :CSS Center all methods horizontally and vertically :

 Element centering method summary .png

Full note link

copyright notice
author[Li Xinyi],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201262358451749.html

Random recommended