Как исправить ширину элемента flexbox - PullRequest
Новая
       14

Как исправить ширину элемента flexbox

0 голосов
/ 18 октября 2019

Я хочу добавить отзывчивую страницу, которая содержит много карт разной ширины, например, я хочу, чтобы первая карта имела 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>

1 Ответ

0 голосов
/ 18 октября 2019

Пример того, что у вас сейчас есть, даст вам лучшую обратную связь по этому вопросу ... но пробовали ли вы использовать процент экрана вместо фиксированных пикселей вместо 520px и 300px, используйте width=63% и width=36%.

...