контейнеры 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's justify-content: flex-end ... ничего не меняется. Иконки остаются именно там, где они есть. Точно так же, если я добавлю атрибуты width или height в .lt, .rt или .m, ничего не изменится.

Так растерялся прямо сейчас.

Answer 1

Ваш текущий 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>

Answer 2

Это похоже на ваш стиль контейнера, например: когда вы стилизуете '.lt', он будет стилизовать весь блок (представьте блок вокруг всех дочерних элементов). Если вы хотите установить размер дочерних изображений в вашей таблице стилей, вы можете напечатать что-то вроде

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

Видите, символ ">" в основном приведет вас к следующему дочернему элементу, так что думайте о нем как о древовидной структуре. контейнер> ребенок> внук> так далее и так далее.