flexbox容器和子结构

Question

问题是我在其中一个孩子中所做的任何改变？？？类似乎对图像没有影响？这就是为什么我要对每个图像使用样式...

/*************************/
/* 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的辩解内容：flex-end ...，则什么都没有改变。图标完全保留在原处。同样，如果将width或height属性放入.lt，.rt或.m，则没有任何变化。

现在很困惑。

Answer 1

例如，看起来就像您对容器进行样式设置：对'.lt'进行样式设置时，将对整个块进行样式设置（想象一个围绕所有子项的块）。如果您要为样式表中的子图像设置尺寸，则可以输入

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

请参阅“>”符号，基本上会将您移至下一个孩子，因此可以将其视为树状结构。容器>孩子>孙子>等等。

Answer 2

您当前的CSS中有嵌套，该嵌套无效，将在浏览器中被忽略。嵌套CSS可以使用Less或SASS / SCSS来完成，但这需要不同的设置。

嵌套CSS无效的示例：

.class {
  display: flex;
  .class2 { color: red; }
}

.class2不会以任何方式或浏览器呈现或使用。

您将看到没有嵌套，您的CSS正在做某事:-)

/*************************/
/* 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="https://placehold.it/200x200"></div>
        <div> <img style="width:60px; height:60px;" src="https://placehold.it/200x200"></div>
        <div> <img style="width:60px; height:60px;" src="https://placehold.it/200x200"></div>
        <div> <img style="width:60px; height:60px;" src="https://placehold.it/200x200"></div>
        <div> <img style="width:60px; height:60px;" src="https://placehold.it/200x200"></div>
    </div>
    <div class="m">
        <div> <img style="width:200px;" src="https://placehold.it/200x200"></div>
        <div> <img style="width:200px;" src="https://placehold.it/200x200"></div>
        <div> <img style="width:200px;" src="https://placehold.it/200x200"></div>
        <div> <img style="width:200px;" src="https://placehold.it/200x200"></div>
        <div> <img style="width:200px;" src="https://placehold.it/200x200"></div>
    </div>
    <div class="rt">
        <div> <img style="width:60px; height:60px;" src="https://placehold.it/200x200"></div>
        <div> <img style="width:60px; height:60px;" src="https://placehold.it/200x200"></div>
        <div> <img style="width:60px; height:60px;" src="https://placehold.it/200x200"></div>
        <div> <img style="width:60px; height:60px;" src="https://placehold.it/200x200"></div>
        <div> <img style="width:60px; height:60px;" src="https://placehold.it/200x200"></div>
    </div>
</div>