align-content：定义多根轴线的对齐方式
| flex-start | 交叉轴的起点对齐 |
| flex-end | 交叉轴的终点对齐 |
| center | 交叉轴的中点对齐 |
| space-between | 与交叉轴两端对齐，轴线之间的间隔平均分布 |
| space-around | 每根轴线两侧的间隔都相等，轴线之间的间隔比轴线与边框的间隔大一倍 |
| stretch | 默认值，当子元素不设置高度或者高度为auto时，轴线占满整个交叉轴 |
order：定义项目的排列顺序
数值越小，排列越靠前，默认值为0。
flex-grow：定义项目的放大比例
默认值为0，即如果存在剩余空间，也不放大。
1：表示把剩余的空间都充满，如果每个盒子都设置为1时，会将外面的大盒子进行平均分配。
flex-shrink：定义项目是否被压缩
默认值是1，表示被压缩。
0：表示不被压缩，如果每个都不被压缩，就会显示真正的大小，可能超过父元素大小。
flex-basis：定义项目的宽度
默认值为auto。其优先级高于width，但效果与width相似，不会撑开大小，还是会被压缩。
属性缩写：flex:(X X X); 等同于flex-grow:X;flex-shrink:X;flex-basis:X; 。
居中效果
<!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>水平垂直居中</title>
<style>
*{margin:0;padding:0;}
.box{
width: 600px;
height: 500px;
border:1px solid red;
display: flex;
/* 只能实现块元素的水平居中 不能实现垂直居中 */
margin:20px auto 0px;
/* 主轴是水平方向 让子盒子在水平方向居中 */
justify-content: center;
/* 让子盒子在垂直交叉轴方向居中 */
align-items: center;
}
.item{
width: 300px;
height: 300px;
background: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
