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

Question

В настоящее время я пытаюсь освоить flex box, но мои знания недостаточно хороши, чтобы я знал, что искать в Google или в стеке.

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

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

.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>

Answer 1

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

.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>

Answer 2

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

Свойство flex-grow указывает, насколько гибкий элемент будет расти относительно остальных гибких элементов.

Answer 3

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

.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;
}

Демо

Answer 4

Примерно так:

.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>

Answer 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>