垂直居中并左对齐一列Flex项目 [英] Vertically center and left-align a column of flex items

问题描述

要求

1. flexbox


2. 垂直居中


3. 水平向左


4. 垂直堆叠的子元素


5. 子元素的数量可以是一个或多个


6. 旧的语法，以便Android 4.2可以理解

听起来很难描述。演示中的粉色框是我想要的外观。绿色框已经很好了，只是我不知道如何处理多个子元素。

我认为解决方案可能是以下的组合，但我无法做到。

  align-items：center; 
 flex-direction：column; 
  

  body {margin：1em .5em;} article {display：flex; align-items：center; flex-wrap：wrap;} section {height：18em;背景：#ccc;保证金：0.5美元;位置：相对;显示：flex; align-items：center;} section：after {font-size：smaller;颜色：蓝色;位置：绝对; 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）想要做这样的事情：vertical middle，horizo​​ntal left，while部分将包含一个或多个子元素;} section.only1 {background-color：lightgreen;} section.only1：after {content：2）除了一点之外所有的好东西：子元素的数量必须是1。 } section.row：在{content：3）后默认flex-diraction是行;} section.col {flex-direction：column;} section.col：after {content：4）这可以垂直堆叠多个堆栈，但他们不再水平地左对齐;} 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 ）这可以垂直堆叠多个堆栈，并且左对齐div，但div不是垂直居中;} section.colmar div {margin-right：auto;}  

< pre class =snippet-code-html lang-html prettyprint-override> < article> < section class =小想要> line1< br /> line2< / section> < section class =small only1> < div>只有1个div< / div> < /节> < section class =small row> < DIV> DIV1< / DIV> < DIV> DIV2< / DIV> < /节> < section class =small col> < DIV> DIV1< / DIV> < DIV> DIV2< / DIV> < /节> < section class =small colmar> < DIV> DIV1< / DIV> < DIV> DIV2< / DIV> < /节> < section class =small col justify> < DIV> DIV1< / DIV> < DIV> DIV2< / DIV> < / section>< / article>

b
$ b

codepen demo 解决方案

justify-content 沿主轴对齐弹性项目。

align-items 沿着横轴对齐弹性项目，主轴。

根据

由于 flex-direction：column 表示主轴是垂直的，所以您需要使用 justify-content not align-items 来将弹性项目居中。

下面是一个例子：

#container {display ： 柔性; flex-direction：列; justify-content：center; height：200px; background-color：lightpink;}

< div id = 容器 > < 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>

了解更多关于沿着主轴弹性对齐的信息：





• 在CSS Flexbox中，为什么没有justify-items和证明自我。属性？

了解更多关于沿横轴弹性对齐的信息：

>

• flex-wrap如何与align-self一起工作， align-items和align-content？

Requirements

1. flexbox
2. vertically middle
3. horizontally left
4. vertically stacked child elements
5. number of child elements can be one or multiple
6. use the old syntax so that Android 4.2 understands

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>

codepen demo

解决方案

justify-content aligns flex items along the main axis.

align-items aligns flex items along the cross axis, which is always perpendicular to the main axis.

Depending on the flex-direction, the main axis may be horizontal or vertical.

Since flex-direction:column means the main axis is vertical, you need to use justify-content not align-items to center the flex items.

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 axis here:

• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Learn more about flex alignment along the cross axis here:

• How does flex-wrap work with align-self, align-items and align-content?

这篇关于垂直居中并左对齐一列Flex项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！