Question

所以，我想像上图中那样在flex-box内对齐项目。

我的html如下：

<div class="flex-row">
  <div class="flex-item">
    <img src="/default.png">
  </div>
  <div class="flex-item">
    <img src="/default.png">
  </div>
  <div class="flex-item">
    <img src="/default.png">
  </div>
</div>

css为

   .flex-row {
      min-height: 400px;
      display: flex;
      align-items: flex-start;
   }

   .flex-item:nth-child(2) {
     align-items: center;
   }

   .flex-item:last-child {
      align-items: flex-end;
   }

Answer 1

使用align-self而不是align-items

.flex-row {
  min-height: 300px;
  display: flex;
  width: 90%;
  margin: 1em auto;
  border: 1px solid red;
  justify-content: space-between;
}

.flex-item {
  height: 50px;
  background: lightblue;
  width: 100px;
}

.flex-item:nth-child(2) {
  align-self: center;
}

.flex-item:last-child {
  align-self: flex-end;
}

<div class="container flex-row">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

Answer 2

注意！

要将高度设置为列，请在此处更改px：flex: 0 1 50px;或将其删除！

将margin-right/left:auto用作：

.flex-row {
  min-height: 400px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.flex-item {
  flex: 0 1 50px;

}

.flex-item:nth-child(2) {
  margin-right: auto;
  margin-left: auto;
}
.flex-item:last-child {
  margin-left: auto;
}

<div class="flex-row">
  <div class="flex-item">
    <img src="/default.png">
  </div>
  <div class="flex-item">
    <img src="/default.png">
  </div>
  <div class="flex-item">
    <img src="/default.png">
  </div>
</div>

2。使用align-self

.flex-row {
  min-height: 400px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.flex-item {
  flex: 0 1 50px;
  align-self: flex-start;
}

.flex-item:nth-child(2) {
  align-self: center;
}

.flex-item:last-child {
  align-self: flex-end;
}

<div class="flex-row">
  <div class="flex-item">
    <img src="/default.png">
  </div>
  <div class="flex-item">
    <img src="/default.png">
  </div>
  <div class="flex-item">
    <img src="/default.png">
  </div>
</div>

Answer 3

是这样吗？您需要flex-wrap: wrap;才能包裹物品，需要足够宽（100％）。由于100％的弹性项目始终会对齐到整个宽度，因此您需要text-align，而不是align-items，这首先是错误的属性。

align-items是交叉轴上的对齐方式，不是justify-content上的主轴

.flex-row {
  min-height: 400px;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

.flex-item {
  flex-basis: 100%;
}
.flex-item:nth-child(2) {
  text-align: center;
}

.flex-item:last-child {
  text-align: right;
}

<div class="flex-row">
  <div class="flex-item">
    <img src="/default.png" width="100" height="50">
  </div>
  <div class="flex-item">
    <img src="/default.png" width="100" height="50">
  </div>
  <div class="flex-item">
    <img src="/default.png" width="100" height="50">
  </div>
</div>

Answer 4

看看这段代码

display:flex;
flex-direction: row;
justify-content: flex-start; 
align-items: centre;

使用flex-direction，您可以指定主体对齐方式（水平与row，垂直与column）。根据您在此处选择的内容，以下属性会产生不同的效果。

然后使用justify-content指定元素在元素内的排列方式应在刚定义的主轴上对齐（垂直或水平）。在这种情况下，flex-start是指我的轴的起点。

然后使用align-items指定辅助轴的对齐方式。垂直轴是因为我们选择flex-direction: row;而不是flex-direction: column;。因此，在垂直轴上，项目将对齐centre

别忘了看一下space-between或flex-end之类的可用属性

如何以三种不同方式对齐弹性项目？

4 个答案: