首页 > 其他 > 详细

aligin-items与aligin-content的区别

时间:2019-10-24 14:13:46      阅读:167      评论:0      收藏:0      [点我收藏+]

align-items 属性使用于所有的flex容器,它是用来设置每个flex元素在侧轴上的默认对齐方式

aligin-items 与align-content有相同的功能,不过不同点是它是用来让每一个单行元素在容器居中而不是让整个容器居中

demo:align-items:单行元素:

html:

<div class=‘flexBox‘>
        <div class=‘box1‘></div>
        <div class=‘box2‘></div>
    </div>

css:

.flexBox {
            width: 300px;
            height: 500px;
            display: flex;
            border: 1px solid red;
            align-content: center;
        }
        
        .box1,
        .box2 {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        
        .box2 {
            background-color: yellow;
        }

技术分享图片

 

 修改flexBox的样式,使元素多行:

flex-wrap:wrap;

技术分享图片

 

 删除align-items:center; 添加align-content:center;

技术分享图片

 

aligin-items与aligin-content的区别

原文:https://www.cnblogs.com/xiaofenguo/p/11731804.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!