前端学习笔记93-弹性容器上的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 500px;
border: 10px red solid;
display: flex;
}
li{
width: 200px;
height: 200px;
background-color: #bfa;
font-size: 50px;
text-align: center;
line-height: 100px;
flex-shrink: 0;
}
li:nth-child(1){
}
li:nth-child(2){
background-color: pink;
}
li:nth-child(3){
background-color: orange;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
flex-wrap
设置弹性元素是否在弹性容器中自动换行
可选值:
nowrap:默认值,不自动换行
wrap:元素沿着侧轴方向自动换行
wrap-reverse:元素沿着侧轴反方向换行
ul{
width: 500px;
border: 10px red solid;
display: flex;
flex-wrap:wrap-reverse;
}
flex-flow
这个是wrap和direction的简写属性,没有顺序要求。
justify-content
设置分配主轴上的空白空间的分配
可选值:
flex-start:元素沿着主轴起边排列
flex-end:元素沿着主轴终边排列
center:元素居中排列
space-around:空白分布到元素两侧
ul{
width: 800px;
border: 10px red solid;
display: flex;
justify-content: space-around;
}
space-evenly:空白分布到元素的单侧。与上一个的区别在于上一个是每个元素的两边都有空白,导致整体的两端空白比较窄。
ul{
width: 800px;
border: 10px red solid;
display: flex;
justify-content: space-evenly;
}
space-between:空白均匀分布到元素间(两端没有空白)
center:元素水平居中。
align-items
先调整下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 600px;
height: 800px;
border: 10px red solid;
display: flex;
}
li{
width: 200px;
background-color: #bfa;
font-size: 50px;
text-align: center;
line-height: 100px;
flex-shrink: 0;
}
li:nth-child(1){
}
li:nth-child(2){
background-color: pink;
}
li:nth-child(3){
background-color: orange;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2
<div>2</div>
</li>
<li>3
<div>3</div>
<div>3</div>
</li>
</ul>
</body>
</html>
这个样式设设置元素间在侧轴上如何对齐。
可选值:
stretch,默认值,使元素长度一样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 600px;
height: 800px;
border: 10px red solid;
display: flex;
align-items: stretch;
flex-flow: row wrap;
}
li{
width: 200px;
background-color: #bfa;
font-size: 50px;
text-align: center;
line-height: 100px;
flex-shrink: 0;
}
li:nth-child(1){
}
li:nth-child(2){
background-color: pink;
}
li:nth-child(3){
background-color: orange;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>
2
<div>2</div>
</li>
<li>
3
<div>3</div>
<div>3</div>
</li>
<li>1</li>
<li>
2
<div>2</div>
</li>
</ul>
</body>
</html>
这里我多加了两个li,从结果可以看到,同一行的是长度一致的,不同行的则不一定。
flex-start:元素不会拉伸,沿着侧轴起边对齐
ul{
width: 600px;
height: 800px;
border: 10px red solid;
display: flex;
align-items: flex-start;
flex-flow: row wrap;
}
flex-end:终边对齐
center 居中对齐
元素居中
让元素沿着主轴和侧轴都居中即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 600px;
height: 800px;
border: 10px red solid;
display: flex;
align-items: center;
justify-content: center;
}
li{
width: 200px;
background-color: #bfa;
font-size: 50px;
text-align: center;
line-height: 100px;
flex-shrink: 0;
}
</style>
</head>
<body>
<ul>
<li>1</li>
</ul>
</body>
</html>
align-content
与justify-content类似,只是这个是相对侧轴的,所以不做详细描述。
align-self
用来覆盖当前弹性元素的align-item是,写在弹性元素里。
li:nth-child(1){
align-self: stretch;
}