Html 垂直居中并左对齐一列弹性项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33371765/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertically center and left-align a column of flex items
提问by Ka Fai Lo
Requirements
要求
- flexbox
- vertically middle
- horizontally left
- vertically stacked child elements
- number of child elements can be one or multiple
- use the old syntax so that Android 4.2 understands
- 弹性盒
- 垂直中间
- 水平左
- 垂直堆叠的子元素
- 子元素的数量可以是一个或多个
- 使用旧语法，以便 Android 4.2 理解
Sounds difficult to describe. The pink box in the demo is the look I want. The green box is already good, only that I don't know how to do with multiple child elements.
听起来很难描述。演示中的粉红色框是我想要的外观。绿框已经很好了，只是我不知道如何处理多个子元素。
I think the solution may be a combination of the following, but I cannot make it.
我认为解决方案可能是以下内容的组合，但我无法做到。
align-items: center;
flex-direction: column;
body {
margin: 1em .5em;
}
article {
display: flex;
align-items: center;
flex-wrap: wrap;
}
section {
height: 18em;
background: #ccc;
margin: 0 .5em;
position: relative;
display: flex;
align-items: center;
}
section:after {
font-size: smaller;
color: blue;
position: absolute;
bottom: 0;
}
section.big {
width: 20%;
height: 5em;
}
section.small {
width: 10%;
flex: 1;
}
section div {
outline: 1px dotted green;
}
section.want {
background-color: pink;
}
section.want:after {
content: "1) want to do like this: vertically middle, horizontally left, while section will contain one or several child elements";
}
section.only1 {
background-color: lightgreen;
}
section.only1:after {
content: "2) all good except one point:the number of child element must be one.";
}
section.row:after {
content: "3) by default flex-diraction is row";
}
section.col {
flex-direction: column;
}
section.col:after {
content: "4) this can vertically stack multiple stacks, but they no longer horizontally left-align";
}
section.col.justify {
justify-content: center;
align-items: flex-start;
background-color: lightblue;
}
section.col.justify:after {
content: "6) this is good! Solved.";
}
section.colmar {
flex-direction: column;
}
section.colmar:after {
content: "5) this can vertically stack multiple stacks, and left-align divs, but divs are not vertically center";
}
section.colmar div {
margin-right: auto;
}<article>
<section class="small want">
line1
<br/>line2
</section>
<section class="small only1">
<div>only 1 div</div>
</section>
<section class="small row">
<div>div1</div>
<div>div2</div>
</section>
<section class="small col">
<div>div1</div>
<div>div2</div>
</section>
<section class="small colmar">
<div>div1</div>
<div>div2</div>
</section>
<section class="small col justify">
<div>div1</div>
<div>div2</div>
</section>
</article>回答by Michael Benjamin
justify-contentaligns flex items along the main axis.
justify-content沿主轴对齐弹性项目。
align-itemsaligns flex items along the cross axis, which is always perpendicular to the main axis.
align-items沿横向轴对齐 flex 项目，横向轴始终垂直于主轴。
Depending on the flex-direction, the main axis may be horizontal or vertical.
根据flex-direction，主轴可以是水平的或垂直的。
Since flex-direction:columnmeans the main axis is vertical, you need to use justify-contentnot align-itemsto center the flex items.
由于flex-direction:column意味着主轴是垂直的，因此您需要使用justify-contentnotalign-items将 flex 项目居中。
Here's an example:
下面是一个例子：
#container {
display: flex;
flex-direction: column;
justify-content: center;
height: 200px;
background-color: lightpink;
}<div id="container">
<div class="box">div 1</div>
<div class="box">div 2</div>
<div class="box">div 3</div>
<div class="box">div 4</div>
<div class="box">div 5</div>
</div>Learn more about flex alignment along the main axishere:
在此处了解有关沿主轴的flex 对齐的更多信息：
Learn more about flex alignment along the cross axishere:
在此处了解有关沿交叉轴的flex 对齐的更多信息：
