flex property exercise
1. The main axis direction (here the horizontal direction is the main axis)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性盒子样式——水平</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 700px;
height: 400px;
border: 10px yellow solid;
/* 将ul设置为弹性容器 */
display: flex;
/* 设置弹性容器的排列方式 */
margin: 50px;
flex-direction: row;
flex-wrap: wrap;
/* 在主轴上使用 */
justify-content: space-evenly;
/* 画中线 */
position: relative;
}
li{
background-color: #bbffaa;
list-style: none;
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 50px;
}
li:nth-child(2){
background-color: pink;
}
li:nth-child(3){
background-color: orange;
}
/* 垂直中线 */
li.vertical-line{
width: 100%;
top: 199px;
position: absolute;
height: 1px;
background-color: red;
}
li.horizontal-line{
width: 1px;
height: 100%;
left: 349px;
position: absolute;
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="vertical-line"></li>
<li class="horizontal-line"></li>
</ul>
</body>
</html>
1.1 justify-content: space-evenly
space-evenly space is distributed to one side of the element
1.2 justify-content: space-between
space-between white space is evenly distributed between elements
1.3 justify-content: space-around
space-around white space is distributed to both sides of the element
1.4 justify-content: center
center elements are arranged in the center
1.5 justify-content: flex-end
flex-end elements are arranged along the end of the main axis
1.6 justify-content: flex-start
Defaults
flex-start elements are arranged along the starting edge of the main axis
Second, the direction of the auxiliary axis (here the vertical direction is the main axis)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性容器的样式</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 700px;
height: 400px;
border: 10px yellow solid;
/* 将ul设置为弹性容器 */
display: flex;
/* 设置弹性容器的排列方式 */
margin: 50px;
flex-direction: row;
flex-wrap: wrap;
/* 在主轴上使用 */
justify-content: space-evenly;
/* 辅轴方向 */
align-items: stretch;
/* */
/* align-content:flex-start; */
position: relative;
}
li{
background-color: #bbffaa;
list-style: none;
width: 200px;
/* height: 100px; */
line-height: 100px;
text-align: center;
font-size: 50px;
}
li:nth-child(2){
background-color: pink;
}
li:nth-child(3){
background-color: orange;
}
li:nth-child(4){
background-color: pink;
}
li:nth-child(5){
background-color: orange;
}
li:nth-child(6){
background-color: pink;
}
li:nth-child(7){
background-color: orange;
}
li:nth-child(8){
background-color: pink;
}
li:nth-child(9){
background-color: orange;
}
/* 垂直中线 */
li.vertical-line{
width: 100%;
top: 199px;
position: absolute;
height: 1px;
background-color: red;
}
li.horizontal-line{
width: 1px;
height: 100%;
left: 349px;
position: absolute;
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li class="vertical-line"></li>
<li class="horizontal-line"></li>
</ul>
</body>
</html>
2.1 align-items: stretch
The default value
stretch The default value, the length of the element is set to the same value. The premise is that the element height/(width when the horizontal direction is the secondary axis) is not assigned.
2.2 align-items: flex-start
The flex-start element will not stretch and will be aligned along the starting edge of the secondary axis in its row
2.3 align-items: flex-end
flex-end is aligned along the end of the minor axis in its row
2.4 align-items: center
center is vertically aligned in the center of its row
2.5 align-items: baseline
baseline alignment
