Элемент заголовка вертикального центра и группа встроенных divs с использованием flexbox

Question

У меня есть один элемент <h1> и три div с шириной 33%. Все эти 4 элемента находятся в контейнере с высотой, равной 100vh.

На данный момент я могу выровнять по горизонтали три div, но когда я вставляю тег <h1>, он выравнивается рядом с ними.

Как я могу выровнять <h1> сверху и три элемента под ним только в центре страницы?

.outside { 
 
    background-color: red; 
 
    height: 100vh; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.inside { 
 
    background-color: yellow; 
 
    width: 30%; 
 
    margin-left: 1.5%; 
 
    margin-right: 1.5%; 
 
    float: left; 
 
}

<div class="outside"> 
 
    <div> 
 
    <h1> This is another</h1> 
 
    </div> 
 
    <div class="inside"> 
 
    <h1>This is h1 tag</h1> 
 
    <p>This is paragraph</p> 
 
    </div> 
 
    <div class="inside"> 
 
    <h1>This is h1 tag</h1> 
 
    <p>This is paragraph</p> 
 
    </div> 
 
    <div class="inside"> 
 
    <h1>This is h1 tag</h1> 
 
    <p>This is paragraph</p> 
 
    </div> 
 

 
</div>

My JSFiddle is here

Answer 1

Его, потому что ваш h1 находится внутри "снаружи" DIV, точно так же, как желтые ящики. Поэтому вам нужно добавить еще один div, один для содержания h1 и один для хранения желтых ящиков.

Так структура будет что-то вроде этого:

<div class="container"> 
    <div class="h1"><h1>hello</h1></div> 
<div class="yellowcontainer"> 
    <div class="yellows"><h1>yellow</h1></div> 
</div> 
</div> 

, а затем добавить прогибаются только сОн класс h1 и yellowcontainer, потому что, если вы добавите его на весь контейнер, ваш h1 и yellowcontainer будут хотеть быть рядом друг с другом.

Answer 2

Вы можете установить разные значения ширины или гибкости и сбросить поля, чтобы контейнер переместился в центр.

https://jsfiddle.net/qdp1g7r0/6/

.outside { 
 
    background-color: red; 
 
    height: 100vh; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
} 
 

 
.inside { 
 
    background-color: yellow; 
 
    flex:1 1 30%; 
 
    margin:0 1.5% auto; 
 

 
} 
 

 
.outside > div:first-of-type { 
 
flex:1 1 100%; 
 
margin:auto 0 0; 
 

 
}

<div class="outside"> 
 
    <div> 
 
    <h1> This is another</h1> 
 
    </div> 
 
    <div class="inside"> 
 
    <h1>This is h1 tag</h1> 
 
    <p>This is paragraph</p> 
 
    </div> 
 
    <div class="inside"> 
 
    <h1>This is h1 tag</h1> 
 
    <p>This is paragraph</p> 
 
    </div> 
 
    <div class="inside"> 
 
    <h1>This is h1 tag</h1> 
 
    <p>This is paragraph</p> 
 
    </div> 
 

 
</div>

Answer 3

• Разделить h1 и .inside элементы в двух различных участках в пределах .outside элемента.
• .outside до flex-direction: column.
• Установить контейнер для .inside к flex-direction: row (установка по умолчанию)
• Кроме того, избежать, используя проценты по краю и дополнения в гибком контейнере (explanation).

.outside { 
 
    display:flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    height: 100vh; 
 
    background-color: red; 
 
    flex-direction: column;  /* new; overrides default flex-direction: row */ 
 
} 
 

 
section { 
 
    display: flex;    
 
    flex-direction: row; 
 
} 
 

 
.inside { 
 
    width: 30%; 
 
    margin-left: 1.5%;   /* not recommended; don't use percentage margin ... */ 
 
    margin-right: 1.5%;   /* or padding on flex items... */ 
 
    background-color: yellow; /* https://stackoverflow.com/a/36783414/3597276 */ 
 
}

<div class="outside"> 
 
    <h1>This is another</h1> 
 
    <section> 
 
    <div class="inside"> 
 
     <h1>This is h1 tag</h1> 
 
     <p>This is paragraph</p> 
 
    </div> 
 
    <div class="inside"> 
 
     <h1>This is h1 tag</h1> 
 
     <p>This is paragraph</p> 
 
    </div> 
 
    <div class="inside"> 
 
     <h1>This is h1 tag</h1> 
 
     <p>This is paragraph</p> 
 
    </div> 
 
    </section> 
 
</div>

Revised Fiddle