CSS Flexbox 布局未按预期工作答案

【问题标题】：CSS Flexbox layout not working as per expectationCSS Flexbox 布局未按预期工作
【发布时间】：2021-07-28 01:19:14
【问题描述】：

我在以下链接上托管了我的 react 应用程序 -

我正在使用 CSS Flexbox 进行布局。当我低于 560 像素（对于手机屏幕）时，疫苗选择按钮未正确对齐列。那里有一些奇怪的重叠。有人可以帮助我并指出正确的方向吗？几个小时以来，我一直在集思广益。

【问题讨论】：

【解决方案1】：

您在错误的元素中编写了 flex CSS，或者没有在适当的元素上编写。您必须将 CSS 添加到 -

.main-wrapper > div {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

更具体地说，如果您想将 CSS 应用于第一个遇到的 div 元素，那么试试这个-

.main-wrapper > div:first-of-type {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

:first-of-type CSS 伪类表示一组同级元素中其类型的第一个元素。

【讨论】：

【解决方案2】：

你可以给包含重叠元素的div元素一个cont-box的类并使用以下更新您的 CSS

@media(max-width:560px){
 .cont-box{
  display: flex; 
  flex-direction: column;
 }
}

【讨论】：