html - flexbox 容器和子结构

Question

问题是我对其中一个 child 的改变是什么？？？类似乎对图像没有影响？？这就是为什么我对每张图片使用样式...

/*************************/
/* FLEX container */
/************************/
.fcon {
    display: flex;
    align-items: baseline;
    border-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-top-style: none;
    border-bottom-style: none;
    min-width: 0;
    background-color: black;

    /* images */
    .lt {
        flex: 30%;
        justify-content: flex-start;
        background-color: black;
        border-left-style: solid;
        border-width: 1px;
    }

    .m {
        flex: 40%;
        justify-content: center;
        border-style: solid black;
        border-color: black;
        border-width: 1px;
    }

    .rt {
        flex: 30%;
        justify-content: flex-end;
        border-style: solid black;
        border-color: black;
        border-width: 1px;
    }

}

<!-- The flexible grid (content) -->
<div class="fcon">
    <div class="lt">
        <div> <img style="width:60px; height:60px;" src="watchmaker.png"></div>
        <div> <img style="width:60px; height:60px;" src="hamburger.png"></div>
        <div> <img style="width:60px; height:60px;" src="wm_my_watches.png"></div>
        <div> <img style="width:60px; height:60px;" src="wavygravy.png"></div>
        <div> <img style="width:60px; height:60px;" src="wm_send.png"></div>
    </div>
    <div class="m">
        <div> <img style="width:200px;" src="left-arrow.gif"></div>
        <div> <img style="width:200px;" src="left-arrow.gif"></div>
        <div> <img style="width:200px;" src="left-arrow.gif"></div>
        <div> <img style="width:200px;" src="left-arrow.gif"></div>
        <div> <img style="width:200px;" src="left-arrow.gif"></div>
    </div>
    <div class="rt">
        <div> <img style="width:60px; height:60px;" src="Tap.gif"></div>
        <div> <img style="width:60px; height:60px;" src="Tap.gif"></div>
        <div> <img style="width:60px; height:60px;" src="Tap.gif"></div>
        <div> <img style="width:60px; height:60px;" src="Tap.gif"></div>
        <div> <img style="width:60px; height:60px;" src="Tap.gif"></div>
    </div>
</div>

---

例如，如果我更改 .rt 的 justify-content: flex-end ...没有任何变化。图标保持原样。同样，如果我将宽度或高度属性放入 .lt、.rt 或 .m 中，则不会发生任何变化。

现在很迷茫

Answer 1

它看起来像您为容器设置样式，例如:当您为“.lt”设置样式时，它将为整个 block 设置样式(想象一个围绕所有子项的 block )。如果您想在样式表中设置子图像的大小，您可以输入类似

.lt>div>img {
    width: 200px;
}

看到“>”符号基本上会把你带到下一个 child ，所以把它想象成一个树状结构。容器> child >孙子>等等。