How to Ensure All List Items Have the Same Width as the Widest Item Using CSS?

How to Set Uniform Item Widths for the Widest Element Using CSS

You can achieve the desired layout by utilizing inline flexbox, as demonstrated in the CSS solution provided:

.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;
}

In this CSS, we set the .list-container to have an inline flexbox display, ensuring that its child .list elements are displayed horizontally. The .list elements have a vertical flexbox display, allowing their child .list-item elements to stack vertically.

Crucially, the .list-item elements have their flex-wrap property set to wrap. This means that when they cannot fit in a single line within their .list container, they will automatically wrap to the next line.

Furthermore, we set the justify-content property to flex-start for the .list-item elements, which causes them to align to the left edge of their .list container. This ensures that the longest item dictates the width of all items in the list.

By implementing this CSS, you can create a layout where all items have the same width as the widest element, ensuring a consistent and aesthetically pleasing appearance.

The above is the detailed content of How to Ensure All List Items Have the Same Width as the Widest Item Using CSS?. For more information, please follow other related articles on the PHP Chinese website!