flex属性练习
一、主轴方向(此处以水平方向为主轴)
<!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 空白分布到元素的单侧
1.2 justify-content: space-between
space-between 空白均匀分布到元素间
1.3 justify-content: space-around
space-around 空白分布到元素两侧
1.4 justify-content: center
center 元素居中排列
1.5 justify-content: flex-end
flex-end 元素沿着主轴终边排列
1.6 justify-content: flex-start
默认值
flex-start 元素沿着主轴起边排列
二、辅轴方向(此处以垂直方向为主轴)
<!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
默认值
stretch 默认值，将元素的长度设置为相同的值。前提是使用它的元素height/(水平方向是辅轴时width)没有赋值。
2.2 align-items: flex-start
flex-start 元素不会拉伸，沿着在其所在行辅轴起边对齐
2.3 align-items: flex-end
flex-end 在其所在行沿着辅轴的终边对齐
2.4 align-items: center
center 在其所在行垂直居中对齐
2.5 align-items: baseline
baseline 基线对齐
