Question

首先编辑：如果我使用align-items: stretch;我可以拉伸我的弹性项目，我不知道该怎么做，但我正在玩它，并且我认为我应该将此信息添加为编辑，align-items: stretch值，拉伸弹性项目。

第二次修改：好的可能是我不清楚，我不是在寻找解决方案，我只是想知道为什么它没有充满理由 - 内容，＆＃39;它，我可以通过编辑代码解决我自己的这个问题，但我想知道原因，为什么它的行为方式。

我已经阅读了这个答案Flex item not filling screen height with "align-items: stretch"

但我的问题有所不同，只要我添加align-items，flex-items停止拉伸，在添加此属性之前它们工作正常，我知道我可以通过向100%添加高度来解决此问题，但我对此不感兴趣，我想知道它为什么会这样做。 注意：我正在使用chrome

我的代码请阅读代码中的评论

＆＃13;

.container {
  font-size: 36px;
  height: 800px;
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* as soon as i add this align-items property or my items 
  stop streching, i don't get it, if use value stretch it streches 
  the my items, please read the note first edit in the question, 
  it is at the top */
  align-content: stretch;
}

.box {
  width: 400px;
  color: #fff;
}

.box1 {
  background: blue;
}

.box2 {
  background: red
}

.box3 {
  background: yellow
}

.box4 {
  background: black
}

＆＃13;

<div class="container">
  <div class="box box1">Home</div>
  <div class="box box2">Menu</div>
  <div class="box box3">About Us</div>
  <div class="box box4">Contact Us</div>
</div>

＆＃13;

Answer 1

box件商品同时包含stretch和center。

合并align-items和align-content不会发生这种情况，因为align-items适用于单行的Flex项目，align-content适用于它们。

注意，您不需要添加align-items/content并将其值设置为stretch，这是默认值

对于解决方案，将box设置为height: 100%会使它们看起来拉伸，但与使用相比，会产生完全不同的结果align-items / content＆＃39> stretch值。

固定高度它们将是设定高度，无论是否有2行或更多行，stretch乳清将调整其高度以适合其父级。简单地说，2行将使它们高50％，3行高33.33％等等。

假设您想要居中的box中的文本，以及要展开的box，只需将box设为灵活容器即可。

将display: flex; align-items: center添加到box，它可能会按照您想要的方式进行布局。

如果您希望文字也水平居中，我在这里添加了justify-content: center;，您可以保留或删除。

＆＃13;

.container {
  font-size: 36px;
  height: 800px;
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 400px;
  color: #fff;
  display: flex;
  align-items: center;             /*  vertically center    */
  justify-content: center;         /*  horizontally center  */
}

.box1 {
  background: blue;
}

.box2 {
  background: red
}

.box3 {
  background: yellow
}

.box4 {
  background: black
}

＆＃13;

<div class="container">
  <div class="box box1">Home</div>
  <div class="box box2">Menu</div>
  <div class="box box3">About Us</div>
  <div class="box box4">Contact Us</div>
</div>

＆＃13;

Answer 2

如果要扩展项目，而不是stretch值，则需要对align-items属性使用center值。因此，如果您只是将align-items:center;更改为align-items:stretch;，它将解决您的问题。

https://codepen.io/julysfx/pen/weVvpp

Answer 3

我不确定你是否试图将盒子对准中心并伸展？您应该尝试将justify-content：center添加到.container：

     justify-content: center;

带有标记和css的工作笔，您添加了https://codepen.io/anon/pen/dRxyVG

align-items将沿着十字轴对齐您的方框，而justify-content将沿着主轴对齐它们。

align-content更像是调整与flex容器相关的行或列。如果flex-direction是行，则垂直方向，如果flex-direction是列，则为水平。使用align-items调整主轴上的行项目，如果你使内容随机大小，你可能会看到它们如何更好地互动：https://codepen.io/anon/pen/weVBBE

当您设置align-items时：center;你告诉物品与中心对齐，它们不会伸展。

如果您尝试将文本放在框的中间并让它们伸展，则需要将其应用于子容器，即.container的.box： https://codepen.io/anon/pen/LLwEGW

Answer 4

从您的代码中删除高度和宽度。如果你想在 display flex 的 align-items 属性中使用拉伸值，你必须确保你没有给出预定义的值。在这种情况下，它将忽略 align 项中给出的值并运行代码。

为什么flex项目不会使用对齐项目和对齐内容进行拉伸

4 个答案: