Как я могу получить доступ к элементам внуков и изменить их свойства с помощью flexbox?

Post author:admin
Запись опубликована:11 января, 2022
Post category:Вопросы по программированию

#html #css #flexbox

Вопрос:

Я пытаюсь создать небольшие коробки внутри коробок, как показано ниже на изображении, но, похоже, не могу ничего переместить внутри элементов flexbox-элементов, я дошел до создания родительских и дочерних элементов, но проблема в том, чтобы манипулировать элементами внуков, как я хочу, чтобы они находились в разных положениях. Я очень новичок в этом, поэтому определенно делаю что — то не так… любые предложения будут высоко оценены!

         <div class="flexbox-container">
            <div class="flexbox-item flexbox-item-1"> 
                <div class="flexbox-square flexbox-square-1"></div>
            </div>

            <div class="flexbox-item flexbox-item-2"> 
                <div class="flexbox-square flexbox-square-2"></div>
            </div>

            <div class="flexbox-item flexbox-item-3">  
                <div class="flexbox-square flexbox-square-3"></div>
            </div>

            <div class="flexbox-item flexbox-item-4">  
                <div class="flexbox-square flexbox-square-4"></div>
            </div>

            <div class="flexbox-item flexbox-item-5">  
                <div class="flexbox-square flexbox-square-5"></div>
            </div>

            <div class="flexbox-item flexbox-item-6">  
                <div class="flexbox-square flexbox-square-6"></div>
            </div>

            <div class="flexbox-item flexbox-item-7">  
                <div class="flexbox-square flexbox-square-7"></div>
            </div>

            <div class="flexbox-item flexbox-item-8">  
                <div class="flexbox-square flexbox-square-8"></div>
            </div>
        </div>

Ответ №1:

Это в основном все justify-content , и align-items , но я сохранил все это в flexbox в соответствии с вашим вопросом. Вы также можете использовать позиционирование.

 /* Parent container */
.flexbox-container{  
    display: flex;
    flex-wrap: wrap;
}

.flexbox-square {
    width: 50px;
    height: 50px;
    background-color: red;
}

/* Child */
.flexbox-item {
    display: flex;
    align-items: flex-start;
    width: 200px;
    margin: 50px;
    border: 3px solid black;
    background-color: cadetblue;
}

/*Flexbox Items*/

.flexbox-item-1 {
    min-height: 200px;
    min-width: 200px;
}

.flexbox-item-2 {
    min-height: 200px;
    min-width: 200px;
    justify-content: flex-end;
}

.flexbox-item-3 {
    min-height: 200px;
    min-width: 200px;
    justify-content: flex-end;
    align-items: flex-end;
}

.flexbox-item-4 {
    min-height: 200px;
    min-width: 200px;
    align-items: flex-end;
}

.flexbox-item-5 {
    min-height: 200px;
    min-width: 200px;
    justify-content: center;
    align-items: center;
}

.flexbox-item-6 {
    min-height: 200px;
    min-width: 200px;
    justify-content: center;
    align-items: flex-end;
}

.flexbox-item-7 {
    min-height: 200px;
    min-width: 200px;
    justify-content: center;
    align-items: flex-end;
}

.flexbox-item-8 {
    min-height: 200px;
    min-width: 200px;
    justify-content: flex-end;
}

.flexbox-square-7 {
    margin-bottom: 10px;
}

.flexbox-square-8 {
    margin-right: 10px;
    margin-top: 10px;
}

  <div class="flexbox-container">
    <div class="flexbox-item flexbox-item-1"> 
        <div class="flexbox-square flexbox-square-1"></div>
    </div>

    <div class="flexbox-item flexbox-item-2"> 
        <div class="flexbox-square flexbox-square-2"></div>
    </div>

    <div class="flexbox-item flexbox-item-3">  
        <div class="flexbox-square flexbox-square-3"></div>
    </div>

    <div class="flexbox-item flexbox-item-4">  
        <div class="flexbox-square flexbox-square-4"></div>
    </div>

    <div class="flexbox-item flexbox-item-5">  
        <div class="flexbox-square flexbox-square-5"></div>
    </div>

    <div class="flexbox-item flexbox-item-6">  
        <div class="flexbox-square flexbox-square-6"></div>
    </div>

    <div class="flexbox-item flexbox-item-7">  
        <div class="flexbox-square flexbox-square-7"></div>
    </div>

    <div class="flexbox-item flexbox-item-8">  
        <div class="flexbox-square flexbox-square-8"></div>
    </div>
</div>

1. Я все это время целился не в тот элемент… создавал дополнительные классы div, когда в этом не было необходимости, теперь я это понимаю 🙂 большое вам спасибо!!

2. @jujuju199 без проблем! заботиться

Метки: Как я могу получить доступ к элементам массива списка