Как добавить маржу в 1 пиксель к гибкому элементу, который является гибким: 0 0 25%?

Я тестирую несколько разных макетов с помощью flexbox, и у меня возникла следующая проблема.

У меня есть галерея изображений с гибкими элементами, настроенными для flex:0 0 25%;, и я хотел бы добавить к ним маржу в 1 пиксель, потому что 1% слишком велик. Так что мне было интересно, что мне делать в этом случае.

Прилагаю пример ниже.

#foto-container {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  justify-content: space-around;
  margin: 10px;
}

.foto {
  flex: 0 0 25%;
  min-height: 200px;
  background-color: red;
}


/*---------How I can add 1px to photo?-----------------*/

<link href = "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet" />
<div id = "foto-container">
  <div class = "foto foto1">1</div>
  <div class = "foto foto2">2</div>
  <div class = "foto foto3">3</div>
  <div class = "foto foto4">4</div>
  <div class = "foto foto5">5</div>
  <div class = "foto foto6">6</div>
  <div class = "foto foto7">7</div>
  <div class = "foto foto8">8</div>
  <div class = "foto foto9">9</div>
  <div class = "foto foto1">1</div>
  <div class = "foto foto2">2</div>
  <div class = "foto foto3">3</div>
</div>

Спасибо,

попробуйте calc(25% - 1px)

— 27.10.2018 11:57

html css flexbox

27.10.2018 11:54

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

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

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

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

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

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

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

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

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

591

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Например, вы можете использовать flex: 1 0 22%. Это позволит вашему элементу быть определенным 22% как flex-basis (так что только 4 элемента в строке), и они будут расти, чтобы заполнить оставшееся пространство, оставленное полями (поскольку для flex-grow установлено значение 1)

#foto-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 10px;
}

.foto {
  flex: 1 0 22%;
  min-height: 50px;
  margin: 1px;
  background-color: red;
}

<div id = "foto-container">
  <div class = "foto foto1">1</div>
  <div class = "foto foto2">2</div>
  <div class = "foto foto3">3</div>
  <div class = "foto foto4">4</div>
  <div class = "foto foto5">5</div>
  <div class = "foto foto6">6</div>
  <div class = "foto foto7">7</div>
  <div class = "foto foto8">8</div>
  <div class = "foto foto9">9</div>
  <div class = "foto foto1">1</div>
  <div class = "foto foto2">2</div>
  <div class = "foto foto3">3</div>
</div>

Значение flex-basis должно быть больше, чем (20% - margin * 2), и ниже, чем (25% - margin * 2). Первое значение позволит вам иметь 5 элементов в строке, поэтому большее значение сделает их 4, а большее значение, чем второе, сделает количество элементов равным 3 в строке.

#foto-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 10px;
}

.foto {
  flex: 1 0 21%;
  min-height: 50px;
  margin: 1px;
  background-color: red;
  animation: change 4s linear infinite alternate; 
}

@keyframes change {
  0%,40% {flex: 1 0 calc(20% - 2 * 1px);background:yellow;}
  41%,59% {background:red;}
  60%,100% {flex: 1 0 calc(25% - 2 * 1px + 1px);background:green;}
}

<div id = "foto-container">
  <div class = "foto foto1">1</div>
  <div class = "foto foto2">2</div>
  <div class = "foto foto3">3</div>
  <div class = "foto foto4">4</div>
  <div class = "foto foto5">5</div>
  <div class = "foto foto6">6</div>
  <div class = "foto foto7">7</div>
  <div class = "foto foto8">8</div>
  <div class = "foto foto9">9</div>
  <div class = "foto foto1">1</div>
  <div class = "foto foto2">2</div>
  <div class = "foto foto3">3</div>
</div>

27.10.2018 12:04

Это возможно с гибкостью, как показано в другой ответ к этому сообщению.

Ваш вопрос также освещен в этом посте: Flexbox: 4 элемента в строке

Однако, если вам интересно, есть еще более простое решение с CSS Grid.

#foto-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1px;
  margin: 10px;
}

.foto {
  min-height: 200px;
  background-color: red;
}

<div id = "foto-container">
  <div class = "foto foto1">1</div>
  <div class = "foto foto2">2</div>
  <div class = "foto foto3">3</div>
  <div class = "foto foto4">4</div>
  <div class = "foto foto5">5</div>
  <div class = "foto foto6">6</div>
  <div class = "foto foto7">7</div>
  <div class = "foto foto8">8</div>
  <div class = "foto foto9">9</div>
  <div class = "foto foto1">1</div>
  <div class = "foto foto2">2</div>
  <div class = "foto foto3">3</div>
</div>

27.10.2018 14:46

вы можете использовать метод calc для решения этой проблемы flex: calc (33,33% - 5%);

.digit-grid {
  display: flex;
  flex-wrap: wrap;
  font-size: 2em;
}

.box {
    flex: calc(33.33% - 5%);
    margin: 5px 5px;
    background: gray;
    height: 50px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

HTML идет сюда

<div class = "digit-grid">
   <div class = "box box1">1</div>
   <div class = "box box2">2</div>
   <div class = "box box3">3</div>
   <div class = "box box4">4</div>
   <div class = "box box5">5</div>
   <div class = "box box6">6</div>
   <div class = "box box7">7</div>
   <div class = "box box8">8</div>
   <div class = "box box9">9</div>
   <div class = "box box10">10</div>
   <div class = "box box11">11</div>
   <div class = "box box12">12</div>
</div>

12.04.2019 11:15

Другие вопросы по теме

CSS 3D-анимация с эффектом вертикального переворота выглядит неправильно

Встраивать среднюю страницу CSS - плохая идея?

Выпадающее меню на чистом CSS без Javascript

Настраиваемый CSS-код радиообмена при изменении

Название карусели исчезает

Почему я не могу переместить некоторые из моих столов с позиционированием?

Ошибка AJAX при обработке данных ответа для отображения

Конвертер JSON в CSV со стилем с использованием javascript

Определите, просматривается ли страница в стандартном браузере Samsung или как отдельное веб-приложение

Как показать два абзаца в одном с точками с помощью CSS?

Как добавить маржу в 1 пиксель к гибкому элементу, который является гибким: 0 0 25%?

Ответы 3

Другие вопросы по теме

Похожие вопросы