JavaScript 없이 CSS에서 모든 요소를 ​​가장 넓은 너비와 동일한 너비로 만드는 방법은 무엇입니까?

CSS를 사용하여 모든 요소를 ​​가장 넓은 요소와 동일한 너비로 만드는 방법

특정 시나리오에서는 모든 요소가 레이아웃에서 가장 넓은 요소와 동일한 너비를 갖습니다. 이는 JavaScript를 사용하여 이 효과를 얻는 인기 있는 예와는 달리 JavaScript를 사용하지 않고도 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 규칙을 활용하면 다음과 같은 결과를 얻을 수 있습니다.

1. Flexbox 컨테이너 (.list-container): 상위 컨테이너는 inline-flex를 활용하여 하위 요소(.list)를 동일한 컨테이너에 수평으로 정렬합니다. line.
2. 목록 컨테이너(.list): 이 컨테이너는 flex-direction: column을 사용하여 목록 항목(.list-item)을 열에서 수직으로 정렬합니다.
3. 목록 항목(.list-item): 이러한 요소에는 모든 항목이 동일한 크기로 표시되도록 하는 고정 너비를 포함하여 여러 가지 스타일 속성이 있습니다. 또한 flex-wrap: Wrap은 필요한 경우 항목이 여러 줄로 흐르도록 하여 JavaScript 기반 예제의 동작을 모방합니다.

다음은 이 방법의 적용을 보여주는 예제 HTML 구조입니다. :

<div class="list-container">
  <div class="list">
    <div class="list-item">fresh figs</div>
    <div class="list-item">pine nuts</div>
    <div class="list-item">honey</div>
    <div class="list-item">balsamic vinegar</div>
  </div>
</div>

<div class="list-container">
  <div class="list">
    <div class="list-item">fresh figs</div>
    <div class="list-item">pine nuts</div>
    <div class="list-item">honey</div>
    <div class="list-item">balsamic vinegar</div>
  </div>
</div>

결론적으로 CSS만을 사용하여 JavaScript 기반 예제의 기능을 복제하는 것이 가능합니다. Flexbox의 원칙을 사용하면 특정 레이아웃 내의 모든 요소가 가장 넓은 요소와 동일한 너비를 가지도록 보장하여 시각적으로 일관되고 체계적인 모양을 만들 수 있습니다.

위 내용은 JavaScript 없이 CSS에서 모든 요소를 ​​가장 넓은 너비와 동일한 너비로 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!