将弹性项目对齐到弹性端

Question

平，

我正在创建网格布局，当尝试在flex-end或start上对齐项目时，高度/宽度变为零。 我想知道的是，是否可以将Flex容器中的项目与顶部/底部/中心对齐而不指定高度/宽度？在我的情况下，我没有指定任何高度，它不起作用。如果我指定它，它的工作原理。在第一个示例中注释了不起作用的行。

这是代码：

＆＃13;

＆＃13;

.flex-container {
  display: flex;
  background: silver; 
  width: 400px;
  height: 200px;
  //align-items: flex-start; 
}

.flex-item {
  background: blue; 
  flex: 1 0 10px;
  margin: 5px;
}

.flex-container2 {
  display: flex;
  background: silver; 
  width: 400px;
  height: 200px;
  align-items: flex-end; 
}

.flex-item2 {
  background: blue; 
  height: 50px;
  flex: 1 0 10px;
  margin: 5px;
}

＆＃13;

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

<br>

<div class="flex-container2">
  <div class="flex-item2"></div>
  <div class="flex-item2"></div>
  <div class="flex-item2"></div>
  <div class="flex-item2"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

由于align-items的默认值为stretch，因此它们填充其父级高度，并将其更改为flex-start / flex-end，行flex项目的高度为0 ，并且需要内容（或高度/最小高度）才能让您真正看到它们。

.flex-container {
  display: flex;
  background: silver; 
  width: 400px;
  height: 200px;
  align-items: flex-start; 
}

.flex-item {
  background: blue;
  min-height: 20px;
  flex: 1 0 10px;
  margin: 5px;
}
.flex-item:nth-child(even) {
  align-self: flex-end;
}

.flex-container2 {
  display: flex;
  background: silver; 
  width: 400px;
  height: 200px;
  align-items: flex-end; 
}

.flex-item2 {
  background: blue; 
  height: 50px;
  flex: 1 0 10px;
  margin: 5px;
}

<div class="flex-container">
  <div class="flex-item">They need content or a height/min-height</div>
  <div class="flex-item">They need content or a height/min-height</div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

<br>

<div class="flex-container2">
  <div class="flex-item2"></div>
  <div class="flex-item2"></div>
  <div class="flex-item2"></div>
  <div class="flex-item2"></div>
</div>