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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
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; } |
|
1 2 3 4 5 6 7 |
<ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> </ul> <p><span>true center</span></p> |
