How to Achieve Identical Widths for All Items in a List Using CSS?

Identical Widths for All Items with CSS

In many situations, you may desire a layout where all items have the same width as the widest element, even when they do not all fit on a single line. This can provide a more visually appealing and cohesive result.

CSS Solution

While JavaScript can be used to achieve this effect, it is also possible to accomplish it solely with CSS. Consider the following code:

.list-container {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
}

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

.list-item {
  text-transform: capitalize;
  background-color: rgb(200, 30, 40);
  font-size: 1.3em;
  text-align: left;
  padding: 10px;
  margin: 1px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

How It Works

This CSS code leverages the combination of flexbox and inline-flex to achieve the desired layout.

• .list-container: This parent element establishes the horizontal layout of the lists, ensuring they appear side by side.
• .list: The child elements inside .list-container display as vertical columns thanks to flex-direction: column.
• .list-item: Each individual item sets its width to match the widest item using flex-wrap: wrap and justify-content: flex-start. This ensures that all elements have the same width as the widest element in the list.

The above is the detailed content of How to Achieve Identical Widths for All Items in a List Using CSS?. For more information, please follow other related articles on the PHP Chinese website!