想要换行,flex-wrap应该选择哪一个值,flex-wrap:wrap不换行怎么回事

　　最近做了一个项目，其中一个款式是换行布局。作为作风上的败类，一开始做不到，只好查资料，然后摆平。今天有空，就简单记一下，方便后面的朋友布局和使用。

　　参考柔性包装

开始样式

　　div class= plan wrap div class= content plan item 1/div div class= content plan item 2/div div class= content plan item 3/div div class= content plan item 4/div div class= content plan item 5/div div class= content plan item 6/div/div style . content { background:red；行高：50px高度：50px宽度：50px文本对齐：居中；边距-顶部：5px}。plan wrap { width:160 px；高度：200px边框：1px纯色；显示器：flex}/style

flex-wrap 实现换行

　　style . plan wrap { width:160 px；高度：200px边框：1px纯色；显示器：flexflex-wrap:缠绕；}/样式描述：

　　1.1.flex-wrap属性指定flex元素是显示在单行中还是多行中。该属性接受以下值：

　　Nowrap:所有元素放在一行，这也是默认的属性值；Wrap:元素放在多行上；Wrap-reverse:与Wrap行为相同，但交叉开始和交叉结束互换。(下图更直观的表现出来)2。有提到绕反，展现绕反的风格。

　　style . plan wrap { width:160 px；高度：200px边框：1px纯色；显示器：flex柔性缠绕：缠绕-反转；}/style

垂直换行 flex-flow

　　速记属性flex-flow

　　以上都是按行分布，现在我想垂直分布，换行。

　　style . plan wrap { width:160 px；高度：200px边框：1px纯色；显示器：flexflex-wrap:缠绕；伸缩方向：列；}/style通过flex-direction指定排列方向，flex-wrap决定是否换行；不过这样写就有些麻烦了。flex-flow可用于速记。

　　//第一个指定值为flex-direction，第二个指定值为flex-wrap . flex-flow:flex-direction flex-wrap style . plan wrap { width:160 px；高度：200px边框：1px纯色；显示器：flexflex-flow:列换行；}/style

3个一行变为2个一行

　　 flex属性的简写

　　现在，我希望不仅仅是换线，更希望有两条线。plan wrap { width:160 px；高度：200px边框：1px纯色；显示器：flexflex-flow:行换行；}.plan item { flex:50%；}这里用到了flex属性，flex可以指定元素的百分比或者固定宽度。具体见上面文档，就不细说了。

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

　　现在我想让两个div直接间隔10px，但是后一个元素没有间隔。plan item { flex:40%；右边距：10px}.plan item:n-child(2n){ margin-right:0px；} margin-right是先指定的，所以我减少了flex百分比，然后用n-child修改偶数数字的元素。

完事的结束语 ^ _ ^

　　就是这样。本文介绍了在flex布局中使用flex-Wrap实现换行的项目实践。有关在flex-wrap中实现换行的更多信息，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。