百度任务10-flex布局

FrozenMap 发布于2019-08-29 13:26 / 1071人阅读

摘要：代码代码效果图这时候再给添加没有变化。变为变为这时候那两行被绑在了一起，要动都是一起动。忽略第步给加属性结果整个就挨一起去了。给加属性结果结论和作用一样，不过这是纵向的。

html代码：

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作用一样，不过这是纵向的。

云服务器 GPU云服务器 win7任务栏布局问题定时任务与触发任务工作流任务和节点任务 div布局布局html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112605.html

解决flex布局新旧版本的兼容性写法

摘要：最新开发的项目用了的新特性布局，遇到了兼容性的问题。那么新旧版本是什么布局分为旧版本，过渡版本，以及现在的标准版本。所以如果你只是写新版本的语法形式，是肯定存在兼容性问题的。最新开发h5的项目用了css的新特性flex布局，遇到了CSS兼容性的问题。在网上找到了如下的解决办法。我写页面的时候用到过很多的flex布局，觉得非常好用。下面附上一篇不错的flex布局介绍的文章。 Flex...

raoyi 2019-08-30 15:54 评论0 收藏0
百度前端任务(3)(4)(5)——巧谈前端基础html,css布局

摘要：经过了百度前端技术学院任务三和四五，在这里总结一下前端布局的一些个人见解，很多前端新手就是没有理解怎么布局而一直学不好先说一下，我个人理解的前端布局的思想吧。经过了百度前端技术学院任务三和四五，在这里总结一下前端布局的一些个人见解，很多前端新手就是没有理解怎么布局而一直学不好先说一下，我个人理解的前端布局的思想吧。在前端布局的时候，先不要设计太多什么margin,paddin...

CoyPan 2019-08-30 15:52 评论0 收藏0
百度前端任务(3)(4)(5)——巧谈前端基础html,css布局

摘要：经过了百度前端技术学院任务三和四五，在这里总结一下前端布局的一些个人见解，很多前端新手就是没有理解怎么布局而一直学不好先说一下，我个人理解的前端布局的思想吧。经过了百度前端技术学院任务三和四五，在这里总结一下前端布局的一些个人见解，很多前端新手就是没有理解怎么布局而一直学不好先说一下，我个人理解的前端布局的思想吧。在前端布局的时候，先不要设计太多什么margin,paddin...

YacaToy 2019-08-01 16:12 评论0 收藏0
百度ife任务3总结

摘要：在做百度的任务，没能组队成功只好自己做，如果现在还有收人的请务必带上我哦。因为脱离标准文档流，父元素无法自适应高度。问题能不能在不改变结构的情况下仅凭达到列式中间居中自适应宽度的效果在做百度ife的任务，没能组队成功只好自己做，如果现在还有收人的请务必带上我哦。 task3作业地址：https://github.com/emonki/BaiduIfe/tree/...*demo还不会...

xcold 2019-08-30 12:55 评论0 收藏0
css3 弹性布局和多列布局

摘要：弹性盒子基础弹性盒子是中盒子模型的弹性布局，在传统的布局方式上增加了很多灵活性。定义一个弹性盒子在父盒子上定义属性内核浏览器的兼容设置，下同当然还有行内布局的弹性盒子注意，设为布局以后，子元素的和属性将失效。弹性盒子基础弹性盒子(Flexible Box)是css3中盒子模型的弹性布局，在传统的布局方式上增加了很多灵活性。定义一个弹性盒子在父盒子上定义display属性： #b...

stormzhang 2019-08-29 16:38 评论0 收藏0