如何修复 flexbox 项目的宽度答案

【问题标题】：How to fix the width of a flexbox item如何修复 flexbox 项目的宽度
【发布时间】：2020-02-15 06:12:58
【问题描述】：

我想添加一个包含许多不同宽度的卡片的响应页面，例如我希望第一张卡片有 520 像素，第二张卡片有 300 像素等。但是当我从移动设备或设备打开它们时，它应该是响应式的有人建议我使用 flexbox 进行响应，但我使用它并且我不知道如何使用它来响应，我想用 css3 构建一个响应式页面我应该使用 flexbox 吗？

当我最小化浏览器时，没有带有此代码的响应页面：

#container-target {
  position: relative;
  background-color:#eeeeee; 
  max-width:590px;
  height:140px;
  border-radius:5px;
  display: flex;
  flex-direction: column;

}

.target {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.button {
  margin-right: 20px;
}

#container-target .title {
  background-color:#111f35;
  color:white;
  height:35px;
  border-radius:5px;
}

<!DOCTYPE html>

<html>

  <head>

    <title>Template</title>

    <meta charset="UTF-8" />

    <link rel="stylesheet" href="style.css" />

  </head>

  <body>

    <div id="container-target">

      <div class="title">

        CIBLAGE

      </div>

      <div class="body-target">

        <p>Envoyer à tout le monde ou cibler des utilisateurs.</p> 

        <div class="target">

            <div class="radio">

                <input type="radio" name="radio" />Tout le monde

              </div>

              <div class="button">

                <button>Créer un ciblage</button>

              </div>

        </div>


      </div>

    </div>

  </body>

</html>

【问题讨论】：

Flexbox 可能是一种方式。对于您的问题，可以加minimal, reproducible example吗？
flexbox 对于做出响应式的东西真的很有用，但是如果你有固定的宽度和高度，@media 规则也可能会有所帮助
是的，做起来真的很简单。有些框架预先构建了此代码，例如 bootstrap - getbootstrap.com/docs/4.0/layout/grid

标签： css responsive-design flexbox

【解决方案1】：

您当前拥有的示例将为您提供有关此问题的更好反馈...但是您是否尝试过使用屏幕百分比而不是固定像素而不是使用 520px 和 300px 使用 width=63% 和 @ 987654324@。

【讨论】：