некоторые проблемы компоновки с Flexbox

Question

Я играл с Flexbox, но по-прежнему работает на некоторые вопросы .. Я почти есть то, что я хочу:

1. метка в левом верхнем углу первого контейнера
2. метку в Вверху справа из первого контейнера
3. этикетка в нижней середине первого контейнера
4. ящика, который имеет «число» сверху «LABEL»
5. текста в центральной области.
6. Имейте несколько из них на одной строке (я еще не сделал этого, прямо сейчас, если бы я сделал другое, это была бы собственная строка).

Проблемы

1. Хотел расстояние между зеленой коробкой и синей коробкой. Пытался использовать «пространство вокруг», но он, похоже, не делает того, что я хочу. Я также хотел бы, чтобы контейнеры имели одинаковый размер, но не были уверены, как это сделать, чтобы они реагировали.
2. Хотелось бы, чтобы текст в центре фактически был центром самого себя, а не только тегом «p».
3. Хотелось бы иметь его на больших экранах, чтобы на одной линии находилось более одного контейнера. Не уверен, что мне нужно обернуть вокруг него еще один гибкий контейнер.
4. Интервал между корневыми контейнерами.

.flex-container { 
 

 
    display: flex; 
 

 
    flex-direction: column; 
 

 
    background-color: grey; 
 

 
    padding: 0; 
 

 

 
} 
 

 
.flex-sub-container { 
 

 
    display: flex; 
 

 
    flex-direction: row; 
 

 
    justify-content: space-between; 
 

 
} 
 

 
.flex-item-left-corner { 
 

 
    /*background-color: red;*/ 
 

 
    margin: 0; 
 

 
    padding: 0; 
 

 
} 
 

 
.flex-item-right-corner { 
 

 
    /*background-color: red;*/ 
 

 
    margin: 0; 
 

 
    padding: 0; 
 

 
    justify-content: flex-end; 
 

 
} 
 

 
.flex-bottom-middle { 
 

 
    /*background-color: red;*/ 
 

 
    align-self: center; 
 

 
    margin: 0; 
 

 
} 
 

 
.flex-sub-container2 { 
 

 
    /*background-color: yellow;*/ 
 

 
    display: flex; 
 

 
    flex-direction: row; 
 

 
    justify-content: center; 
 

 
} 
 

 
.flex-sub-item { 
 

 
    background-color: green; 
 

 
    display: flex; 
 

 
    flex-direction: column; 
 

 
    align-items: center; 
 

 
    flex-grow: 1; 
 

 
} 
 

 
.flex-qty { 
 

 
    margin: 0; 
 

 
    font-size: 28pt; 
 

 
} 
 

 
.flex-qty-label { 
 

 
    margin: 0 5pt 5pt 5pt; 
 

 
} 
 

 
.flex-center { 
 

 
    background-color: royalblue; 
 

 
    align-self: center; 
 

 
    font-size: 15pt; 
 

 
    flex-grow: 3; 
 

 
}

<div class="flex-container card-panel teal lighten-2"> 
 
    <div> 
 
    <div class="flex-sub-container"> 
 
     <p class="flex-item-left-corner">Left Top</p> 
 
     <p class="flex-item-right-corner">Right Top</p> 
 
    </div> 
 
    </div> 
 
    <div> 
 
    <div class="flex-sub-container2"> 
 
     <div class="flex-sub-item"> 
 
     <p class="flex-qty">7</p> 
 
     <p class="flex-qty-label">Label</p> 
 
     </div> 
 
     <p class="flex-center">This is my very long center text.</p> 
 
    </div> 
 
    </div> 
 
    <p class="flex-bottom-middle">Bottom Middle</p> 
 
