Горизонтальная прокладка не работает с css flexbox на мобильных экранах

Question

Я новичок в веб-разработке. Я столкнулся с двумя проблемами и нашел для них решения, но не могу объяснить, почему решение работает. Если кто-то, у кого больше опыта, может обойти их для меня, PLS. Очень признателен.

Я искал по всей сети и в stackoverflow и не мог найти хорошее объяснение. Спасибо

1) Проблема 1: У меня есть thee div: родительский .title_bar и два дочерних: .title_num и .title_text. Я центрирования детей внутри родителя как горизонтально, так и вертикально с: дисплей: сгибать ALIGN-элементы: центр оправдает-содержание: Центр

добавить отступы: 50px к .title_bar для бара, чтобы автоматически получить выше для размещения. title_text и .title_num на меньших экранах.

Если я добавлю flex-flow: wrap для строки в .title_bar, элементы должны обернуться для меньшего размера экрана, правильно? Вместо этого конечные буквы в .title_text выходят за пределы экрана справа.

Код: https://codepen.io/stefanio/pen/vgJLpe?editors=1100#0

HTML:

<div class="instr title_bar"> 


    <div class="instr title_num">1</div> 
    <div class="instr title_text">GUIDEBOOK</div> 

    </div> 

CSS:

/*top purple bar*/ 
div.instr.title_bar{ 
    width:100vw; 
    background-color:#670536; 
    display:flex; 
    align-items:center; 
    justify-content: center; 
    padding:50px; 
    flex-flow: row wrap; 
} 


.instr.title_text{ 
    font-size:3rem; 
    padding:10px; 
    order:2; 
    color:white; 
} 
.instr.title_num{ 
    background-color:#1E091C; 
    color:white; 
    padding:15px; 
    border-radius:50%; 
    font-size:3rem; 
    width:50px; 
    height: 55px; 
    order:1; 
    text-align:center; 

} 

2) Решение задачи 1: Добавлено: @media экран и (макс-ширина: 500px) Внутри я изменил flexbox на поток столбцов для небольших экранов для того, чтобы .title_text и .title_num обернуть успешно. Альтернативно, flex-flow: свертка строк для небольших экранов также может работать. Я не совсем понимаю, почему Flexbox не автоматически переносит элементы здесь на более мелкие экраны, и для его учета необходимо добавить отдельный кусок кода.

CSS код добавляется в 1) (К сожалению, не может оставить codepen из-за правил здесь):

@media screen and (max-width: 500px){ 
    .instr.title_bar{ 
    flex-direction:column; 
    /* 
    or flex-flow: row-wrap; 
    */ 
    } 

3) Задача 2: Если проверить окончательный код на 2) в маленький размер экрана, вы заметите, что .title_text и .title_num не центрированы.

4) Решение 2: Если я изменяю заполнение: 50px для заполнения: 50px 0 в .title_bar, внезапно все становится правильно центрированным. Это похоже на горизонтальное заполнение на .title_bar и justify-content: center; (для потока строк) или выравнивания: центр; (для потока столбцов) мешают друг другу, и я тоже не нашел правдоподобного объяснения.

Код: https://codepen.io/stefanio/pen/NdvGZY/?editors=1100#0

HTML код:

<div class="instr title_bar"> 


    <div class="instr title_num">1</div> 
    <div class="instr title_text">GUIDEBOOK</div> 

    </div> 

CSS код:

/*top purple bar*/ 
div.instr.title_bar{ 
    width:100vw; 
    background-color:#670536; 
    display:flex; 
    align-items:center; 
    justify-content: center; 
    padding:50px 0; 
} 


.instr.title_text{ 
    font-size:3rem; 
    padding:10px; 
    order:2; 
    color:white; 
} 
.instr.title_num{ 
    background-color:#1E091C; 
    color:white; 
    padding:15px; 
    border-radius:50%; 
    font-size:3rem; 
width:50px; 
    height: 55px; order:1; 
    text-align:center; 

} 


/*mobile settings (below 500px sceen size)*/ 
@media screen and (max-width: 500px){ 
    .instr.title_bar{ 
    flex-direction:column; 
    /* 
    or flex-flow: row-wrap; 
    */ 
    } 

Резюме моих проблем: 1) гибкого потока: строка компресс; в .title_bar не обертывание/укладка детей по мере того, как экран сжимается и 2) align-items: center; в .title_bar разрушается (т. е. больше не центрируется по горизонтали) на экране < 500px и flex-direction: column; всякий раз, когда на панели .title_bar имеется горизонтальная прокладка 50px (или она используется для выравнивания-content: center, если используется flex-direction: row;). Я решил эти проблемы, но мне любопытно, в чем причина этих проблем. Спасибо

Answer 1

Используйте атрибут «line-height» для вертикального выравнивания чего-либо внутри div. Поскольку высота элемента, окружающая «title_num», равна 55px, тогда вы должны добавить «line-height: 55px» для вертикального выравнивания.

.instr.title_num{ 
    background-color:#1E091C; 
    color: #fff; 
    padding: 15px; 
    border-radius: 50%; 
    font-size: 3rem; 
    width: 50px; 
    height: 55px; 
    line-height: 55px; 
    text-align: center; 
} 

Чтобы предотвратить элементы из укладки друг на друга, когда по ширине и ниже экрана 500px, просто понизить размер шрифта обоих пунктов ниже 500px.

/*mobile settings (below 500px screen size)*/ 
@media screen and (max-width: 500px){ 
    .instr.title_num, 
    .instr.title_text{ 
    font-size: 2rem; 
    } 
}