flexbox фиксированная ширина и фиксированное количество строк - PullRequest
Новая
       10

flexbox фиксированная ширина и фиксированное количество строк

0 голосов
/ 29 октября 2018

Я сделал сайт и использовал CSS flexbox для верстки.

Сначала посмотрите на приведенный ниже код, с которым я работал. 

html, body {
  margin: 0;
  padding: 0;
}
.wrap {
  height: 100%;
  background-color: antiquewhite;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.box {
  flex: 0 0 350px;
  height: 350px;
  background-color: aquamarine;
  border: 1px solid black;
}
<html>
<body>
  <div class="wrap">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</body>
</html>

Моя цель здесь.

  1. Установите ширину каждой ячейки равной 350px.

  2. Независимо от размера браузера, в одной строке должно быть только 3 поля. (Если размер браузера увеличивается)

  3. Не учитывать случай браузера меньшего размера.

Итак, я определил flex: 0 0 350px до .box и flex-wrap: wrap до .wrap

Но это работает иначе, чем я ожидал.

Есть ли способ реализовать flexbox фиксированной ширины?

Или решение здесь?

Спасибо.

1 Ответ

0 голосов
/ 29 октября 2018 

html, body {
  margin: 0;
  padding: 0;
/* add height so that .wrap height: 100% knows what it's a percentage of */
height:100%;
}
.wrap {
  height: 100%;
  background-color: antiquewhite;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
/* add widths so that you will always have three in a row */
min-width:1056px; /* extra 6px to cater for border */
max-width:1056px;
width:1056px;
}
.box {
  flex: 0 0 350px;
  height: 350px;
  background-color: aquamarine;
  border: 1px solid black;
}
<html>
<body>
  <div class="wrap">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...