cssflex布局超长⾃动换⾏
要创建⼀个 flex 容器，只需要将⼀个 display: flex 属性添加到⼀个元素上。
默认情况下，所有的直接⼦元素都被认为是 flex 项，并从左到右依次排列在⼀⾏中。
如果 flex 项的宽度总和⼤于容器，那么 flex 项将按⽐例缩⼩，直到它们适应 flex 容器宽度
演⽰：
⼀个页⾯敲击f12，到div内多个div的元素组合，声明flex 并width：900px；给予定宽好让后⾯实践⾃动换⾏的功能
同样的：通过控制台的css进⾏样式的调整，如下
得到：
很明显，印证了flex 项将按⽐例缩⼩
此时我们需要在⽗元素的加⼊：
flex布局对齐方式
flex-flow: wrap;
具体如下
最终效果
更多参考：建议复制到你的txt⽂本⽂档查阅更加⽅便
display: flex;
/* flex-direction 决定主轴的⽅向 row(默认)|row-reverse|column|column-reverse*/
/* flex-direction: row; */
/* flex-wrap决定当排列不下时是否换⾏以及换⾏的⽅式,nowrap(默认)|wrap|wrap-reverse */
/* flex-wrap:wrap; */
/* flex-flow是lex-direction和flex-wrap的简写形式，如：row wrap|column wrap-reverse等。默认值为row nowrap，即横向排列不换⾏ */
flex-flow:row wrap;
/* !当主轴沿⽔平⽅向时!justify-content，决定item在主轴上的对齐⽅式，可能的值有flex-start（默认），flex-end，center，space-between，space-around */          justify-content:center;
/* !主轴⽔平时!决定了item在交叉轴上的对齐⽅式，可能的值有flex-start|flex-end|center|baseline|stret
ch */
align-items:center;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。