这里的li元素宽度为什么不是没有相对于父元素

Question

<figure>
    
        <ul>
        
            <li>
                figure边框为灰色<br>
                ul边框为红色<br>
                li边框为黑色<br>
                li的宽度为100%，所以li的宽度应该和她父元素ul的宽度一样，对吗？<br>
                可是为什么li的宽度和figure的宽度是一样的
                
            </li>
            <li>
                
            </li>
            <li>
                
            </li>
            <li>
                
            </li>
        </ul>
    </figure>

* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

li {
    list-style-type: none;
}

figure {
    width: 100%;
    height: 400px;

    border: 10px solid #999;
}

ul {
    width: 400%;
    height: 400px;

    display: flex;
    flex-direction: row;

    border: 1px solid red;
}

li {
    width: 100%;
    height: 100%;

    border: 5px solid #000;
}

Answer 1

因为ul这两条属性的影响

display: flex;
flex-direction: row;

和li这个属性的影响

width:100%

你把li的个数留一个再试试

补充一下：width：100%还是生效了的，但是并列子元素的宽度和大于了父元素宽度，由于你没有设置li的flex-shrink跟flex-basis，默认以width作为flex-basis，初始width都是100%，则100%：100%：100%：100% = 1：1：1：1压缩(比如4个li加起来超出了800px,则各自在原有宽度上减去200px)，所以都是ul的1/4宽度。

压缩比例计算方法：压缩比= ‘元素1’的flex-basisXflex-shrink：‘元素2’的flex-basisXflex-shrink：‘元素3’的……

Answer 2

因为你使用了flex布局啊,四个li标签排成一列了。。

Answer 3

首先 你这边ul是flex 同时你还设置了ul为400% 四个li 每个li100% flex布局 flex-direction: row;
所以自然每个li依次向右排列 每个大小为100% 是ul的一半 正好等于 你设置的figure的width

Answer 4

你是想问Li的宽度为什么没有继承ul的400%？因为你给ul设置了display:flex;当你个ul设置了该属性的时候，li的宽度100%为ul的宽度400%/li的个数
ps：你给ul分别设置500%，和600%，你就能看到效果了