Пространство между элементами гибкости

В настоящее время я пытаюсь изучить Flex Box, но моих знаний недостаточно, чтобы знать, что искать в Google или Stack.

Я хочу, чтобы первый элемент, 'склад', был выровнен по левому краю гибкого контейнера, а значок социальной сети последний был выровнен по правому краю.

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

.flex-container {
 width: 100%;
 padding-left: 0;
 padding-right: 0;
 }
 
 #flex-items {
 display: flex;
 flex-direction: row;
 flex-wrap: nowrap;
 justify-content: flex-end;
 background-color: orange;
 }
 
 .stock {
 margin-right: auto;
 background-color: #6dc993;
 display: flex;
 border: 2px solid blue;
 flex-grow: 1;
 }
 
 .stock > p {
 margin-left: 5%;
 display: flex;
 align-self: center;
 font-size: 20px;
 color: white;
 height: 20%;
 }

<div class = "flex-container">
<div id = "flex-items">
<div class = "stock"><p>Stock List</p></div>
<div><img title = "Like us on Facebook" src = "http://i.cubeupload.com/ULYeTe.jpg" alt = "Like us on Facebook" width = "68" height = "76" /></div>
<div><img title = "Like us on Facebook" src = "http://i.cubeupload.com/ULYeTe.jpg" alt = "Like us on Facebook" width = "68" height = "76" /></div>
<div><img title = "Like us on Facebook" src = "http://i.cubeupload.com/ULYeTe.jpg" alt = "Like us on Facebook" width = "68" height = "76" /></div>
<div><img title = "Like us on Facebook" src = "http://i.cubeupload.com/ULYeTe.jpg" alt = "Like us on Facebook" width = "68" height = "76" /></div>
<div><img title = "Like us on Facebook" src = "http://i.cubeupload.com/ULYeTe.jpg" alt = "Like us on Facebook" width = "68" height = "76" /></div>
</div>
</div>

html css flexbox

14.05.2018 16:47

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

1 696

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

Ответы 5

Я избавился от flex-grow на .stock, потому что это позволило ему разрастись, чтобы уместить остальное пространство, а это именно то, чего вы не хотите, а затем нацеливаю на div социальных сетей и добавляю маржу, чтобы разнести их. (Или вы можете добавить еще один контейнер вокруг значков и согнуть их между ними). Затем я добавляю ширину к заготовке, например 40%. Можно сделать эту ширину такой же гибкой, как говорят другие.

.flex-container {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

#flex-items {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  background-color: orange;
}

.stock {
  width: 40%;
  margin-right: auto;
  background-color: #6dc993;
  display: flex;
  border: 2px solid blue;
}

.stock>p {
  margin-left: 5%;
  display: flex;
  align-self: center;
  font-size: 20px;
  color: white;
  height: 20%;
}

#flex-items div:not(:first-of-type) {
  margin-left: 10px;
}

<div class = "flex-container">
  <div id = "flex-items">
    <div class = "stock">
      <p>Stock List</p>
    </div>
    <div><img title = "Like us on Facebook" src = "http://i.cubeupload.com/ULYeTe.jpg" alt = "Like us on Facebook" width = "68" height = "76" /></div>
    <div><img title = "Like us on Facebook" src = "http://i.cubeupload.com/ULYeTe.jpg" alt = "Like us on Facebook" width = "68" height = "76" /></div>
    <div><img title = "Like us on Facebook" src = "http://i.cubeupload.com/ULYeTe.jpg" alt = "Like us on Facebook" width = "68" height = "76" /></div>
    <div><img title = "Like us on Facebook" src = "http://i.cubeupload.com/ULYeTe.jpg" alt = "Like us on Facebook" width = "68" height = "76" /></div>
    <div><img title = "Like us on Facebook" src = "http://i.cubeupload.com/ULYeTe.jpg" alt = "Like us on Facebook" width = "68" height = "76" /></div>
  </div>
</div>

спасибо, просто удалил бы flex-grow и добавил flex-items> div: nth-child (n + 2) {padding-left: 10px; } тоже работают?

— 14.05.2018 17:21

Да, селектор кажется правильным для всех элементов после первого. Я бы лично использовал маржу для интервала. Если это ссылки, заполнение просто заставит ссылку включать пустое пространство

— 14.05.2018 18:43

Или вы можете добавить класс ко всем этим div, чтобы их было проще выбирать, как предлагали другие.

— 14.05.2018 21:54

14.05.2018 16:53

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

Вот мое решение твоей проблемы

.stock {
   margin-right: auto;
   background-color: #6dc993;
   display: flex;
   border-right: 5px solid blue;
   flex-grow: 1; //removed
   flex-basis: 30%; //added
 }

Я добавил flex-basis к статическим 30% и удалил динамический flex-grow. Поскольку для flex-grow установлено значение 1, в вашем случае ширина вашего .stock будет увеличиваться относительно ширины экрана.

Наконец, добавлен интервал для социальных иконок.

