CSS Flex align-items

Question

хо, ребята, у меня есть три иконки, и я стараюсь, чтобы два элемента были слева и один справа.какой тип flex-свойств мне нужен для этого?

.flex-container_1 {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  align-text: right;
  height: 99%;
  align-items: flex-end;
  justify-content: space-between;
}

.flex-container_1>div {
  margin: 10px;
  z-index: 9999;
}

<div class="flex-container_1">
  <div id="brilleicon" style=" 
  align-items: flex-start;
  background: rgba(0, 0, 0, 0.35) url() 50% 50% no-repeat;
  background-size: 70% 70%;
  backgroundColor: black;
  opacity: 0.5;
  border: 0;
  bottom: 0;
  cursor: pointer;
  min-width: 50px;
  min-height: 30px;
  padding-right: 5%;
  padding-top: 4%;
  position: relative;
  right: 0;
  transition: background-color .05s ease;
  -webkit-transition: background-color .05s ease;
  z-index: 9999;"></div>
  <div id="pictureicon" class="clickable" style=" 
  align-items: flex-start;
  background: rgba(0, 0, 0, 0.35) url() 50% 50% no-repeat;
  background-size: 110% 90%;
  backgroundColor: black;
  opacity: 0.5;
  border: 0;
  bottom: 0;
  cursor: pointer;
  min-width: 70px;
  min-height: 30px;
  padding-right: 5%;
  padding-top: 4%;
  position: relative;
  right: 0;
  transition: background-color .05s ease;
  -webkit-transition: background-color .05s ease;
  z-index: 9999;"></div>
  <div id="videoicon" class="clickable" style=" 
  align-items: flex-start;
  background: rgba(0, 0, 0, 0.35) url() 50% 50% no-repeat;
  background-size: 110% 90%;
  backgroundColor: black;
  opacity: 0.5;
  border: 0;
  bottom: 0;
  cursor: pointer;
  min-width: 70px;
  min-height: 30px;
  padding-right: 5%;
  padding-top: 4%;
  position: relative;
  right: 0;
  transition: background-color .05s ease;
  -webkit-transition: background-color .05s ease;
  z-index: 9999;"></div>
</div>

Вот что у меня есть.Он выровнял мой элемент справа налево с пробелом между ними, но я хочу, чтобы средние значки совпали с левым элементом

Answer 1

Здесь я написал небольшой демонстрационный проект, на который можно сослаться:

https://codepen.io/sivcan/pen/KeBqGb

Идея состоит в том, чтобы разбить содержимое на два блока и дать ему justify-content: space-between

Answer 2

Я бы порекомендовал сделать следующее, используя две обертки объекта: (Измените строку на что-то другое, если вы загружаете Bootstrap или любую другую среду CSS, используя свойство строки)

<div class="row">
   <div class="i-left">
      Your flex list for two icons
   </div>
   <div class"i-right">
      Your flex list for one icon
   </div>
 </div>

Затем используйте css mark 'row' как сам объект flex , а затем используйте соответствующие свойства, чтобы правильно расположить классы i-left и i-right. Вы можете использовать justify-content , чтобы сделать это, а затем align-items , чтобы выровнять их по вертикали в строке!

Это самый эффективный способ делать вещи. Не нужно усложнять изгиб.

Примечание: Никогда не используйте столько встроенных стилей в вашем html, если вы индексируете это в Google. Они помогут вам в этом стиле.