There are 2 tables, in a small window they look symmetrical, but as soon as I expand to full screen, the left column goes up.

How to solve it?

html { max-width: 100%; max-height: 100%; margin: 0; font-family: helvetica; background: #d1d1d1; } body { padding: 10px; } header { text-align: center; color: #000000; font-size: 30px; } .colr { color: #2f2d2d; font-size: 100%; /* Размер шрифта */ border-bottom: 2px solid #000000; /* Параметры линии под текстом */ font-weight: normal; /* Убираем жирное начертание */ padding-bottom: 5px; /* Расстояние от текста до линии */ } .colr2 { color: #2f2d2d; font-size: 80%; /* Размер шрифта */ border-bottom: 0px solid #000000; /* Параметры линии под текстом */ font-weight: normal; /* Убираем жирное начертание */ padding-bottom: 5px; /* Расстояние от текста до линии */ } .flex-container { display: flex; flex-direction: column; } .column-reverse { display: flex; flex-direction: column; } /* отображение блоков ровномерно -------------------- */ .flex-container { margin: auto; float: left; width: 45%; padding: 5px; background: #c4c4c4; border-radius: 20px; justify-content: center; } .column-reverse { margin: auto; float: right; width: 45%; padding: 5px; background: #c4c4c4; border-radius: 20px; justify-content: center; } .flex-item { margin: 30px; padding: 90px; background: #afafaf; border-radius: 5px; border: 1px solid #FFF; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } 
 <header> <span class="colr"><b>ЧАО "СЕВГОК" ЦПО 1 УЧАСТОК №2</b></span> </header> <span class="colr2"><b>Гистограмми распределения гранулометрического состава окатышей по чашевым окомкователям</b></span> <div class="flex-container"> <div class="flex-item"> 1 CHARTS </div> <div class="flex-item"> 2 CHARTS </div> <div class="flex-item"> 3 CHARTS </div> </div> <div class="column-reverse"> <div class="flex-item"> 4 CHARTS </div> <div class="flex-item"> 5 CHARTS </div> <div class="flex-item"> 6 CHARTS </div> </div>

  • Wrap them and already wrap set display flex. - Maxim Vorobev
  • Why was the header for the body ? - Air
  • Put the header in front of the body, but nothing has changed - Karter
  • Well, in this example would not have changed, it's just that it is already bad, you have to be more careful. All content should be in the body - Air

1 answer 1

flex - правило for flex - контента will not work if there is no flex - контейнера

 * { margin: 0; padding: 0; } html, body { max-width: 100%; max-height: 100%; font-family: helvetica; background: #d1d1d1; } body { padding: 10px; } header { text-align: center; color: #000000; font-size: 30px; } .colr { color: #2f2d2d; font-size: 100%; border-bottom: 2px solid #000000; font-weight: normal; padding-bottom: 5px; } .colr2 { color: #2f2d2d; font-size: 80%; border-bottom: 0px solid #000000; font-weight: normal; padding-bottom: 5px; } /* это то что добавлено -------------------- */ .main-flex-container { display: flex; } /* --------------------- -------------------- */ .flex-container { display: flex; flex-direction: column; } .column-reverse { display: flex; flex-direction: column; } /* отображение блоков ровномерно -------------------- */ .flex-container { margin: auto; /*float: left; зачем flex - контенту float*/ width: 45%; padding: 5px; background: #c4c4c4; border-radius: 20px; justify-content: center; } .column-reverse { margin: auto; /*float: right; зачем flex - контенту float*/ width: 45%; padding: 5px; background: #c4c4c4; border-radius: 20px; justify-content: center; } .flex-item { margin: 30px; padding: 90px; background: #afafaf; border-radius: 5px; border: 1px solid #FFF; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } 
 <header> <span class="colr"><b>ЧАО "СЕВГОК" ЦПО 1 УЧАСТОК №2</b></span> </header> <span class="colr2"><b>Гистограмми распределения гранулометрического состава окатышей по чашевым окомкователям</b></span> <!-- это то что добавлено --> <div class="main-flex-container"> <div class="flex-container"> <div class="flex-item"> 1 CHARTS </div> <div class="flex-item"> 2 CHARTS </div> <div class="flex-item"> 3 CHARTS </div> </div> <div class="column-reverse"> <div class="flex-item"> 4 CHARTS </div> <div class="flex-item"> 5 CHARTS </div> <div class="flex-item"> 6 CHARTS </div> </div> </div>