如何使用CSS将Flex布局中的行转换为列？

Hey there! To switch your current row-flowing flex layout into a column-based one (where items stack top-to-bottom in columns before moving to the next column), here are three practical approaches you can implement:

1. Use Flexbox with Column Direction #

Modify your existing flex container to use a vertical column flow, then set a fixed height to enable wrapping into new columns:

.flex-container {
  max-width: 500px;
  width: 100%;
  display: flex;
  flex-direction: column; /* Switch to vertical column flow */
  flex-wrap: wrap; /* Allow items to wrap into new columns when height is exceeded */
  height: 200px; /* Define a height to trigger wrapping */
}
.flex-item {
  width: 25%; /* Keep each column at 25% of container width */
  height: 50px; /* Optional: Fixed height for consistent layout */
  box-sizing: border-box;
  border: 1px solid #eee; /* Optional: Visual border for clarity */
}

How it works: flex-direction: column makes items stack vertically, while flex-wrap: wrap pushes excess items into new columns once the container's height is reached. The fixed height is critical here—without it, all items will stay in a single column.

2. Use CSS Grid for Precise Column-First Flow #

CSS Grid offers a more intuitive way to control column-first layout with grid-auto-flow: column:

.flex-container {
  max-width: 500px;
  width: 100%;
  display: grid;
  grid-auto-flow: column; /* Prioritize filling columns before rows */
  grid-template-rows: repeat(4, 50px); /* Define 4 rows with fixed height */
  grid-auto-columns: 25%; /* Set each column to 25% width */
  gap: 4px; /* Optional: Add spacing between items */
}
.flex-item {
  border: 1px solid #eee; /* Optional: Visual border */
}

How it works: grid-auto-flow: column tells the grid system to fill all rows in a column before creating a new one. grid-template-rows locks in the number of rows per column, so your 19 items will split into 4 columns (3 columns with 5 items, 1 column with 4 items).

3. Use CSS Multi-Column Layout (Simplest for Flowing Content) #

If you don't need strict control over row counts and just want content to flow naturally into columns, use the CSS Columns module:

.flex-container {
  max-width: 500px;
  width: 100%;
  column-count: 4; /* Split content into 4 columns */
  column-gap: 8px; /* Space between columns */
}
.flex-item {
  break-inside: avoid; /* Prevent items from being split across columns */
  margin-bottom: 8px; /* Space between items */
  border: 1px solid #eee; /* Optional: Visual border */
  padding: 8px;
  box-sizing: border-box;
}

How it works: column-count directly defines the number of columns, and the browser automatically distributes items evenly across them. break-inside: avoid ensures no single item gets cut off between two columns.

Pick the method that best fits your needs: Flexbox or Grid for precise control over item placement, or CSS Columns for quick, flowing multi-column content.

内容的提问来源于stack exchange，提问作者Marek Rzepka