How Can I Distribute Space Vertically Using Flexbox?

Vertical Flexbox Space Distribution

When dealing with flexbox layouts in rows, it's straightforward to fill the available space. You can use flex: 1 on an element to indicate that it should consume any remaining space. However, achieving this vertically can be a bit trickier.

Vertical Flexbox

To achieve vertical space distribution, consider these steps:

1. Set the parent container's flex-direction to column.
2. To have an element fill the remaining space, assign it flex: 1.

Example

Here's a code demonstration:

body { margin: 0; }
* { box-sizing: border-box; }
.row {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.flex { flex: 1; }
.row, .row > * { border: 1px solid; }

<div class="row">
  <div>some content</div>
  <div class="flex">This fills the available space</div>
  <div>another content</div>
</div>

In this example, the flex class on the middle element indicates that it should occupy the remaining space in the vertical column, pushing the other elements to the top and bottom.

The above is the detailed content of How Can I Distribute Space Vertically Using Flexbox?. For more information, please follow other related articles on the PHP Chinese website!