为什么量出来高80px 看起来和视频老师做的高度差别很大
来源：3-2 作业题
陈立天
2020-09-01 19:58:40
写回答
2回答
-
好帮手慕粉
2020-09-02
同学你好，关于同学的问题回答如下：
1、按照自己实际测量的实现就好，视频老师的可能经过缩放了。
2、align-items: center是设置纵轴（Y轴）的对齐方式。
3、justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
4、因为同学设置了flex-direction: column，如果把它去掉，那么就是正常方向上的：
建议同学将这个三个属性都加上，就能正确实现了：
另外，同学如果有新的问题，建议同学新建一个问答进行提问，这样老师能更快的看到同学的问题，也便于同学后期的复习与总结。
如果我的回答帮助了你，欢迎采纳。祝学习愉快~
0 -
陈立天
提问者
2020-09-01
另外问个问题align-items: center;不是交叉轴 也就是Y轴 么 我设置的align-items: center;怎么能实现
justify-content: center;的效果呢？ 应该justify-content:center 才是水平居中把？反而设置这个是垂直居中去了？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>Document</title> <link rel="stylesheet" href="./css/grid-flex.css"> <link rel="stylesheet" href="./css/index2.css"> </head> <body> <div class="header"> <p class="link">immoc</p> </div> <div class="div-1"> <img src="./img/1.png" alt="img" class="div-1-img"> <p class="div-1-link-1">Imooc</p> <div class="div-1-btn">start</div> </div> <div class="div-2"> <div class="div-2-item">关于慕课网</div> <div class="div-2-item">关于课程</div> <div class="div-2-item">核心团队</div> <div class="div-2-item">新增专题</div> </div> </body> </html>
*{ padding: 0; margin: 0; } .container{ width:100% } .header{ width: 100%; height: 40px; line-height: 40px; text-align: center; background-color: #7ea6ae; color: #757575; } .div-1{ flex-direction: column; background-color: #B2C5CC; height: 250px; display: flex; align-items: center; /* justify-content: center; */ } .div-1-img{ width: 100px; height: 100px; margin-top: 20px; } .div-1-link-1{ margin-top:5px; color: #757575; } .div-1-btn{ margin-top: 20px; width: 90px; height: 25px; line-height: 25px; text-align: center; background-color: rgb(255, 255, 255); font-size: 14px; } .div-2{ width: 100%; height: 50px; } .div-2-item{ width: 22%; height: 50px; line-height: 50px; text-align: center; }0
相似问题