Flexbox:flex-start,自启动和启动; 有什么不同？

Question

我刚刚注意到align-self我之前从未见过的一些属性值.什么是start,end,self-start,和self-end和是什么,从他们之间的分歧flex-start和flex-end？

当我使用flexbox时,我经常指的是CSS-Tricks指南,但它没有提到这些值.我在MDN上阅读了align-self的文档,但是这些值的单行描述还不足以让我理解.

我以为我可以玩弄价值来解决它,但它们似乎都做同样的事情......

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

Answer 1

创建值flex-end和flex-start(以及其他)以用于flex布局.

但是,W3C一直在开发Box Alignment Module,它建立了一套通用的对齐属性和值,可用于多个盒子模型,包括flex,grid,table和block.

所以你所看到的是最新的值,它们最终会取代现有的特定于布局的值.

以下是它在flexbox规范中的描述:

§1.2.模块交互

CSS盒对准模块延伸,并且取代了取向性的(定义justify-content,align-items, align-self,align-content这里引入).

Grid规范中有类似的语言.这是一个例子:

§10.1.排水沟:对row-gap,column-gap和gap 性质

当在网格容器上指定时,row-gap和column-gap属性(及其gap简写)定义网格行和网格列之间的装订线.它们的语法在CSS Box Alignment3§8Box之间的间隙中定义.

原来的性质- grid-row-gap,grid-column-gap和grid-gap-并没有持续多久.虽然为了向后兼容,但我确信它们仍然受到尊重.

Answer 2

flex-start考虑到-reverseflex 方向的值的存在，而start没有。

例如，在 flex 容器设置为 的从左到右书写模式中flex-direction:row-reverse，justify-content:start将导致所有项目向左对齐，而justify-content:flex-start将导致所有项目向右对齐。

div {
  padding: 4px;
  border: 1px solid red
}

#div1 {
  display: flex;
  flex-direction: row-reverse;
  justify-content: start
}

#div2 {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start
}

<ul>
  <li><code>align-content: start</code>
    <div id=div1>
      <div>Flex 1</div>
      <div>Flex 2</div>
    </div>
  </li>
  <br>
  <li><code>align-content: flex-start</code>
    <div id=div2>
      <div>Flex 1</div>
      <div>Flex 2</div>
    </div>
  </li>
</ul>

2019 年 7 月 15 日编辑

所描述的不同行为在 Firefox 浏览器中是正确的（至少在 68 之前），而在 Chrome 中，如diachedelic评论中所述，这两个属性的工作方式相同

Answer 3

这里接受的答案部分不正确：新的属性并不意味着取代旧的flex-start和flex-end。它们的目的略有不同。

\n

\n
• flex-start并flex-end在 Flexbox 轴的开始或结束处对齐 Flex 项目：justify-x 属性的主轴或align-x 属性的交叉轴。flex-direction这些轴由和/或操纵flex-wrap: wrap-reverse。
\n
• start并在 Flex 容器的写入模式end下，在文本流动方向的开始或结束处对齐 Flex 项目，无论 Flexbox 的对齐方式如何。
\n
• self-start并self-end在各个 Flex 项目的书写模式下将 Flex 项目对齐到文本流动方向的开头或结尾。这意味着通常仅当您在页面上混合不同的书写模式/语言时才需要它们\xe2\x80\x99。
\n

\n

这意味着如果您有一个弹性盒flex-direction: row-reverse（从右向左流动），justify-content: flex-start会将弹性项目向右对齐，但justify-content: start会将弹性项目向左对齐\xe2\x80\x94，所有这些都假设从左书写的书写模式，例如英语。

\n\n

以供参考：

\n

\n
• justify-content接受：flex-start、flex-end、start、end、left和right值（加上中心、空格等）。
\n
• align-items并align-self接受：flex-start, flex-end, start, end, self-start,self-end值（加上中心、拉伸、基线）
\n
• align-content接受：flex-start、flex-end、start和end值（加上中心、拉伸、间距等）
\n

\n

如果“开始”和“结束”的这些用法以及书写模式对您来说是新的，那么值得简要阅读一下逻辑属性： https: //developer.mozilla.org/en-US/docs/ Web/CSS/CSS_Logical_Properties

\n