![CSS 面板布局属性探索:flex 和 grid](https://img.php.cn/upload/article/000/887/227/169820111488133.jpg)
CSS 패널 레이아웃 속성 탐색: 플렉스 및 그리드
현대 웹 개발에서 레이아웃은 중요한 측면입니다. 과거에는 고정된 너비와 높이를 사용하여 레이아웃을 제어했지만, 반응형 디자인이 증가함에 따라 보다 유연하고 적응적인 레이아웃 방법이 필요합니다. CSS는 몇 가지 강력한 레이아웃 속성을 제공하는데, 가장 일반적으로 사용되는 속성은 flex와 Grid입니다. 이 문서에서는 이 두 가지 속성을 사용하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.
- 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(역 줄 바꿈)일 수 있습니다.
다음은 간단한 플렉스입니다. 레이아웃 예:
- 그리드 레이아웃
그리드 레이아웃은 CSS3에 있습니다. 또 다른 강력한 레이아웃 시스템입니다. 컨테이너를 행과 열로 나누고 하위 요소를 배치할 셀을 지정합니다. 다음은 일반적으로 사용되는 몇 가지 그리드 속성입니다.
- display: 그리드;: 컨테이너를 그리드 레이아웃으로 설정합니다.
- grid-template-columns: 열의 수와 너비를 지정합니다. 픽셀(px), 백분율( %), 또는 자동(auto) 또는 분수(fr)를 사용할 수 있습니다.
- grid-template-rows: 행의 수와 높이를 지정합니다. 사용법은 위와 동일합니다.
- grid-column-gap: 간격 지정 열 사이
- grid-row-gap: 행 사이의 간격을 지정합니다.
- grid-template-areas: 리터럴 식별자 행렬을 사용하여 정의된 각 셀의 이름을 지정합니다.
다음은 간단한 그리드 레이아웃 예입니다.
요약 위에서 언급했듯이 flex와 그리드는 현대 웹 개발에서 일반적으로 사용되는 레이아웃 속성입니다. 유연하고 적응 가능한 레이아웃을 만들 수 있는 강력한 레이아웃 기능을 제공합니다. 이러한 속성을 합리적으로 사용함으로써 웹 페이지의 레이아웃을 더 잘 제어하고 사용자 경험을 향상시킬 수 있습니다.
위 내용은 CSS 패널 레이아웃 속성 탐색: Flex 및 Grid의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!