</div> 
 

 
<div class="flex-container card-panel teal lighten-2"> 
 
    <div> 
 
    <div class="flex-sub-container"> 
 
     <p class="flex-item-left-corner">Left Top</p> 
 
     <p class="flex-item-right-corner">Right Top</p> 
 
    </div> 
 
    </div> 
 
    <div> 
 
    <div class="flex-sub-container2"> 
 
     <div class="flex-sub-item"> 
 
     <p class="flex-qty">7</p> 
 
     <p class="flex-qty-label">Label</p> 
 
     </div> 
 
     <p class="flex-center">This is my very long center text.</p> 
 
    </div> 
 
    </div> 
 
    <p class="flex-bottom-middle">Bottom Middle</p> 
 
</div>

Answer 1

Хотел расстояние между зеленой коробкой и синей коробкой. Пытался использовать «пространство вокруг», но он, похоже, не делает того, что я хочу.

Просто добавлено некоторое расстояние между ними. Параметры space работают только в том случае, если там есть реальное пространство ... т. Е. сумма детской ширины меньше ширины родителя.

Я также хотел бы, чтобы контейнеры были одинакового размера, но не были уверены, как это сделать, чтобы оно было отзывчивым.

Хотелось бы, чтобы текст в центре фактически был центром самого себя, а не только тегом «p».

завернул p в DIV, который делает две дивы равную высоту, а затем по центру текст, как обычно

хотел бы иметь его на больших экранах, что более чем один контейнер помещается на одной линии. Не уверен, что мне нужно обернуть вокруг него еще один гибкий контейнер.

Как вы сказали, вы можете добавить гибкий контейнер (с упаковкой), но вам по-прежнему нужно будет добавлять медиа-запросы по мере необходимости.

Расстояние между корневыми контейнерами.

Просто margin-bottom

.flex-container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    background-color: grey; 
 
    padding: 0; 
 
    margin-bottom: 1em; 
 
} 
 
.flex-sub-container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
} 
 
.flex-item-left-corner { 
 
    /*background-color: red;*/ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.flex-item-right-corner { 
 
    /*background-color: red;*/ 
 
    margin: 0; 
 
    padding: 0; 
 
    justify-content: flex-end; 
 
} 
 
.flex-bottom-middle { 
 
    /*background-color: red;*/ 
 
    align-self: center; 
 
    margin: 0; 
 
} 
 
.flex-sub-container2 { 
 
    /*background-color: yellow;*/ 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.flex-sub-item { 
 
    background-color: green; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    flex-grow: 1; 
 
} 
 
.flex-qty { 
 
    margin: 0; 
 
    font-size: 28pt; 
 
} 
 
.flex-qty-label { 
 
    margin: 0 5pt 5pt 5pt; 
 
} 
 
.flex-center { 
 
    background-color: royalblue; 
 
    font-size: 15pt; 
 
    flex: 3; 
 
    margin-left: 2em; 
 
    text-align: center; 
 
}

<div class="flex-container card-panel teal lighten-2"> 
 
    <div> 
 
    <div class="flex-sub-container"> 
 
     <p class="flex-item-left-corner">Left Top</p> 
 
     <p class="flex-item-right-corner">Right Top</p> 
 
    </div> 
 
    </div> 
 
    <div> 
 
    <div class="flex-sub-container2"> 
 
     <div class="flex-sub-item"> 
 
     <p class="flex-qty">7</p> 
 
     <p class="flex-qty-label">Label</p> 
 
     </div> 
 
     <div class="flex-center"> 
 
     <p>This is my very long center text.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <p class="flex-bottom-middle">Bottom Middle</p> 
 
</div> 
 

 
<div class="flex-container card-panel teal lighten-2"> 
 
    <div> 
 
    <div class="flex-sub-container"> 
 
     <p class="flex-item-left-corner">Left Top</p> 
 
     <p class="flex-item-right-corner">Right Top</p> 
 
    </div> 
 
    </div> 
 
    <div> 
 

 
    <div class="flex-sub-container2"> 
 

 
     <div class="flex-sub-item"> 
 
     <p class="flex-qty">7</p> 
 
     <p class="flex-qty-label">Label</p> 
 
     </div> 
 
     <div class="flex-center"> 
 
     <p>This is my very long center text.</p> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
    <p class="flex-bottom-middle">Bottom Middle</p> 
 
</div>