Flexbox“align-items：center”缩小了孩子的最大宽度

我有一个flexbox div container与align-items: center，有三个孩子。其中之一有max-width: 200px（在代码中，second-ch），它也是一个灵活的两个孩子分配justify-content: space-between，但second-ch未遵循其max-width。如果我从container中删除align-items: center,second-ch再次取得所需的宽度，但其余元素不再位于中心。我该如何解决这个问题？Flexbox“align-items：center”缩小了孩子的最大宽度

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
} 
 

 
.first-ch { 
 
    width: 70px; 
 
    height: 70px; 
 
    background-color: grey; 
 
} 
 

 
.second-ch { 
 
    max-width: 200px; 
 
    height: 80px; 
 
    background-color: red; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 
    .square { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: yellow; 
 
    margin: 5px; 
 
    } 
 
.third-ch { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: blue; 
 
}

<div class="container"> 
 
    <div class="first-ch"></div> 
 
    <div class="second-ch"> 
 
    <div class="square"></div> 
 
    <div class="square"></div> 
 
    </div> 
 
    <div class="third-ch"></div> 
 
</div>

来源

2016-03-07 William P.

这是你想要的吗？ https://jsfiddle.net/mmroz5ks/ – ketan

为什么要使用max-width: 200px;？当您使用align-items : center时，请尝试width: 200px; .second-ch所需的宽度最小。 max-width限制块的最大宽度但未设置最小宽度

来源

2016-03-07 05:02:51 BOLVERIN

我的问题是我想要一个响应框，所以我不想设置固定的宽度。我通过设置宽度：100％以及最大宽度值来解决此问题。 –

为什么会发生这种情况？

这不是真正的align-items：center效果。这是默认值的省略，align-items：stretch，这使得孩子成长。

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
    align-items: stretch; /* default */ 
 
} 
 

 
.first-ch { 
 
    width: 70px; 
 
    height: 70px; 
 
    background-color: grey; 
 
} 
 

 
.second-ch { 
 
    max-width: 200px; 
 
    height: 80px; 
 
    background-color: red; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 
    .square { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: yellow; 
 
    margin: 5px; 
 
    } 
 
.third-ch { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: blue; 
 
}

<div class="container"> 
 
    <div class="first-ch"></div> 
 
    <div class="second-ch"> 
 
    <div class="square"></div> 
 
    <div class="square"></div> 
 
    </div> 
 
    <div class="third-ch"></div> 
 
</div>

如果你希望孩子长大，直到它到达宽度最大，做的bolverin说，设置宽度明确

来源

2016-03-07 16:02:24 vals

Flexbox“align-items：center”缩小了孩子的最大宽度

回答

相关问题