如何使用 flex-box 和更改 window 大小使我的页面看起来不错？

Question

我一直在调整我的 CSS 以使我的页面在移动设备和其他尺寸的 window 上看起来不错。我得到它主要看起来不错，但我唯一不喜欢的是当 window 是中等大小（像平板电脑一样）时，一行有 2 个框，第二行有第三个框。在我看来，这看起来真的很糟糕。当第三个框被推到第二行时，是否有可能将所有三个框放入一列并稍微升级每个框的大小以填充一些空的 space?

我一直在研究 flex-grow/shrink 但我并没有真正了解它们是否是我所需要的。我也知道有一个媒体查询的东西，但也不太明白。这是我当前未调整大小的页面：www.catherinemeza.com

以下是我到目前为止调整后的代码：（注释是旧代码或我尝试调整大小的内容）

body {
    background-color: #e9cffb;
    margin-top: 100px;
}

.About {
    font-size: 20px;
}

.Name {
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
}

#All {
    height: 500px;
    /* width: 1500px;
    margin: 50px auto; */
    /* border: 5px solid black; */
    /* box-sizing: content-box;
    width: 100%; */
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

#ALL > * {
    flex: 1 1 0;
}

#One {
    display: block;
    position: relative;
    margin: 1px;
    width: 500px;
    height: 500px;
    border: 5px solid black;
    /* justify-content: space-between; */
    flex-wrap: wrap;
    /* box-sizing: content-box;
    width: 30%; */
}

/* #One p {
    width: 490px;
    height: 490px;
    position: absolute;
    bottom: -600px;
    z-index: 1;
    transition: 1s;
} */

/* #One:hover p {
    opacity: .6;
    bottom: -30px;
    width: 500px;
    height: 500px;
} */

.Two {
    display: block;
    position: relative;
    margin: 1px;
    width: 500px;
    height: 500px;
    border: 5px solid black;
    /* justify-content: space-between; */
    flex-wrap: wrap;
    /* box-sizing: content-box;
    width: 30%; */
}

/* .Two p {
    width: 500px;
    height: 500px;
    position: absolute;
    margin-left: 10px;
    bottom: -600px;
    z-index: 1;
    transition: 1s;
    text-align: center;
    color: rgb(218, 202, 228);
    background-color: rgb(7, 70, 21);
    border: .5px green solid;
    border-radius: 20px;
}

.Two:hover p {
    opacity: .7;
    bottom: -10px;
    width: 500px;
    height: 175px;
} */

#Three {
    display: block;
    position: relative;
    margin: 1px;
    width: 500px;
    height: 500px;
    border: 5px solid black;
    /* justify-content: space-between; */
    flex-wrap: wrap;
    /* box-sizing: content-box;
    width: 30%; */
}

/* #Three p {
    width: 490px;
    height: 490px;
    position: absolute;
    bottom: -600px;
    z-index: 1;
    transition: 1s;
}

#Three:hover p {
    opacity: .6;
    bottom: -30px;
    width: 500px;
    height: 500px;
}

a {
    text-decoration: none;
    font-size: 20px;
    color: chartreuse;
} */

Answer 1

你提供的link对我不起作用，但你可以使用媒体查询和flexbox解决这个问题。您要做的是打开开发工具，以便您可以查看页面的当前宽度（以像素为单位）。将页面大小调整到您想要更改的位置（对于您的情况，当第三个框进入第二行时）。当屏幕为 px 或更小时创建一个媒体查询，然后您可以添加样式来编辑框的宽度和布局。我在下面包含了一个示例。

分解一下，这段代码是说当屏幕宽度为 992px 或更小时，将#All 设为列布局并将项目居中对齐。此外，更改每个框的宽度以占据其容器的 100%。您可以根据需要编辑样式，但如果您有任何问题，请不要害怕提问！

@media screen and (max-width: 992px) {
  #All {
    flex-direction: column;
    align-items: center;
  }
  #One, .Two, #Three {
     width: 100%;
  }
}

如何使用 flex-box 和更改 window 大小使我的页面看起来不错？

How do I make my page look good with flex-box and changing window sizes?

css

resize

media-queries

flexbox