今天我们来学习关于“如何用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>

flex-wrap 实现换行

<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

简写属性 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>

3个一行变为2个一行

Flex属性的简写

现在我不仅希望能换行,我还希望能2个一行

.planWrap {
    width: 160px;
    height: 200px;
    border: 1px solid;
    display:flex;
    flex-flow:row wrap;
}

.planItem {
    flex: 50%;
}

这里面使用了flex属性,flex可以指定元素占据的百分比或者固定宽度,具体可以见上面文档,就不详细说明了.

nth-child 指定一些元素特定属性

现在我希望两个div直接间距10px,但是后面一个元素没有间距

.planItem {
    flex: 40%;
    margin-right: 10px;
}

.planItem:nth-child(2n) {
    margin-right: 0px;
} 

首先指定了margin-right,所以我将flex百分比调小,然后使用了nth-child修改偶数位的元素

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• CSS盒模型有几种，对子元素布局控制是怎样

  盒模型是CSS控制布局的主要方式之一,尤其是内部的元素排列控制,今天小编在这里将给大家来介绍一下CSS的box model盒模型及其内的子元素布局控制,需要的朋友可以参考下

• CSS新特性有哪些值得了解和学习的

  本篇文章给大家分享几个2022年值得期待的、不应该错过的 CSS 新功能，一起收藏学习吧！

• CSS中flex布局如何实现自动换行？

  今天给大家分享的是关于CSS中flex布局自动换行的内容，flex 是常用的 css3 布局方式，可以用少量的代码高效的实现各种页面布局，但是如果flex布局太长，那么自动换行还是很有必要的，那么具体怎样实现呢?接下来跟随小编一起看看吧。

• HTML中如何让table自适应宽度，代码是什么

  这篇文章主要介绍了HTML页面自适应宽度的table(表格),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• HTML5语义标签的作用和好处是什么，有哪些

  说语义标签前先来理解下什么叫语义化，当下html是靠div+css来铸造页面的整体框架和结构的，通篇大量的div可读性极低，因此诞生了这些特殊的标签，简单地说就是见名知义，使页面更清晰，方便维护和开发。HTML5为我们提供了一系列的语义标签。