考虑弹性容器的主轴和横轴:

An illustration of the various directions and sizing terms as applied to a row flex container Source: W3C

要沿主轴对齐弹性项,有一个属性:

要沿横轴对齐弹性项目,有三个属性:

在上图中,主轴是水平的,横轴是垂直的.这些是弹性容器的默认方向.

但是,这些方向可以很容易地与flex-direction属性互换.

/* main axis is horizontal, cross axis is vertical */
flex-direction: row;
flex-direction: row-reverse;

/* main axis is vertical, cross axis is horizontal */    
flex-direction: column;
flex-direction: column-reverse;

(横轴始终垂直于主轴.)

我在描述轴的工作原理时的观点是,两个方向似乎都没有什么特别之处.主轴,横轴,它们在重要性上是相等的,flex-direction使得来回切换变得容易.

So why does the cross axis get two additional alignment properties?

Why are 100 and 101 consolidated into one property for the main axis?

Why does the main axis not get a 100 property?


这些属性有用的场景:

  • placing a flex item in the corner of the flex container
    #box3 { align-self: flex-end; justify-self: flex-end; }

  • 使一组弹性项目向右对齐(justify-content: flex-end),但使第一个项目向左对齐(justify-self: flex-start)

Consider a header section with a group of nav items and a logo. With 100 the logo could be aligned left while the nav items stay far right, and the whole thing adjusts smoothly ("flexes") to different screen sizes.

  • 在一排三个挠性物品中,将中间物品贴在容器(justify-content: center)的中心,并将相邻物品与容器边缘(justify-self: flex-startjustify-self: flex-end)对齐.

Note that values 100 and 101 on 102 property will not keep the middle item centered about the container if the adjacent items have different widths.

#container {
  display: flex;
  justify-content: space-between;
  background-color: lightyellow;
}
.box {
  height: 50px;
  width: 75px;
  background-color: springgreen;
}
.box1 {
  width: 100px;
}
.box3 {
  width: 200px;
}
#center {
  text-align: center;
  margin-bottom: 5px;
}
#center > span {
  background-color: aqua;
  padding: 2px;
}
<div id="center">
  <span>TRUE CENTER</span>
</div>

<div id="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

<p>note that the middlebox will only be truly centered if adjacent boxes are equal width</p>

jsFiddle version


在 compose 本文时,flexbox spec人中没有提到justify-selfjustify-items.

然而,在CSS Box Alignment Module中,这是W3C尚未完成的建议,即建立一组通用的对齐属性,以供所有盒子模型使用,其中有以下内容:

enter image description here                                                                                                                                                    Source: W3C

你会注意到justify-selfjustify-items被考虑.but not for flexbox.


最后,我会重申主要问题:

为什么没有"对齐项"和"对齐self "属性?

推荐答案

沿主轴对齐弹性项目的方法

正如问题所述:

要沿主轴对齐弹性项,有一个属性:对齐-内容

要沿横轴对齐弹性项,有三个属性:align-contentalign-items and align-self.

然后问题是:

为什么没有justify-itemsjustify-self房产?

一个答案可能是:Because they're not necessary.

flexbox specification提供了two种沿主轴对齐弹性项目的方法:

  1. 对齐-内容关键字属性,以及
  2. auto margins

对齐-内容

对齐-内容属性沿FLEX容器的主轴对齐FLEX项.

它应用于flex容器,但仅影响flex项目.

有五个对齐选项:

  • 100~弹性物品包装在生产线的最前面.

    enter image description here

  • 100~有弹性的物品包装在生产线的末尾.

    enter image description here

  • 100~有弹性的物品被打包到队伍的中心.

    enter image description here

  • 102~弹性物品间隔均匀,第一件物品与容器的一侧对齐,最后一件物品与容器的另一侧对齐.第一项和最后一项使用的边取决于flex-directionwriting mode(ltrrtl).

    enter image description here

  • 100~与space-between相同,只是两端各有一半大小的空格.

    enter image description here


汽车边距

设置为auto margins个时,弹性项可以居中、隔开或打包到子组中.

与应用于弹性容器的对齐-内容不同,auto边距适用于弹性项目.

它们通过消耗指定方向上的所有可用空间来工作.


将弹性项目组向右对齐,但将第一个项目向左对齐

问题中的情景:

  • 使一组弹性项目右对齐(对齐-内容: flex-end) 但是使第一项左对齐(justify-self: flex-start)

    Consider a header section with a group of nav items and a logo. With 100 the logo could be aligned left while the nav items stay far right, and the whole thing adjusts smoothly ("flexes") to different screen sizes.

enter image description here

enter image description here


Other useful scenarios:

enter image description here

enter image description here

enter image description here


在角落里放一件弹性物品

问题中的情景:

  • 将弹性物品放置在角落.box { align-self: flex-end; justify-self: flex-end; }

enter image description here


使弹性项垂直和水平居中

enter image description here

margin: auto对齐-内容: centeralign-items: center的替代品.

与Flex容器上的以下代码不同的是:

.container {
    对齐-内容: center;
    align-items: center;
}

您可以在弹性项上使用此选项:

.box56 {
    margin: auto;
}

当设置为centering a flex item that overflows the container时,此替代选项非常有用.


将弹性项居中,并在第一个和边之间居中放置第二个弹性项

弹性容器通过分配空闲空间来对齐弹性项.

