CSS Flexbox: Display Items Vertically | Flex-direction: column

To display flex items vertically, you can use the CSS property 'flex-direction' with the value 'column'. This will arrange the flex items in a column, instead of the default row.

Here is an example:

HTML:

<div class='container'>
  <div class='item'>Item 1</div>
  <div class='item'>Item 2</div>
  <div class='item'>Item 3</div>
</div>

CSS:

.container {
  display: flex;
  flex-direction: column;
}

.item {
  /* styling for each item */
}

In this example, the 'container' class is set to 'display: flex' to enable flexbox layout. The 'flex-direction: column' property is used to arrange the 'item' elements vertically.

You can then add additional styling to the '.item' class as needed.

Note: Flexbox is widely supported, but if you need to support older browsers, you may need to use vendor prefixes or consider using a polyfill.'}