Flexbox：弹性启动，自我启动和启动；有什么不同？ [英] Flexbox: flex-start, self-start, and start; What's the difference?

问题描述

我刚刚注意到我以前从未见过的 align-self 属性的一些值。什么是开始，结束，自启动和自我终止，与 flex-start 和 flex-end 有什么区别？

我一直指的是该指南，但是它没有提到这些值。我在MDN上阅读了 align-self的文档，但是对这些值的单行描述不足以让我理解。

我认为我可能可以尝试使用这些值来解决它，但是它们似乎都在做同样的事情...

  .container {显示：flex;证明内容：中心； align-items：居中;背景：木瓜宽度：400px；高度：200px；保证金：1雷姆自动; box-shadow：0px 0px 5px 1px rgba（0，0，0，0.2）; border-radius：0.5em;}。block {颜色：白色；字号：3em；字体家族：sans-serif;填充：0.5rem;保证金：0.5rem;显示：flex;证明内容：中心； align-items：center;}。block-1 {背景：红色；}。block-2 {背景：橙色；}。block-3 {背景：金色；}。block-4 {背景：绿色；}。block- 5 {background：blue;}。block-2 {align-self：flex-start;}。block-3 {align-self：start;}。block-4 {align-self：self-start;}  

 < div class = container> < div class = block block-1> 1< / div> < div class = block block-2> 2< / div> < div class = block block-3> 3< / div> < div class = block block-4> 4< / div> < div class = block block-5> 5< / div>< / div>  

解决方案

值 flex-end 和 flex-start （以及其他）是为与 flex layout 。

但是，W3C一直在开发 Box Alignment Module （框对齐模块 ），该模块建立了一套通用的对齐属性和值，可在多个框模型（包括flex，grid，table和block）中使用。 / p>

所以您看到的是较新的值，这些值最终将替换现有的特定于布局的值。

在flexbox规范中是这样描述的：

§ 1.2。
交互模块

CSS Box Alignment Module扩展并取代了
对齐属性（ justify-content ， align-items ，
align-self ， align-content ）在这里介绍。

其中有类似的语言网格规范。例如：

§ 10.1。装订线：行间隙，列间隙和间隙
属性

行间距和 column-gap 属性（及其 gap 的简写形式），
在网格容器上指定时，定义了之间的装订线网格
行和网格列。它们的语法在 CSS框对齐3
§8框之间的间隙中定义。

原始属性– 网格行间距，网格行间距和网格行间距–没持续多久。尽管为了向后兼容，我相信他们仍然会受到尊重。

I just noticed some values of the align-self property that I haven't seen before. What are start, end, self-start, and self-end and what are their differences from flex-start and flex-end?

I've been referring to the guide at CSS-Tricks often when I work with flexbox, but it doesn't mention these values. I read the documentation for align-self at MDN, but the one-line description of the values isn't enough for me to understand.

I thought I might be able to play around with the values to figure it out, but they all seem to do the same thing...

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  background: papayawhip;
  width: 400px;
  height: 200px;
  margin: 1rem auto;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.2);
  border-radius: 0.5em;
}

.block {
  color: white;
  font-size: 3em;
  font-family: sans-serif;
  padding: 0.5rem;
  margin: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.block-1 {
  background: red;
}

.block-2 {
  background: orange;
}

.block-3 {
  background: gold;
}

.block-4 {
  background: green;
}

.block-5 {
  background: blue;
}

.block-2 {
  align-self: flex-start;
}

.block-3 {
  align-self: start;
}

.block-4 {
  align-self: self-start;
}

<div class="container">
  <div class="block block-1">1</div>
  <div class="block block-2">2</div>
  <div class="block block-3">3</div>
  <div class="block block-4">4</div>
  <div class="block block-5">5</div>
</div>

解决方案

The values flex-end and flex-start (among others) were created for use with flex layout.

However, the W3C has been developing the Box Alignment Module, which establishes a common set of alignment properties and values for use across multiple box models, including flex, grid, table and block.

So what you're seeing are the newer values that will eventually replace the existing layout-specific values.

Here's how it's described in the flexbox specification:

§ 1.2. Module interactions

The CSS Box Alignment Module extends and supercedes the definitions of the alignment properties (justify-content, align-items, align-self, align-content) introduced here.

There's similar language in the Grid specification. Here's an example:

§ 10.1. Gutters: the row-gap, column-gap, and gap properties

The row-gap and column-gap properties (and their gap shorthand), when specified on a grid container, define the gutters between grid rows and grid columns. Their syntax is defined in CSS Box Alignment 3 §8 Gaps Between Boxes.

The original properties – grid-row-gap, grid-column-gap and grid-gap – didn't last long. Although, for the sake of backward compatibility, I'm sure they're still respected.

这篇关于Flexbox：弹性启动，自我启动和启动；有什么不同？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！