仿站网提醒您,本文共3420个字,系统预计阅读时间或需9分钟。
最近做个项目,其中有个样式是换行布局,作为样式渣渣的我一开始不会,只能查资料,然后摆平了它.今天得空了,简要记录一下,方便后面小伙伴布局使用.
参考资料 flex-wrap
<div class="planWrap">
<div class="content planItem">1</div>
<div class="content planItem">2</div>
<div class="content planItem">3</div>
<div class="content planItem">4</div>
<div class="content planItem">5</div>
<div class="content planItem">6</div>
</div>
<style>
.content {
background: red;
line-height:50px;
height: 50px;
width: 50px;
text-align: center;
margin-top:5px
}
.planWrap {
width: 160px;
height: 200px;
border: 1px solid;
display:flex;
}
</style>
<style>
.planWrap {
width: 160px;
height: 200px;
border: 1px solid;
display:flex;
flex-wrap: wrap;
}
</style>
说明:
1.flex-wrap 属性指定 flex 元素单行显示还是多行显示,该属性接受以下取值:
nowrap: 元素都放在一行,也是默认属性值; wrap:元素放到多行; wrap-reverse: 和 wrap 的行为一样,但是 cross-start 和 cross-end 互换。(如下图展示更直观)2.上面有提及wrap-reverse,展示一下wrap-reverse的样式
<style>
.planWrap {
width: 160px;
height: 200px;
border: 1px solid;
display:flex;
flex-wrap: wrap-reverse;
}
</style>
简写属性 flex-flow
上面的都是行分布,现在我想要垂直分布且换行
<style>
.planWrap {
width: 160px;
height: 200px;
border: 1px solid;
display:flex;
flex-wrap: wrap;
flex-direction: column;
}
</style>
通过flex-direction指定排列方向,flex-wrap制定是否换行;不过这样写多少有点麻烦,可以使用flex-flow来进行简写
// 第一个指定的值为 flex-direction ,第二个指定的值为 flex-wrap.
flex-flow: flex-direction flex-wrap
<style>
.planWrap {
width: 160px;
height: 200px;
border: 1px solid;
display:flex;
flex-flow:column wrap;
}
</style>
Flex属性的简写
现在我不仅希望能换行,我还希望能2个一行
.planWrap {
width: 160px;
height: 200px;
border: 1px solid;
display:flex;
flex-flow:row wrap;
}
.planItem {
flex: 50%;
}
这里面使用了flex属性,flex可以指定元素占据的百分比或者固定宽度,具体可以见上面文档,就不详细说明了.
现在我希望两个div直接间距10px,但是后面一个元素没有间距
.planItem {
flex: 40%;
margin-right: 10px;
}
.planItem:nth-child(2n) {
margin-right: 0px;
}
首先指定了margin-right,所以我将flex百分比调小,然后使用了nth-child修改偶数位的元素.
到此这篇关于flex布局中使用flex-wrap实现换行的项目实践的文章就介绍到这了,更多相关flex-wrap实现换行内容请搜索仿站网www.ecmsw.cn以前的文章或继续浏览下面的相关文章,希望大家以后多多支持仿站网www.ecmsw.cn!
所谓大道至简,做网站仿站也是如此。市面上很多网站建设公司为了取得客户信任,总是会在第一次接触时就将自己的案例展现出来,案例中很多都是各种...
定制网站:顾名思义就是你想要什样的就做成什么样的,由客户来提出要求,从前期制作到后期完善修改。模板网站:由服务商提供一些可供浏览的网站样式...
仿站小工具是通过网址下载静态网页的工具。从输入的网址下载html代码,提取出JS、Css、Image、Picture、Flash等静态文件网址,再从下载完好的Cs...
说实话,您要的不只是网站,要的是 能带来客户的网络平台。☉ 不知道怎么利用网站赚钱?☉ 有了网站,不过网站实在看不下去?☉ 网站没有功能,时常出...
仿站是什么意思?其实仿站最简单的理解就是你发一个网站给我,然后我仿制出来一个一模一样的,记住了是可以百分百一样的,一般的用户是仿界面,然后修...
网站分为动态网站,和静态网站。动态网站又称为交互式网站,也就是可以让访问者参与,典型的就百度知道,你可在这里提问题,别人可回答问题,管理员可审...
您给我们一个目标站,我们还您一个相同的网站
按照您的要求,全新设计+开发您独一无二的网页
模板使用遇到问题,我们协助您快速解决
给我新功能需求,帮您定制开发并免费集成到网站
对现有程序不满意,需要做程序调整和效果增加
提供效果图/psd文件,还您一个网页设计