CSS Flex 레이아웃을 통해 적응형 왼쪽 및 오른쪽 사이드바를 구현하는 방법
CSS Flex 탄력적 레이아웃을 통해 적응형 왼쪽 및 오른쪽 사이드바를 구현하는 방법
소개: 웹 디자인의 지속적인 개발로 인해 페이지의 적응형 레이아웃을 구현하는 것이 중요한 요구 사항이 되었습니다. CSS Flex 레이아웃은 이 문제를 해결하는 좋은 방법입니다. 이 글에서는 CSS Flex 탄력적 레이아웃을 통해 왼쪽 및 오른쪽 사이드바의 적응형 레이아웃을 구현하는 방법을 소개하고 자세한 코드 예제를 제공합니다.
1. Flex 레이아웃 소개
1.1 유연한 컨테이너와 유연한 항목
Flex 레이아웃은 컨테이너의 하위 요소를 유연한 항목으로 설정하여 레이아웃을 구현합니다. 상위 요소를 플렉스 컨테이너라고 하고 하위 요소를 플렉스 항목이라고 합니다. 유연한 컨테이너에서는 일부 속성을 설정하여 하위 요소의 배열과 해당 요소가 차지하는 공간을 제어할 수 있습니다.
1.2 유연한 컨테이너의 속성
- display: flex: 컨테이너를 유연한 컨테이너로 설정합니다.
- flex-direction: 유연한 항목의 배열을 행(가로 방향) 또는 열(세로 방향)으로 설정합니다. )
- justify-content: 주축에서 유연한 항목의 정렬을 설정합니다. 이는 flex-start(시작점이 왼쪽 또는 위쪽에 있음), flex-end(끝점이 오른쪽에 있음)로 설정할 수 있습니다. 또는 하단), center(가운데 정렬), space-between(양 끝 정렬, 항목 사이의 간격이 동일함), space-around(항목 양쪽의 간격이 동일, 항목 사이의 간격이 원본의 절반임) )
- align-items: 교차축에서 유연한 항목의 정렬을 설정합니다. flex-start(시작점이 위쪽 또는 왼쪽 근처에 있음), flex-end(끝점이 아래쪽 또는 아래쪽에 있음)로 설정할 수 있습니다. 오른쪽), 가운데(가운데 정렬), 늘이기(전체 교차 축을 채우도록 늘이기), 기준선(항목 텍스트의 첫 번째 줄 기준선) 정렬).
1. 유연한 항목의 속성
- flex: 기본값은 0이며, 이는 max-width: none; flex-shrink: 0; 특정 값은 정수(예: 1.5) 또는 소수(예: 1.5)일 수 있습니다.
- flex-basis: 기본 축에서 유연한 항목의 초기 크기를 설정합니다. 기본값은 원래 크기와 동일합니다.
- align-self: 교차축에 유연한 항목 정렬을 설정합니다.
2. 왼쪽 및 오른쪽 사이드바의 적응형 레이아웃 예
CSS Flex 탄력적 레이아웃을 통해 왼쪽 및 오른쪽 사이드바의 적응형 레이아웃을 구현하는 방법을 구체적인 예를 통해 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左右侧边栏自适应布局示例</title>
<style>
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: row;
}
.sidebar {
background-color: #f1f1f1;
width: 20%;
flex-grow: 1;
}
.content {
background-color: #eee;
width: 80%;
flex-grow: 3;
}
.sidebar, .content {
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
<h2>左侧边栏</h2>
<p>左侧边栏内容</p>
</div>
<div class="content">
<h1>主要内容区域</h1>
<p>主要内容</p>
</div>
</div>
</body>
</html>위 코드는 간단한 왼쪽 및 오른쪽 사이드바 레이아웃 예시입니다. 컨테이너의 display: flex; 및 flex-direction: row;를 설정하여 하위 요소를 가로 방향으로 정렬합니다. display: flex; 和 flex-direction: row; 使得子元素在水平方向上排列。
左侧边栏的 width: 20%; 和右侧内容区域的 width: 80%; 控制了两者在水平方向上的占比，即左边栏占 20% 宽度，内容区域占 80% 宽度。
通过设置左侧边栏的 flex-grow: 1; 和右侧内容区域的 flex-grow: 3;
너비: 20%;와 오른쪽 콘텐츠 영역의 너비: 80%;는 두 요소의 가로 방향 비율을 제어합니다. 왼쪽은 열이 너비의 20%를 차지하고 콘텐츠 영역이 너비의 80%를 차지합니다.
왼쪽 사이드바에 flex-grow: 1;을 설정하고 오른쪽 콘텐츠 영역에 flex-grow: 3;을 설정하여 왼쪽 및 오른쪽 콘텐츠 영역의 자동 조정을 실현합니다. 오른쪽 사이드바를 조정하세요. 즉, 왼쪽 사이드바는 사용 가능한 공간의 1/4을 차지하고 오른쪽 콘텐츠 영역은 사용 가능한 공간의 3/4을 차지합니다.
위 내용은 CSS Flex 레이아웃을 통해 적응형 왼쪽 및 오른쪽 사이드바를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7519
15
1378
52
81
11
54
19
21
68
Windows 11에서 콘텐츠 적응형 밝기를 구성하는 방법
Apr 14, 2023 pm 12:37 PM
적응형 밝기는 표시되는 콘텐츠나 조명 조건에 따라 화면의 밝기 수준을 조정하는 Windows 11 컴퓨터의 기능입니다. 일부 사용자는 여전히 Windows 11의 새로운 인터페이스에 익숙해지고 있기 때문에 적응형 밝기를 쉽게 찾을 수 없으며 일부 사용자는 적응형 밝기 기능이 Windows 11에 없다고 말하기도 하므로 이 튜토리얼에서는 모든 문제를 해결합니다. 예를 들어 YouTube 동영상을 시청할 때 동영상에 갑자기 어두운 장면이 표시되는 경우 적응형 밝기가 화면을 더 밝게 만들고 대비 수준을 높입니다. 이는 컴퓨터, 스마트폰 또는 장치가 주변 조명에 따라 밝기 수준을 조정할 수 있는 화면 설정인 자동 밝기와 다릅니다. 전면 카메라에 특별한 것이 있습니다
Vue로 적응형 모바일 인터페이스를 구축하는 방법은 무엇입니까?
Jun 27, 2023 am 11:05 AM
모바일 인터넷의 인기로 인해 점점 더 많은 웹사이트와 애플리케이션에서 모바일 경험을 고려해야 합니다. 널리 사용되는 프런트엔드 프레임워크인 Vue는 반응형 레이아웃과 적응형 기능을 갖추고 있어 적응형 모바일 인터페이스를 구축하는 데 도움이 될 수 있습니다. 이 기사에서는 Vue를 사용하여 적응형 모바일 인터페이스를 구축하는 방법을 소개합니다. px 대신 rem을 단위로 사용하고 모바일 인터페이스에서 px를 단위로 사용하면 여러 장치에서 표시 효과가 일관되지 않을 수 있습니다. 따라서 단위는 px 대신 rem을 사용하는 것이 좋습니다. 렘은 상대적이다
CSS 뷰포트 단위 vmin 및 vw를 사용하여 적응형 이미지 크기를 구현하는 방법
Sep 13, 2023 am 08:18 AM
적응형 이미지 크기를 구현하기 위해 CSSViewport 단위 vmin 및 vw를 사용하는 방법 웹 디자인에서는 이미지가 화면 크기에 적응해야 하는 상황에 자주 직면합니다. 이 목표를 달성하기 위해 CSS는 강력한 단위인 뷰포트 단위를 제공합니다. 그 중 vmin은 뷰포트 너비의 작은 쪽의 백분율을 나타내고, vw는 뷰포트 너비의 백분율을 나타냅니다. 따라서 이 두 단위를 사용하여 적응형 이미지 크기의 효과를 얻을 수 있습니다. 구체적인 내용은 아래에서 소개하겠습니다
vue는 적응형이 될 수 있나요?
Dec 30, 2022 pm 03:25 PM
Vue는 자체 적응을 달성하는 방법은 다음과 같습니다. 1. "npm install" 또는 "yarn add" 명령을 통해 "scale-box" 구성 요소를 설치하고 "scale-box"를 사용하여 적응형 스케일링을 달성합니다. 2. 자체 적응을 달성하기 위해 장치 픽셀 비율 설정을 통해 3. JS를 통해 줌 속성을 설정하여 자체 적응을 달성합니다.
CSS 뷰포트: vmax 및 vw를 사용하여 적응형 텍스트 너비를 구현하는 방법
Sep 13, 2023 am 10:16 AM
CSSViewport: vmax 및 vw를 사용하여 적응형 텍스트 너비를 구현하는 방법 모바일 장치의 인기로 인해 반응형 디자인은 웹 디자인에서 중요한 개념이 되었습니다. 그 중에서도 다양한 화면 크기에서도 일관된 디스플레이 효과를 유지하기 위한 적응형 텍스트 너비가 중요한 기술입니다. 이 기사에서는 CSSViewport 단위, 특히 vmax 및 vw 단위를 사용하여 적응형 텍스트 너비를 구현하는 방법을 소개합니다. 이론적인 설명 외에 구체적인 설명도 해드립니다.
CSS Flex 유연한 레이아웃의 일반적인 문제와 해결 방법에 대한 자세한 설명
Sep 26, 2023 pm 01:19 PM
CSSFlex 탄력적 레이아웃의 일반적인 문제와 해결 방법에 대한 자세한 설명 소개: CSSFlex 탄력적 레이아웃은 우아하고 간결한 구문과 강력한 유연성을 갖춘 현대적인 레이아웃 방법이며 반응형 웹 페이지를 구축하는 데 널리 사용됩니다. 그러나 실제 적용에서는 요소가 예상대로 배열되지 않거나 크기가 일관되지 않는 등 몇 가지 일반적인 문제가 자주 발생합니다. 이 기사에서는 이러한 문제를 자세히 소개하고 해당 솔루션을 제공합니다. 코드 예제는 다음과 같습니다. 1. 요소 배열이 예상대로 되지 않습니다. 문제 설명: Flex를 사용할 때.
PHP8.0의 적응형 서버
May 14, 2023 pm 01:10 PM
2020년 11월 26일, PHP 팀은 공식적으로 PHP 8.0 버전을 출시했습니다. 이전 버전과 비교하여 PHP 8.0은 주목할 만한 기능 중 하나가 적응형 서버입니다. 이 기사에서는 PHP8.0의 적응형 서버 개념과 장점을 소개합니다. 이전 PHP 버전에서는 개발자가 PHP 자체 서버(예: PHP-FPM, Apache)를 사용하여 자체 코드를 실행할 수 있었습니다. 하지만 이러한 서버의 단점은
HTML, CSS, jQuery를 사용하여 반응형 웹사이트 레이아웃을 만드는 방법
Oct 27, 2023 am 11:06 AM
HTML, CSS 및 jQuery를 사용하여 적응형 웹 사이트 레이아웃을 만드는 방법 오늘날 인터넷 시대에 웹 사이트의 적응형 레이아웃은 필수 요구 사항이 되었습니다. 웹 사이트의 적응형 레이아웃을 사용하면 웹 사이트가 다양한 장치에서 좋은 사용자 경험을 표시하고 컴퓨터, 태블릿, 휴대폰과 같은 다양한 화면 크기의 장치에 적응할 수 있습니다. 이 기사에서는 HTML, CSS 및 jQuery를 사용하여 반응형 웹 사이트 레이아웃을 만드는 방법을 소개하고 구체적인 코드 예제를 제공합니다. HTML을 사용하여 웹사이트 뼈대 만들기