因此,为了创造equal balance个,以便中间的一个项目可以在容器中居中,旁边有一个项目,必须引入平衡.

在下面的例子中,引入了不可见的第三弹性项(框61&;68)来平衡"真实"项(框63&;66).

enter image description here

enter image description here

当然,这种方法在语义上并没有什么了不起的.

或者,您可以使用伪元素而不是实际的DOM元素.或者您可以使用绝对定位.所有这三种方法都在这里介绍:100

NOTE: The examples above will only work – in terms of true centering – when the outermost items are equal height/width. When flex items are different lengths, see next example.


当相邻项目大小不同时,将弹性项目居中

问题中的情景:

  • 在一排三个弹性物品中,将中间的物品贴到容器(对齐-内容: center)的中心,并将相邻的 物品到容器边缘(justify-self: flex-startjustify-self: flex-end).

    Note that values 101 and 102 on 103 property will not keep the middle item centered in relation to the container if the adjacent items have different widths (100).

如前所述,除非所有弹性项的宽度或高度相等(取决于flex-direction),否则中间项不能真正居中.这个问题为justify-self属性(当然是为处理任务而设计的)提供了强有力的理由.

#container {
  display: flex;
  对齐-内容: space-between;
  background-color: lightyellow;
}
.box {
  height: 50px;
  width: 75px;
  background-color: springgreen;
}
.box1 {
  width: 100px;
}
.box3 {
  width: 200px;
}
#center {
  text-align: center;
  margin-bottom: 5px;
}
#center > span {
  background-color: aqua;
  padding: 2px;
}
<div id="center">
  <span>TRUE CENTER</span>
</div>

<div id="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

<p>The middle box will be truly centered only if adjacent boxes are equal width.</p>

Here are two methods for solving this problem:

Solution #1: Absolute Positioning

flexbox规格允许absolute positioning of flex items个.这使得中间的项目可以完全居中,而不管其sibling 项目的大小.

只需记住,就像所有绝对定位的元素一样,这些项将从document flow中删除.这意味着它们不会占用容器中的空间,并且可以重叠它们的sibling 姐妹.

在下面的示例中,中间项以绝对位置居中,而外层项保持在流中.但同样的布局也可以以相反的方式实现:中间项目居中,对齐-内容: center居中,外部项目绝对定位.

enter image description here

Solution #2: Nested Flex Containers (no absolute positioning)

.container {
  display: flex;
}
.box {
  flex: 1;
  display: flex;
  对齐-内容: center;
}
.box71 > span { margin-right: auto; }
.box73 > span { margin-left: auto;  }

/* non-essential */
.box {
  align-items: center;
  border: 1px solid #ccc;
  background-color: lightgreen;
  height: 40px;
}
<div class="container">
  <div class="box box71"><span>71 short</span></div>
  <div class="box box72"><span>72 centered</span></div>
  <div class="box box73"><span>73 loooooooooooooooong</span></div>
</div>

下面是它的工作原理:

  • 顶层div(.container)是柔性容器.
  • 每个子分区(.box)现在都是弹性项.
  • 为了平均分配容器空间,每.box件物品被赋予flex: 1个.
  • 现在,这些项目占用了行中的所有空间,并且宽度相等.
  • 使每一项都成为(嵌套的)弹性容器,然后添加对齐-内容: center.
  • 现在,每个span元素都是一个居中的弹性项.
  • 使用FLEX auto边距左右移动外部span.

您也可以放弃对齐-内容,只使用auto的边距.

对齐-内容可以在这里工作,因为auto的利润率总是优先的.从规范中:

8.1. Aligning with auto margins

在通过对齐-内容align-self对准之前,任何


对齐-内容: space-same (concept)

让我们回到对齐-内容分钟,这里有一个更多 Select 的 idea .

  • 100~ space-betweenspace-around的杂交种.弹性物品的间隔是均匀的(比如space-between),除了两端有一半大小的空间(比如space-around)之外,两端都有全尺寸的空间.

这种布局可以通过Flex容器上的::before::after个伪元素来实现.

enter image description here

(credit: 100 for the code, and 101 for the label)

UPDATE:个浏览器已经开始实现101,实现了上述功能.详情见此帖子:Equal space between flex items


PLAYGROUND(包括上述所有示例的代码)

Css相关问答推荐

将CSS更改为Mat-Form-Field,其中包含搜索框

如何以Angular 将下拉面板的宽度与其文本框对齐

响应的Megamenu位置css

导航栏没有使用nextui获取页面的全部宽度

如何使shiny 的showNotification可滚动?

滚动弹性盒

当弯曲方向设置为列时如何制作等高卡片?

如何使我的标语(h1元素)不居中对齐?

Angular Material - 将 matsnackbar 置于所有对话框之上

Tailwind css 和 Next.js 导航组件 z-index 不工作

我无法在 next.js 应用程序中传播 daisyui 的主题

页脚上方的图像分隔线使用 ::before 伪元素

我怎样才能让这个边框出现在按钮元素的上方?

纯 CSS 复选框图像替换

让 div 占据 100% 身体高度,减go 固定高度的页眉和页脚

Bootstrap 4:导航内的多级下拉菜单

如何更改 HTML 输入标签的字体和字体大小?

如何让 flexbox 在计算中包含填充?

带有一些 LESS 魔法的花式媒体查询

flexbox容器中的省略号