right – devfrontend.info

Sources:

Flexbox: centrer tous les éléments d’une rangée sauf le dernier qui sera aligné à droite

Source: Center and right align flexbox elements.

Method #3: Flex Auto Margins & Invisible Flex Item (pseudo-element) testée et fonctionne.

ul::before {
  content:"D";
  margin: 1px auto 1px 1px;
  visibility: hidden;
  padding: 5px;
  background: #ddd;
}
li:last-child {
  margin-left: auto;
  background: #ddd;
}
ul {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
li {
  display: flex;
  margin: 1px;
  padding: 5px;
  background: #aaa;
}
p { text-align: center; margin-top: 0; }
span { background-color: aqua; }

ul::before {

content:"D";

margin: 1px auto 1px 1px;

visibility: hidden;

padding: 5px;

background: #ddd;

}

li:last-child {

margin-left: auto;

background: #ddd;

}

ul {

padding: 0;

margin: 0;

display: flex;

flex-direction: row;

justify-content: center;

align-items: center;

}

li {

display: flex;

margin: 1px;

padding: 5px;

background: #aaa;

}

p { text-align: center; margin-top: 0; }

span { background-color: aqua; }

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>
<p><span>true center</span></p>

<ul>

</ul>

<p><span>true center</span></p>

Articles récents

Catégories

Archives

Méta

Étiquette : right

[CSS] Alignements compliqués avec Flexbox

Flexbox: centrer tous les éléments d’une rangée sauf le dernier qui sera aligné à droite