flex布局允许换行,flex布局换行之后有间隙
要创建flex容器，只需向元素添加display: flex属性。
默认情况下，所有直接子元素都被视为flex项目，并从左到右排列成一行。
如果伸缩项的宽度之和大于容器的宽度，伸缩项将被缩小，直到适合伸缩容器的宽度。演示：找到一个页面点击f12，找到一个div中多个div的元素组合，声明flex和width:900 px；设置宽度，以便以后练习自动换行的功能。
类似地：通过控制台的css调整样式，如下所示
Get:很明显，确认了flex项会被缩小。
此时，我们需要加入父元素：flex-flow:wrap；具体如下
最终效果
更多参考
显示器：flex/* flex-direction确定主轴行的方向(默认) ROW-REVERSE COLUMN COLUMN-REVERSE */* Flex-direction:ROW；*//* flex-wrap确定当行装不下时是否换行以及如何换行，nowrap(默认) wrap wrap-reverse *//* Flex-wrap:wrap；*//* flex-flow是lex-direction和flex-wrap的简写形式，如：rowwrap columnwarp-reverse等。默认值为rowwrap，即水平排列不换行*/flex-flow:row wrap；/* !当主轴处于水平方向时！Just-content，确定项目在主轴上的对齐方式。可能的值有flex-start(默认)、flex-end、center、space-between、space-around */just-content:center。/* !当主轴水平时！确定横轴上项目的对齐方式。可能的值为flex-start flex-end center baseline stretch */align-items:center；示例：CSS Flex灵活布局(多div自动换行)
！DOCTYPE htmlhtml head meta charset= UTF-8 meta name= viewport content= width=device-width，Initial-scale=1.0 meta http-equiv= x-ua-compatible content= ie=edge title flex布局/标题样式。con {/*要创建flex容器，只需向元素添加display: flex属性。*//*默认情况下，所有直接子元素都被视为flex项目，并从左到右排列成一行。*//*如果flex项目的宽度总和大于容器的宽度，那么flex项目将被缩小，直到它们适合flex容器的宽度*/display:flex；/* flex-direction确定主轴行的方向(默认) ROW-REVERSE COLUMN COLUMN-REVERSE */* Flex-direction:ROW；*//* flex-wrap确定当行装不下时是否换行以及如何换行，nowrap(默认) wrap wrap-reverse *//* Flex-wrap:wrap；*//* flex-flow是lex-direction和flex-wrap的简写形式，如：rowwrap columnwarp-reverse等。默认值为rowwrap，即水平排列不换行*/flex-flow:row wrap；/* !当主轴处于水平方向时！Just-content，确定项目在主轴上的对齐方式。可能的值有flex-start(默认)、flex-end、center、space-between、space-around */just-content:center。/* !当主轴水平时！确定横轴上项目的对齐方式。可能的值为flex-start flex-end center baseline stretch */align-items:center；} .con div { width:100p x；高度：100px背景：# 8db 6 CD；边框：1px纯黑；左边距：10px文本对齐：居中；行高：100px} /style/headbody div class=con ！order的值为整数，默认值为0。整数越小，项目的顺序越高。这里只设置了item1和item4的order属性。1和4排在最后，4排在1前面-div style= order:2 item 1/div div style= height:300 px；项目2/div！- flex-grow定义当flex容器有多余空间时，是否放大flex-shrink项以缩小它-div style= flex-grow:2 item 3/div div style= order:1 item 4/div div div style= flex-basis:60px item 5/div div div item 6/divi tem 7/div divi tem 8/div divi tem 9/div divi tem 10/div div item 11/div/div/body/html就是这样。本文关于css flex layout超长单词换行的示例代码到此为止。关于css flex超长自动换行的更多信息，请搜索之前的文章或者继续浏览下面的相关文章。希望你以后能支持我！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。