前端学习笔记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;
}
1173
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
