web-dev-qa-db-fra.com

Flexbox: flex-start, self-start et start; Quelle est la différence?

Je viens de remarquer quelques valeurs de align-self propriété que je n'ai jamais vue auparavant. Que sont start, end, self-start, et self-end et quelles sont leurs différences par rapport à flex-start et flex-end?

J'ai fait référence à le guide sur CSS-Tricks souvent lorsque je travaille avec flexbox, mais il ne mentionne pas ces valeurs. J'ai lu le documentation pour align-self sur MDN, mais la description sur une ligne des valeurs ne me suffit pas à comprendre.

J'ai pensé que je pourrais être en mesure de jouer avec les valeurs pour le comprendre, mais elles semblent toutes faire la même chose ...

.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>
cssflexboxcss-grid
15
Vince

Les valeurs flex-end et flex-start (entre autres) ont été créés pour être utilisés avec mise en page flexible .

Cependant, le W3C a développé le module d'alignement de boîtes , qui établit un ensemble commun de propriétés et de valeurs d'alignement à utiliser sur plusieurs modèles de boîtes, y compris flex, grille, table et bloc.

Donc, ce que vous voyez, ce sont les nouvelles valeurs qui remplaceront éventuellement les valeurs spécifiques à la disposition existantes.

Voici comment cela est décrit dans la spécification flexbox:

§ 1.2. Interactions des modules

Le module CSS Box Alignment étend et remplace les définitions des propriétés d'alignement (justify-content, align-items, align-self, align-content) présenté ici.

Il existe un langage similaire dans la spécification Grid. Voici un exemple:

§ 10.1. Gouttières: les row-gap, column-gap et gap propriétés

Le row-gap et column-gap propriétés (et leur raccourci gap), lorsqu'elles sont spécifiées sur un conteneur de grille, définissent les gouttières entre les lignes de grille et les colonnes de grille. Leur syntaxe est définie dans CSS Box Alignment 3 §8 Gaps Between Boxes .

Les propriétés d'origine - grid-row-gap, grid-column-gap et grid-gap - n'a pas duré longtemps. Bien que, pour des raisons de compatibilité descendante, je suis sûr qu'ils sont toujours respectés.

14
Michael_B

flex-start prend en compte la présence de -reverse valeurs de la direction flexible, contrairement à start.

Par exemple, dans un mode d'écriture de gauche à droite avec un conteneur flexible défini sur flex-direction:row-reverse, justify-content:start entraînerait la justification de tous les éléments vers la gauche, tandis que justify-content:flex-start entraînerait la justification de tous les éléments à droite.

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>

Modifier le 15 juil.2019

Le comportement décrit différent est vrai dans le navigateur Firefox (au moins jusqu'à 68), tandis que dans Chrome, comme indiqué dans le commentaire de diachedelic , les deux propriétés fonctionnent de la même manière

7
Henry Chan