CSS - элементы Flex с полем справа

Я хочу создать сетку блоков с помощью CSS Flex.

Блоки должны располагаться в трех столбцах, и они должны составлять треть ширины родительского контейнера.

Моя проблема в том, что мне нужно правое поле на блоках.

Блоки должны составлять процент от контейнера, поэтому я не могу использовать пространство между ними.

.block {
  border: 1px solid lightgrey;
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
  max-width: 900px;
}

.block__item {
  background: grey;
  height: 20px;
  margin-right: 2px;
  //margin-bottom: 2px;
  width: 33.33%;
}

.block__item:nth-child(3n){
  margin-right: 0;
}

<div class = "block">
  <div class = "block__item"></div>
  <div class = "block__item"></div>
  <div class = "block__item"></div>
  <div class = "block__item"></div>
  <div class = "block__item"></div>
</div>

"Поэтому я не могу использовать пробел между" - space-between в сочетании без маржи и width: calc(33.33% - 2px)…?

— 15.01.2019 16:41

css flexbox

15.01.2019 16:33

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

3 862

Ответы 5

Судя по вашему вопросу, я считаю, что вы пытаетесь добиться именно этого:

  .block {
  border: 1px solid lightgrey;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 5px;
  max-width: 900px;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
   justify-content: space-between;
}

.block__item {
  background: grey;
  height: 20px;
  margin-right: 2px;
  margin-bottom: 2px;
  width: 33%;
}

<div class = "block">
    <div class = "block__item"></div>
      <div class = "block__item"></div>
      <div class = "block__item"></div>
      <div class = "block__item"></div>
      <div class = "block__item"></div>
      <div class = "block__item"></div>
      <div class = "block__item"></div>
      <div class = "block__item"></div>
      <div class = "block__item"></div>
    </div>

Я добавил префиксы поставщиков, чтобы они отображались единообразно во всех браузерах. Вы можете настроить интервал между полями, отрегулировав процентное соотношение (т.е. 31% ширины). Если вы планируете часто использовать Flexbox, вам следует посетить этот сайт, чтобы найти быстрые версии от поставщиков: http://the-echoplex.net/flexyboxes/

15.01.2019 16:57

Может быть, вы можете просто уменьшить ширину блоков, а остальная часть witdh присвоить это поле.

Нравится:

.block__item {
    background: grey;
    height: 20px;
    margin-right: 3%;
    width: 30%;
}

15.01.2019 17:16

Проблема заключается в набивке контейнера. Но вы можете использовать width: calc((100% - 10px) / 3); для расчета правильных 33,33% ширины контейнера без учета заполнения.

.block {
  border: 1px solid lightgrey;
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
  max-width: 900px;
}

.block__item {
  background: grey;
  height: 20px;
  margin-right: 2px;
  margin-bottom: 2px;
  width: calc((100% - 10px) / 3);
}

.block__item:nth-child(3n){
  margin-right: 0;
}

<div class = "block">
  <div class = "block__item"></div>
  <div class = "block__item"></div>
  <div class = "block__item"></div>
  <div class = "block__item"></div>
  <div class = "block__item"></div>
</div>

15.01.2019 18:00

Немного поздно на вечеринку, но я нашел рабочий хак:

Сделайте автоматическое переполнение на элементе контейнера вокруг него и дайте самому элементу невидимую границу 8 пикселей на той стороне (ах), где вы ожидаете появления полосы прокрутки. Когда полоса прокрутки отображается, она будет отображаться поверх невидимой границы, а не поверх содержимого.

25.09.2020 18:58

Очень хороший вопрос

.block {
  border: 1px solid lightgrey;
  display: flex;
  flex-wrap: wrap;
  max-width: 900px;
  margin-left: -1px;
  margin-right: -1px;
}

.block__item {
  background: grey;
  background-clip: content-box;
  height: 20px;
  flex-basis: 33.33%;
  box-sizing: border-box;
  padding-left: 1px;
  padding-right: 1px;
  margin-bottom: 2px;
}

<div class = "block">
  <div class = "block__item"></div>
  <div class = "block__item"></div>
  <div class = "block__item"></div>
  <div class = "block__item"></div>
  <div class = "block__item"></div>
</div>

На самом деле, это хорошая практика - разделять макет и контент в html.

.b-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -1px;
  margin-right: -1px;
}
.b-row > .b-col {
  flex-basis: 33.33%;
  box-sizing: border-box;
  padding-left: 1px;
  padding-right: 1px;
  margin-bottom: 2px;
}

.block__item {
  background-color: grey;
  height: 20px;
}

<div class = "block">
  <div class = "b-row">
    <div class = "b-col">
      <div class = "block__item">asdfasfasdf</div>
    </div>
    <div class = "b-col">
      <div class = "block__item">asdfasfdasf</div>
    </div>
    <div class = "b-col">
      <div class = "block__item">asdfasdfas</div>
    </div>
    <div class = "b-col">
      <div class = "block__item">asdfasdfa</div>
    </div>
    <div class = "b-col">
      <div class = "block__item">asdfasdfadsf</div>
    </div>
  </div>
</div>

В любом случае, вы можете выбрать свое предпочтение.

04.01.2021 19:48