Question

我刚刚注意到我之前见过的align-self属性的一些值。什么是start，end，self-start和self-end以及它们与flex-start和flex-end的区别是什么？

我在使用flexbox时经常提到the guide at CSS-Tricks，但它没有提到这些值。我在MDN上阅读了documentation for align-self，但对这些值的单行描述并不足以让我理解。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

创建了值flex-end和flex-start（以及其他），以便与flex layout一起使用。

然而，W3C一直在开发Box Alignment Module，它建立了一组通用的对齐属性和值，可用于多个盒子模型，包括flex，grid，table和block。

所以你所看到的是最新的值，它们最终将取代现有的特定于布局的值。

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

§ 1.2. Module interactions

CSS Box Alignment Module扩展并取代了它的定义   对齐属性（justify-content，align-items，   align-self，align-content）在此处介绍。

网格规范中有类似的语言。这是一个例子：

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

row-gap和column-gap属性（及其gap简写），   在网格容器上指定时，定义网格之间的排水沟   行和网格列。他们的语法在CSS Box Alignment 3 §8 Gaps Between Boxes中定义。

原始属性 - grid-row-gap，grid-column-gap和grid-gap - 并没有持久。虽然为了向后兼容，但我确信它们仍然受到尊重。

Answer 2

flex-start考虑了弯曲方向的-reverse值的存在，而start没有考虑。

例如，在将伸缩容器设置为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>

Flexbox：flex-start，自启动和启动;有什么区别？

2 个答案: