水平填充不能在手机屏幕上使用css flexbox

Question

我是网页开发的新手。我遇到了两个问题，并找到了解决方案 - 但无法解释解决方案的原因。如果有更多经验的人可以帮我解决问题，请。非常感激。

我没有搜索整个网络和stackoverflow，并没有真正找到一个很好的解释。谢谢

1）问题1： 我已经得到了你的div：父母.title_bar和两个孩子：.title_num和.title_text。我中心在水平和垂直方向与母公司中对儿童： 显示：弯曲 对齐项：中心 证明内容：中心

我添加填充：50像素，以.title_bar了吧，自动获得更高适应。在较小的屏幕上显示title_text和.title_num。

如果我将flex-flow：row 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屏幕和（最大宽度：500像素） 在里面，我改变了flexbox为小屏幕的列流，以便.title_text和.title_num包装成功。另外，柔性流动：小型屏幕的行包装也可以工作。我不明白为什么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： 如果在.title_bar中将padding：50px更改为padding：50px 0，突然间所有内容都会正确居中。它看起来像.title_bar上的水平填充和justify-content：center; （对于行流）或对齐项：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的水平填充（或者对齐justify-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; 
} 

为了防止元件从彼此堆叠时在500像素宽屏幕和下方，只是降低低于500px的两个项目的字体大小的顶部。

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