How do we use flexbox (`display: flex;`) to align elements vertically?



How do we use flexbox (display: flex;) to align elements vertically?


When we use display: flex; on an element, called a flex-container, children elements nested inside, called flex-items, will align horizontally by default. To stack the flex-items vertically instead we can use flex-direction: column; on the flex-container.