css Flexbox：flex-start/flex-end、self-start/self-end、start/end;有什么区别？

mwyxok5s 于 2023-08-09 发布在其他

关注(0)|答案(4)|浏览(110)

我刚刚注意到align-self属性的一些值是我以前没有见过的。什么是start，end，self-start和self-end，它们与flex-start和flex-end有什么区别？
我在使用flexbox时经常提到the guide at CSS-Tricks，但它没有提到这些值。我在MDN上读过documentation for 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;
}

个字符

css

来源：https://stackoverflow.com/questions/50919447/flexbox-flex-start-flex-end-self-start-self-end-and-start-end-whats-the-dif

4条答案

按热度按时间

thigvfpy1#

值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 Alignment 3 §8 Gaps Between Boxes中定义。
最初的属性-grid-row-gap，grid-column-gap和grid-gap-并没有持续很长时间。尽管如此，为了向后兼容，我确信它们仍然受到尊重。

赞(0）回复(0）举报 2023-08-09

sczxawaw2#

flex-start考虑了flex方向的-reverse值的存在，而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
}

个字符

2019年7月15日编辑 *

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

2023年8月2日编辑 *

Chrome 115现在与Firefox匹配相同的行为，如 Snailedlt 的评论所述。我不知道Chrome何时更新了他们的行为。

赞(0）回复(0）举报 2023-08-09

9rnv2umw3#

Rachel Andrew的https://csslayout.news/whats-the-difference-between-the-alignment-values-of-start-flex-start-and-self-start/正是我认为这个问题的最佳答案。
她在2021年7月Chrome开始支持这些属性的同时写了这篇文章。
关键是
开始和结束是相对于流的，并且与书写模式和脚本方向有关。自开始值和自结束值也是与流相关的，但它们与对齐主题（在本例中为Flex项）的书写模式和方向相关。

赞(0）回复(0）举报 2023-08-09

njthzxwz4#

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

flex-start和flex-end在flexbox的轴的开始或结束处对齐flex项目：justify-x属性的 * 主轴 * 或align-x属性的 * 横轴 *。这些轴由flex-direction和/或flex-wrap: wrap-reverse操纵。
start和end在flex容器的 writing mode 中将flex项对齐到文本流动方向的开始或结束，而不管flexbox的对齐方式。
self-start和self-end在单个flex项的书写模式中，将flex项对齐到文本方向的开头或结尾。这意味着它们通常只需要当你在页面上混合不同的写作模式/语言。

这意味着如果你有一个flex-direction: row-reverse的flexbox（从右到左），justify-content: flex-start将向右对齐flex项，但justify-content: start将向左对齐flex项-所有这些都假设左写写作模式，如英语。
供参考：

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

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

赞(0）回复(0）举报 2023-08-09

我来回答

css Flexbox：flex-start/flex-end、self-start/self-end、start/end;有什么区别？

4条答案

相关问题

热门标签

最新问答