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

问题描述

要求

1. 弹性盒
2. 垂直居中
3. 水平向左
4. 垂直堆叠的子元素
5. 子元素的数量可以是一个或多个
6. 使用旧语法，以便 Android 4.2 理解

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

我认为解决方案可能是以下几种情况的组合，但我做不到.

align-items: center;弹性方向:列；

body {边距:1em .5em；}文章 {显示:弹性；对齐项目:居中；flex-wrap: 包裹;}部分 {高度:18em；背景:#ccc;边距:0 .5em；位置:相对；显示:弹性；对齐项目:居中；}部分:{字体大小:更小；颜色:蓝色；位置:绝对；底部:0；}section.big {宽度:20%；高度:5em；}小节{宽度:10%；弹性:1；}部分 div {轮廓:1px 绿色虚线；}部分.想要{背景颜色:粉红色；}部分.想要:在{之后内容:1)想要这样做:垂直居中，水平向左，而部分将包含一个或多个子元素"；}section.only1 {背景颜色:浅绿色；}section.only1:after {内容:2)除一点外都好:子元素的数量必须为1.";}section.row:后{content: "3) 默认情况下 flex-direction 是 row";}部分.col {弹性方向:列；}section.col:after {内容:4)这可以垂直堆叠多个堆栈，但它们不再水平左对齐"；}section.col.justify {对齐内容:居中；对齐项目:flex-start；背景颜色:浅蓝色；}section.col.justify:后{内容:6)这很好！解决了.";}section.colmar {弹性方向:列；}section.colmar:在{之后content: "5) 这样可以垂直堆叠多个stack，并且div是左对齐的，但是div不是垂直居中"；}section.colmar div {右边距:自动；}

<section class="小想要">第一行<br/>line2</节>
<div>只有 1 个 div</div></节><section class="小排"><div>div1</div><div>div2</div></节><section class="small col"><div>div1</div><div>div2</div></节><section class="小科尔马"><div>div1</div><div>div2</div></节><section class="small col justify"><div>div1</div><div>div2</div></节></article>

codepen 演示

解决方案

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

align-items 沿横轴对齐 flex 项目，横轴始终垂直于主轴.

取决于 flex-direction，主轴可以是水平的或垂直的.

由于 flex-direction:column 表示主轴是垂直的，所以需要使用 justify-content 而不是 align-items 来居中弹性项目.

这是一个例子:

#container {显示:弹性；弹性方向:列；对齐内容:居中；高度:200px；背景颜色:浅粉色；}

<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>

在此处了解有关沿主轴的 flex 对齐的更多信息:

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

在此处了解有关沿横轴的 flex 对齐的更多信息:

• 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?

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