flex布局怎么让超出宽度的内容换行？

Question

如图

子元素中的内容超过了我设置的子元素宽度 如何让那些超过的部分显示在第二行？

        
    ul {
        display: flex;
        background-color: rgb(90, 162, 230);
        height: 500px;
        width: 500px;

    }

    li {
        width: 200px;
        height: 200px;
        background-color: pink
    }

Answer 1

在li中加上word-break: break-all;就可以了

ul {
    display: flex;
    background-color: rgb(90, 162, 230);
    height: 500px;
    width: 500px;

}

li {
    width: 200px;
    height: 200px;
    background-color: pink;        
    word-break: break-all;
}

Answer 2

https://blog.csdn.net/weixin_...

应该跟flex没关系，不用flex也会出现这种情况

Answer 3

这是文字内容折行的问题（只有一个li还没有涉及到item折行的问题），具体可以查一下word-break属性，overflow属性，white-space属性等，根据说明我觉得你应该能写出来。

顺带说一下，flex换行的问题可以查一下flex-wrap属性