CSS를 사용하여 모든 목록 항목의 너비가 가장 넓은 항목과 동일한지 확인하는 방법은 무엇입니까?

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가 인라인 flexbox 표시를 갖도록 설정하여 하위 .list 요소가 수평으로 표시되도록 합니다. .list 요소에는 수직 flexbox 표시가 있어 하위 .list-item 요소가 수직으로 쌓일 수 있습니다.

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

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

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

위 내용은 CSS를 사용하여 모든 목록 항목의 너비가 가장 넓은 항목과 동일한지 확인하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!