Question

伙计们，我有三个图标，我尝试在左侧显示两个项目，在右侧显示一个项目。我需要哪种弹性属性？

.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

我建议使用两个对象包装器进行以下操作：（如果使用row属性加载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将'row'标记为 flex 对象本身，然后使用相关属性正确设置i-left和i-right类的位置。您可以使用 justify-content 来执行此操作，然后使用 align-items 将它们在行内垂直对齐！

这是做事的最有效方法。无需使flex复杂化。

侧面注意：如果您在google上建立索引，则切勿在html中使用过多的行内样式。他们会为您提供这样的内联样式。

Answer 2

在这里我写了一个小的演示项目，您可以参考它：

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

想法是将内容分为两个块，并给其一个justify-content: space-between

CSS Flex对齐项

2 个答案: