cssflex=-flex-wrap

时间：2023-03-31 12:13:59 CSS

flex元素默认会填充一行或一列，但是当你为它们的容器设置flex-wrap时，情况就会不同。flex-wrap可以接受三个值：1：nowrap所有flex元素填充一行或一列。是默认值。2:wrap所有flex元素按照在HTML中出现的顺序多行或多列显示3:wrap-reverse所有flex元素按照在HTML中出现的顺序倒序多行或多列显示接下来我们来看看这三个不同值的效果。因为flex-wrap与flex-direction密切相关，所以我们将它们一一结合起来：首先，让我们看一下我们的代码：//html1

567//css.容器{宽度：500px；高度：100px；框大小：边框框；边框：1px纯绿色；显示：弹性；弹性方向：行；flex-wrap:wrap;}.item{背景：黄色;border:1pxsolidhotpink;宽度：30%；box-sizing:border-box;}.??short{background:pink;}1:flex-direction:row&&flex-wrap:wrap2:flex-direction:row&&flex-wrap:wrap-reverse3:flex-direction:行-reverse&&flex-wrap:wrap4:flex-direction:row-reverse&&flex-wrap:wrap-reverse因为接下来要按列排列，所以我们需要给每个flex元素一个高度，去掉宽度（去掉之后，宽度默认会均匀分布），所以我们css中需要的部分被改变的是：//只有。item更改为.item{background:yellow;border:1pxsolidhotpink;高度：30%；box-sizing:border-box;}5:flex-direction:column&&flex-wrap:wrap6:flex-direction:column&&flex-wrap:wrap-reverse7:flex-direction:column-reverse&&flex-wrap:wrap8:flex-direction:column-reverse&&flex-wrap:wrap-reverse总结：当flex元素水平排列时(flex-direction:row|row-reverse)1:wrap会从上到下依次生成新的行2:wrap-reverse会从下往上依次生成新行当flex元素垂直排列时(flex-direction:column|column-reverse)1:wrap会从左到右依次生成新列2:wrap会生成新列按顺序从右到左边界条件：默认情况下，所有item元素都会尽量挤在一行（当设置flex-direction:row;）或一列（当设置flex-direction:column;）时显示。flex-wrap用来改变上面的默认行为，让item可以多行或者多列来展示，并且尽量不要超出flex容器的边界。当flex-direction:row时，flex-wrap会根据item的宽度看一行可以放多少item。当flex-direction:column时，flex-wrap会根据item的高度看一列可以放多少item。因此，如果item的宽度或高度过高，item个数过多，flex容器放不下，item会默认溢出到容器边界外。

上一篇：前端面试中CSS3的新特性

下一篇：CSStransition制作全屏页面滚动幻灯片

cssflex=-flex-wrap相关文章