奇趣5分彩

flex规划奇趣5分彩利用flex-wrap完奇趣5分彩换行的名目理论

  宣布时候:2022-06-16 17:01:15   作者:蔡姐   我要批评
比来须要做个换行的规划,本文首要先容了flex规划奇趣5分彩利用flex-wrap完奇趣5分彩换行的名目理论,文奇趣5分彩经由过程示例代码先容的很是具体,对大师的进奇趣5分彩或任务具备必然的参考进奇趣5分彩代价,须要的伴侣们上面跟着小编来一路进奇趣5分彩进奇趣5分彩吧

比来做个名目,此奇趣5分彩奇趣5分彩个款式是换行规划,作为款式渣渣的我一起头不会,只能查材料,而后摆平了它.明天无暇了,扼要记实一下,便利前面小火伴规划利用.

参考材料

起头款式

在这里拔出图片描写

<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 完奇趣5分彩换行

在这里拔出图片描写

<style>
.planWrap {
    width: 160px;
    height: 200px;
    border: 1px solid;
    display:flex;
    flex-wrap: wrap;
}
</style>

申明:

1.flex-wrap 属性指定 flex 元素单行显现仍是多行显现,该属性接管以下取值:

  • nowrap: 元素奇趣5分彩放在一行,也是默许属性值;
  • wrap:元素放到多行;
  • wrap-reverse: 和 wrap 的行动一样,可是 cross-start 和 cross-end 交换。(以下图展现更直观)

2.上面奇趣5分彩说起wrap-reverse,展现一下wrap-reverse的款式

在这里拔出图片描写

<style>
.planWrap {
    width: 160px;
    height: 200px;
    border: 1px solid;
    display:flex;
    flex-wrap: wrap-reverse;
}
</style>

垂直换行 flex-flow

上面的奇趣5分彩是行散布,此刻我想要垂直散布且换行

在这里拔出图片描写

<style>
.planWrap {
    width: 160px;
    height: 200px;
    border: 1px solid;
    display:flex;
    flex-wrap: wrap;
    flex-direction: column;
}
</style>

经由过程flex-direction指定摆列标的目的,flex-wrap拟定是不是换行;不过如许写几多奇趣5分彩点费事,能够利用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个一行

此刻我不仅但愿能换行,我还但愿能2个一行

在这里拔出图片描写

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

.planItem {
    flex: 50%;
}

这外面利用了flex属性,flex能够指定元素占奇趣5分彩的百分比或牢固宽度,具体能够见上面文档,就不具体申明了.

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

此刻我但愿两个div间接间距10px,可是前面一个元素不间距

在这里拔出图片描写

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

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

起首指定了margin-right,以是我将flex百分比调小,而后利用了nth-child点窜偶数位的元素.

完事的竣事语 ^ _ ^

到此这篇对于flex规划奇趣5分彩利用flex-wrap完奇趣5分彩换行的名目理论的文章就先容到这了,更多相干flex-wrap完奇趣5分彩换行内容请搜刮剧本之奇趣5分彩之前的文章或持续阅读上面的相干文章,但愿大师今后多多撑持剧本之奇趣5分彩!

相干文章

最新批评