CSS Flex 레이아웃을 통해 2열 레이아웃을 구현하는 방법-CSS 튜토리얼-php.cn

CSS Flex 레이아웃을 통해 2열 레이아웃을 구현하는 방법

PHPz

풀어 주다： 2023-09-26 10:54:37

원래의

1558명이 탐색했습니다.

如何通过Css Flex 弹性布局实现两栏布局

CSS Flex Flex Layout을 통해 2열 레이아웃을 구현하는 방법

CSS Flex Flex Layout은 웹 페이지 레이아웃 프로세스를 단순화할 수 있는 최신 레이아웃 기술로, 디자이너와 개발자가 다양한 레이아웃에 유연하고 적응 가능한 레이아웃을 쉽게 만들 수 있습니다. 각 화면 크기마다. 그중에서도 2열 레이아웃을 구현하는 것은 Flex 레이아웃의 일반적인 요구 사항 중 하나입니다. 이 글에서는 CSS Flex 탄력적 레이아웃을 사용하여 간단한 2열 레이아웃을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

Flex 컨테이너 및 항목 사용

Flex 레이아웃을 사용할 때는 레이아웃 콘텐츠를 래핑하기 위한 상위 컨테이너가 필요합니다. 이 컨테이너를 Flex 컨테이너라고 합니다. Flex 컨테이너는 디스플레이 속성을 "flex" 또는 "inline-flex"로 설정하여 생성할 수 있습니다. 구체적으로 다음 코드를 사용하여 Flex 컨테이너를 생성할 수 있습니다.

<div class="container">
  <!-- 布局的内容 -->
</div>

로그인 후 복사

다음으로 Flex 컨테이너에서 두 개의 열 레이아웃인 두 개의 하위 항목을 생성해야 합니다. 이러한 하위 프로젝트를 Flex 프로젝트라고 합니다. Flex 컨테이너에서는 flex 속성을 "1" 또는 다른 값으로 설정하여 각 항목의 크기와 탄력성을 제어할 수 있습니다. 구체적으로 다음 코드를 통해 두 개의 Flex 프로젝트를 생성할 수 있습니다.

<div class="container">
  <div class="item">
    <!-- 左栏内容 -->
  </div>
  <div class="item">
    <!-- 右栏内容 -->
  </div>
</div>

로그인 후 복사

Flex 레이아웃 설정

2열 레이아웃을 구현하려면 Flex 컨테이너와 프로젝트의 관련 속성을 설정해야 합니다. 먼저 Flex 컨테이너의 하위 요소를 수평으로 정렬해야 합니다. 이는 컨테이너의 flex-direction 속성을 "row"로 설정하여 달성할 수 있습니다. 구체적으로 다음 코드를 통해 Flex 컨테이너의 속성을 설정할 수 있습니다.

.container {
  display: flex;
  flex-direction: row;
}

로그인 후 복사

다음으로 항목의 flex 속성을 설정하여 각 항목이 차지하는 공간을 제어할 수 있습니다. 여기서는 "fr"(fractional flex-grow property의 줄임말)과 같은 상대 단위를 사용하여 자식이 차지하는 비율을 결정할 수 있습니다. 구체적으로 다음 코드를 통해 Flex 항목의 속성을 설정할 수 있습니다.

.item {
  flex: 1;
}

로그인 후 복사

여기에서는 flex: 1을 사용하여 각 항목이 차지하는 공간을 동일한 비율로 설정합니다. 왼쪽 열이 더 많은 공간을 차지하도록 하려면 해당 항목의 flex 값을 조정할 수 있습니다. 예를 들어 왼쪽 열의 경우 flex 속성을 "2"로 설정하고 오른쪽 열의 경우 flex 속성을 "1"로 설정할 수 있습니다.

전체 코드 예

다음은 CSS Flex를 사용하여 간단한 2열 레이아웃을 구현하는 방법을 보여주는 전체 코드 예입니다.

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      flex-direction: row;
    }
    
    .item {
      flex: 1;
      padding: 20px;
    }
    
    .left {
      background-color: #f1f1f1;
    }
    
    .right {
      background-color: #dddddd;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item left">
      <!-- 左栏内容 -->
    </div>
    <div class="item right">
      <!-- 右栏内容 -->
    </div>
  </div>
</body>
</html>

로그인 후 복사

이 예에서는 간단한 CSS 스타일을 사용하여 항목의 배경색을 다음과 같이 설정했습니다. 왼쪽 열과 오른쪽 열을 구별합니다. 필요에 따라 레이아웃을 아름답게 만들기 위해 추가 스타일을 추가할 수 있습니다.

요약

CSS Flex 레이아웃을 사용하면 쉽게 2단 레이아웃을 구현할 수 있습니다. Flex 컨테이너의 표시 속성을 "flex"로 설정한 다음 flex-direction 속성을 "row"로 설정하고 Flex 항목의 flex 속성을 해당 값으로 설정하면 유연하고 적응 가능한 레이아웃을 얻을 수 있습니다. 위의 내용은 간단한 예이므로 필요와 디자인에 따라 코드를 조정할 수 있습니다. 이 글이 CSS Flex 탄력적 레이아웃을 이해하고 사용하는 데 도움이 되기를 바랍니다.

위 내용은 CSS Flex 레이아웃을 통해 2열 레이아웃을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!