CSS를 사용하여 가장 넓은 요소에 대해 균일한 항목 너비를 설정하는 방법

에서 설명한 대로 인라인 Flexbox를 활용하여 원하는 레이아웃을 얻을 수 있습니다. 제공된 CSS 솔루션:

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

이 CSS에서는 .list-container가 인라인 가변상자 표시를 갖도록 설정하여 해당 하위 .list 요소가 가로로 표시되도록 합니다. .list 요소에는 수직 flexbox 표시가 있어 하위 .list-item 요소가 수직으로 쌓일 수 있습니다.

결정적으로 .list-item 요소의 flex-wrap 속성은 래핑으로 설정되어 있습니다. 즉, .list 컨테이너 내에서 한 줄에 들어갈 수 없으면 자동으로 다음 줄로 줄 바꿈됩니다.

또한 .list-에 대해 justify-content 속성을 flex-start로 설정합니다. 항목 요소는 .list 컨테이너의 왼쪽 가장자리에 정렬됩니다. 이렇게 하면 가장 긴 항목이 목록에 있는 모든 항목의 너비를 결정하게 됩니다.

이 CSS를 구현하면 모든 항목이 가장 넓은 요소와 동일한 너비를 갖는 레이아웃을 생성하여 일관되고 미적으로 보기 좋은 레이아웃을 만들 수 있습니다. 모습.