Flexbox 열에서 세로 내용을 가로로 정렬하는 방법은 무엇입니까?

Flexbox를 사용하여 다양한 부모의 자녀 키 균형 조정

질문:

In a 각 열에 다양한 길이의 콘텐츠가 포함된 2열 레이아웃에서 Bootstrap의 모바일 최적화를 방해하지 않고 두 열의 목록이 수평으로 정렬된 상태를 유지하도록 어떻게 보장할 수 있습니까? 이상적으로 솔루션은 Flexbox를 활용하고 JavaScript를 피해야 합니다.

답변:

JavaScript 없이 이를 달성하려면 모든 콘텐츠 항목(제목, 단락 및 목록) 마크업의 형제입니다.

화면 너비가 열을 나란히 표시할 수 있는 경우 적절한 정렬을 유지하기 위해 이러한 항목을 다시 정렬해야 합니다.

• 미디어 쿼리:

  <code class="css">@media (min-width: 768px) {
    // Flexbox rules
  }</code>

• Flexbox 구성:

  <code class="css">.content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  
  .content > * {
    flex-basis: calc(50% - 30px); // Adjust for gutters
  }</code>

• 요소 순서:

  <code class="css">.content h2 { 
    order: 0; // Heading (row 1)
  }
  
  .content p { 
    order: 1; // Paragraphs (row 2)
  }
  
  .content p + p { 
    order: 2; // Second paragraph (row 3)
  }
  
  .content ul { 
    order: 3; // List (row 4)
  }</code>

고려 사항:

• 테두리: 테두리를 추가하고 요소에 테두리 속성 조합을 사용하고 미디어 쿼리로 이를 조정하여 다양한 스태킹 구성을 고려합니다.

업데이트된 코드:

작업 예제를 보려면 업데이트된 코드펜을 참조하세요.

[Codepen Link]

위 내용은 Flexbox 열에서 세로 내용을 가로로 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!