Css 为什么 flexbox 中的在应用居中时不会调整大小

发布于09月13日

我试着将一个img放在一个弹性框中，并使其可调整大小.当我使用align-self: center或margin: auto居中时，它对所有分辨率都保持相同的大小.当我go 掉居中时，它可以完美地调整大小(但不是居中:v).

你知道我做错了什么吗？

编辑:我用{宽度:for me%；最大宽度:800px/for me/}解决了

//SASS
.hero {
  display: flex;
  flex-direction: column;
  img {
     max-width: 792px;
    align-self: center;
  }
}

//React

<section className="hero">
      <img src={collage} />
      <h1>Online Experiences</h1>
      <p>
        Join unique interactive activities led by one-of-a-kind hosts—all
        without leaving home.
      </p>
    </section>

推荐答案

例如，这是您的html代码:

<html>

<body>
    <div class="container">
        <div class="image">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" />
        </div>
        <div class="image">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" />
        </div>
        <div class="image">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" />
        </div>
    </div>
</body>

</html>

现在添加这CSS个代码可以帮助您:

.container {
        display: -webkit-flex;
        -webkit-flex-wrap: wrap;
        display: flex;
        flex-wrap: wrap;
        background-color: grey;
}

img {
        width: 100%;
}

div {
        flex: 1;
        padding: 10px;
        margin: 10px;
}

因此，这是完整的代码，HTML和CSS:

<html>

<head>
    <style>
        .container {
            display: -webkit-flex;
            -webkit-flex-wrap: wrap;
            display: flex;
            flex-wrap: wrap;
            background-color: grey;
        }

        img {
            width: 100%;
        }

        div {
            flex: 1;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="image">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" />
        </div>
        <div class="image">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" />
        </div>
        <div class="image">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" />
        </div>
    </div>
</body>

</html>

希望这对你有帮助.

祝好运.