Review the two front end layouts
If not Flex layout and Grid layout visible ruan teacher’s tutorial, super detailed, nothing to turn over a turn, maybe more harvest!!
Click me to view: Ruan Teacher Flex layout tutorial
Point ME to view: Ruan teacher Grid layout
1. Flex Flex layout
Click me to view: Ruan Teacher Flex layout tutorial
1-1, Flex container Properties (common)
- flex-direction
- justify-content
- align-items
- align-content
- flex-wrap
- flex-shrink
We can use the container properties above to achieve some common effects
1-1, horizontal arrangement; vertically
Use flex-direction to control the alignment direction
flex-direction: column; // vertical flex-direction: row; / / levelCopy the code
<! -- HTML -->
<div class="box">
<div class="left"> I am the left box </div>
<div class="right"> I am the right box </div>
</div>
<! -- CSS -->
body {
margin: 0;
padding: 0;
}
.box {
width: 100%;
display: flex;
flex-direction: column; // Align vertically
//flex-direction: row; // horizontal arrangement
padding: 30px;
box-sizing: border-box;
}
.right,
.left {
height: 60px;
width: 100%;
border: 1px solid #f90;
}
Copy the code1-2, vertically centered arrangement
display: flex; justify-content: center; align-items: center; Copy the code
<! -- HTML -->
<div class="box">
<div class="left"> I am the left box </div>
<div class="right"> I am the right box </div>
</div>
<! -- CSS -->
body {
margin: 0;
padding: 0;
}
.box {
width: 100%;
display: flex;
flex-direction: column; // Array direction
padding: 30px;
box-sizing: border-box;
}
.right,
.left {
display: flex;
justify-content: center;
align-items: center;
height: 60px;
width: 100%;
border: 1px solid #f90;
}
Copy the code2, Grid layout
Point ME to view: Ruan teacher Grid layout
2-1. Container properties
- grid-template-columns
- grid-template-rows
- grid-gap
- justify-content
- align-items
- grid-column-start
- grid-row-start
We can use the container properties above to achieve some common effects
2-2, the realization of the nine grid
grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px ; grid-gap: 15px; Copy the code
Once the container has specified the grid layout, the next step is to partition the rows and columns. The grid-template-columns attribute defines the column width of each column, and the grid-template-rows attribute defines the row height of each row. Grid-gap User sets the row spacing and column spacing
<! -- HTML -->
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
/* CSS */
body {
margin: 0;
padding: 0;
}
.container{
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px ;
grid-gap: 15px;
}
.container > div{
background: #f90;
color: #fff;
font-size: 32px;
font-weight: bold;
}
Copy the code2-3. Presentation form of cards
Grid-column-start and grid-row-start are mainly used.
grid-column-start: span 2; grid-row-start: span 2; Copy the code
Span keyword, which means “span”, i.e. how many grids are crossed between the left and right (top and bottom) borders.
<! -- HTML -->
<div class="container">
<div id="item-1">1</div>
<div>2</div>
<div id="item-3">3</div>
<div>4</div>
<div>5</div>
</div>
/* CSS */
body {
margin: 0;
padding: 0;
}
.container{
display: grid;
grid-template-columns: 150px 150px 150px;
grid-template-rows: 80px 80px 80px ;
grid-gap: 1px;
}
.container > div{
background: #f90;
color: #fff;
font-size: 32px;
font-weight: bold;
}
#item-1{
grid-column-start: span 2;
grid-row-start: span 2;
}
#item-3{
grid-row-start: span 2;
}
Copy the code