外星人源码论坛 首页 编程经验 百度任务10-flex布局

百度任务10-flex布局

2018-3-5 06:55
原作者: 外星人源码网 来自: 外星人源码网 收藏 分享 邀请

html代码: CSS代码 .box{width: 500

html代码:

<div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
</div>

CSS代码

.box{
            width: 500px;
            height: 300px;
            display: flex;
            border: 1px solid red;
            justify-content: space-between;
            flex-wrap: wrap;
}
.box div{
        background: green
}
.div1{
width: 120px;
height: 80px;
}
.div2{
width: 100px;
height: 40px;
}
.div3{
width: 60px;
height: 40px;
}
.div4{
width: 300px;
height: 40px;
}

效果图:


2. align-items

这时候再给.box添加align-items:flex-start;,没有变化。

align-items:center变为:

align-items:flex-end变为:

这时候那两行被绑在了一起,要动都是一起动。

3.align-content

忽略第2步
.box加属性align-content:flex-start,结果:

整个就挨一起去了。

.box加属性align-content:space-between,结果:

结论:和justify-content作用一样,不过这是纵向的。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

粉丝 阅读253 回复0
上一篇:
增量部署class文件引发的血案发布时间:2018-03-05
下一篇:
当你修改设备显示大小的时候,你到底在修改什么?发布时间:2018-03-05
推荐资讯
阅读排行
国内最专业的源码技术交流社区
全国免费热线电话

0373-5171417

周一至周日9:00-23:00

反馈建议

admin@eenot.com 在线QQ咨询

扫描二维码关注我们