CSS 패널 레이아웃 속성 탐색: Flex 및 Grid

CSS 패널 레이아웃 속성 탐색: 플렉스 및 그리드

현대 웹 개발에서 레이아웃은 중요한 측면입니다. 과거에는 고정된 너비와 높이를 사용하여 레이아웃을 제어했지만, 반응형 디자인이 증가함에 따라 보다 유연하고 적응적인 레이아웃 방법이 필요합니다. CSS는 몇 가지 강력한 레이아웃 속성을 제공하는데, 가장 일반적으로 사용되는 속성은 flex와 Grid입니다. 이 문서에서는 이 두 가지 속성을 사용하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. flex 레이아웃

flex 레이아웃은 CSS3에 도입된 유연한 레이아웃 모드입니다. 컨테이너 내의 하위 요소를 주축에 배치하고 주축의 공간 할당 규칙에 따라 레이아웃합니다. 다음은 일반적으로 사용되는 몇 가지 플렉스 속성입니다.

• display: flex;: 컨테이너를 플렉스 레이아웃으로 설정
• flex-direction: 행(기본 가로 방향), 열(세로)이 될 수 있는 주축의 방향을 지정합니다. 방향), 행 역방향(가로 방향 역) 또는 열 역방향(세로 방향 역)
• justify-content: 기본 축에서 하위 요소의 정렬을 지정합니다. 이는 flex-start(시작 정렬), flex-가 될 수 있습니다. end(끝 정렬) ), center(가운데 정렬), space-between(양 끝 정렬, 중간 간격 동일) 또는 space-around(양 끝 정렬, 하위 요소 간 간격 동일)
• align-items: flex-start(상단 정렬), flex-end(하단 정렬), center(가운데 정렬), 기준선(기준선 정렬) 또는 Stretch일 수 있는 교차 축 Alignment에서 하위 요소의 위치를 ​​지정합니다( 스트레치 정렬)
• flex-wrap: 하위 요소가 줄바꿈할지 여부를 지정합니다. nowrap(줄 바꿈 없음, 기본값), 줄 바꿈(줄 바꿈) 또는 Wrap-reverse(역 줄 바꿈)일 수 있습니다.

다음은 간단한 플렉스입니다. 레이아웃 예:

<style>
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>

<div class="container">
  <div>项目1</div>
  <div>项目2</div>
  <div>项目3</div>
</div>

2. 그리드 레이아웃

그리드 레이아웃은 CSS3에 있습니다. 또 다른 강력한 레이아웃 시스템입니다. 컨테이너를 행과 열로 나누고 하위 요소를 배치할 셀을 지정합니다. 다음은 일반적으로 사용되는 몇 가지 그리드 속성입니다.

• display: 그리드;: 컨테이너를 그리드 레이아웃으로 설정합니다.
• grid-template-columns: 열의 수와 너비를 지정합니다. 픽셀(px), 백분율( %), 또는 자동(auto) 또는 분수(fr)를 사용할 수 있습니다.
• grid-template-rows: 행의 수와 높이를 지정합니다. 사용법은 위와 동일합니다.
• grid-column-gap: 간격 지정 열 사이
• grid-row-gap: 행 사이의 간격을 지정합니다.
• grid-template-areas: 리터럴 식별자 행렬을 사용하여 정의된 각 셀의 이름을 지정합니다.

다음은 간단한 그리드 레이아웃 예입니다.

<style>
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.item {
  background-color: #ddd;
  padding: 10px;
}
</style>

<div class="container">
  <div class="item">项目1</div>
  <div class="item">项目2</div>
  <div class="item">项目3</div>
</div>

요약 위에서 언급했듯이 flex와 그리드는 현대 웹 개발에서 일반적으로 사용되는 레이아웃 속성입니다. 유연하고 적응 가능한 레이아웃을 만들 수 있는 강력한 레이아웃 기능을 제공합니다. 이러한 속성을 합리적으로 사용함으로써 웹 페이지의 레이아웃을 더 잘 제어하고 사용자 경험을 향상시킬 수 있습니다.

위 내용은 CSS 패널 레이아웃 속성 탐색: Flex 및 Grid의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!