#flex-items div:not(:first-of-type) {
  margin-left: 10px;
}

Демо

14.05.2018 16:54

Что-то вроде этого:

.flex-container {
 width: 100%;
 padding-left: 0;
 padding-right: 0;
 }
 
 #flex-items {
 display: flex;
 flex-direction: row;
 flex-wrap: nowrap;
 justify-content: space-between;
 background-color: orange;
   height: 75px;
 }
 
 .stock {
 margin-right: auto;
 background-color: #6dc993;
 display: flex;
 border: 2px solid blue;
 flex-grow: 1;
 width: 33%;
 }
.links {
  width: 66%;
  display: flex;
  justify-content: flex-end;
}
.links > div > img {
  margin-left: 5px;
}

 
 .stock > p {
 margin-left: 5%;
 display: flex;
 align-self: center;
 font-size: 20px;
 color: white;
 height: 20%;
 }

<div class = "flex-container">
<div id = "flex-items">
<div class = "stock"><p>Stock List</p></div>
<div class = "links">
<div><img title = "Like us on Facebook" src = "http://i.cubeupload.com/ULYeTe.jpg" alt = "Like us on Facebook" width = "68" height = "76" /></div>
<div><img title = "Like us on Facebook" src = "http://i.cubeupload.com/ULYeTe.jpg" alt = "Like us on Facebook" width = "68" height = "76" /></div>
<div><img title = "Like us on Facebook" src = "http://i.cubeupload.com/ULYeTe.jpg" alt = "Like us on Facebook" width = "68" height = "76" /></div>
<div><img title = "Like us on Facebook" src = "http://i.cubeupload.com/ULYeTe.jpg" alt = "Like us on Facebook" width = "68" height = "76" /></div>
<div><img title = "Like us on Facebook" src = "http://i.cubeupload.com/ULYeTe.jpg" alt = "Like us on Facebook" width = "68" height = "76" /></div>
  </div>
</div>
</div>

14.05.2018 16:57

Как все упоминали, проблема связана с вашим flex-grow, и я бы не предлагал удалить этот атрибут, но вместо этого, чтобы лучше понять flexbox, обратитесь к этому Flex-Grow. Добавление гибкого роста изменит размер всех элементов div.

The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.

14.05.2018 17:02

Вы можете найти решение в этом кодовый ключ

.flex-container {
 width: 100%;
 padding-left: 0;
 padding-right: 0;
 }
 
 #flex-items {
 display: flex;
 justify-content: flex-start;
 background-color: orange;
 }
.socialWrapper {
  display: flex;
}
 
 .stock {
 margin-right: auto;
 background-color: #6dc993;
 display: flex;
 width: 40%;
 border: 2px solid blue;
 }
 
 .stock > p {
 margin-left: 5%;
 display: flex;
 align-self: center;
 font-size: 20px;
 color: white;
 height: 20%;
 }

.icon-wrap {
  margin-left:5px;
}
.icon-wrap img {
  height: 100%;
}

<div class = "flex-container">
  <div id = "flex-items">
    <div class = "stock"><p>Stock List</p></div>
    <div class = "socialWrapper">
      <div class = "icon-wrap"><img title = "Like us on Facebook" src = "http://i.cubeupload.com/ULYeTe.jpg" alt = "Like us on Facebook" width = "68" height = "76" /></div>
      <div class = "icon-wrap"><img title = "Like us on Facebook" src = "http://i.cubeupload.com/ULYeTe.jpg" alt = "Like us on Facebook" width = "68" height = "76" /></div>
      <div class = "icon-wrap"><img title = "Like us on Facebook" src = "http://i.cubeupload.com/ULYeTe.jpg" alt = "Like us on Facebook" width = "68" height = "76" /></div>
      <div class = "icon-wrap"><img title = "Like us on Facebook" src = "http://i.cubeupload.com/ULYeTe.jpg" alt = "Like us on Facebook" width = "68" height = "76" /></div>
      <div class = "icon-wrap"><img title = "Like us on Facebook" src = "http://i.cubeupload.com/ULYeTe.jpg" alt = "Like us on Facebook" width = "68" height = "76" /></div>
    </div>
  </div>
</div>

14.05.2018 19:22

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

Ajax / jquery - включение скрипта в динамическую веб-страницу (SPA)

Reactjs отказался применять стиль из 'bootstrap.min.css', потому что его тип MIME ('text / html') не является поддерживаемым типом MIME таблицы стилей

Ссылка не работает в шаблоне CSS / HTML

Невозможно загрузить фоновое изображение в Reactjs, Webpack

Как скрыть список, если в Shopify не отображаются теги?

CSS вертикальное выравнивание середины между двумя div с помощью twitter bootstrap

Изменяется ли scrollWidth с шириной div?

Bootstrap - изменение стиля карты в зависимости от ширины контейнера

Создайте адаптивный прямоугольник div с помощью CSS и Bootstrap 4

Анимация по ключевым кадрам при наведении курсора

Пространство между элементами гибкости

Ответы 5

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

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