Dear Stackoverflowers,
When using a flexbox we sometimes want to stretch our flexbox-items. However, I cannot seem to find a practical difference between:
align-items: stretch;and
align-content: stretch;Take for example the code below. Both flexboxes show the same result. Could anyone help explain the difference? Preferably with a working example where interchanging the two would make a visible difference?
Thank you in advance!
Kind regards, Justin
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style> .container{ display: flex; height: 400px; width: 400px; flex-wrap: wrap; border: 2px solid black; margin: 10px; justify-content: space-evenly; } .item { background-color: rebeccapurple; width: 100px; border: 1px solid black; } /* These are the same. Is there any scenario where they are not? */ #topContainer{ align-items: stretch; } #bottomContainer { align-content: stretch; }</style></head><body><div class="container" id="topContainer"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div><div class="container" id="bottomContainer"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div></body></html>