display flex 垂直

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