为什么align-content:strech无效
<!DOCTYPE html>
<html lang="en">
<head>
5和6那个方格为什么没有占满剩余的空间啊
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0px;padding: 0px;}
.flexbox{display: flex;width: 100%;height: 800px;background-color: grey;
flex-wrap: wrap;align-content: stretch;}
.box{height: auto;width: 200px;background-color: orange;
text-align: center;line-height: auto;font-weight: bold;
font-size: 100px;margin: 10px;}
.long{height: auto;line-height: auto;}
.longer{height: auto;line-height: auto;}
</style>
</head>
<body>
<div class="flexbox">
<div class="box">1</div>
<div class="box long">2</div>
<div class="box">3</div>
<div class="box long">4</div>
<div class="box">5</div>
<div class="box longer">6</div>
<div class="box">7</div>
</div>
</body>
</html>
正在回答
同学你好，因为align-content的默认值是stretch，即默认就是align-content：stretch；所以不设置align-content，元素也会充满父元素。
祝学习愉快！
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星