CSS Flex 레이아웃을 통해 적응형 왼쪽 및 오른쪽 사이드바를 구현하는 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS Flex 레이아웃을 통해 적응형 왼쪽 및 오른쪽 사이드바를 구현하는 방법

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 26, 2023 am 10:57 AM

적응형CSS 플렉스 유연한 레이아웃왼쪽 및 오른쪽 사이드바

如何通过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 id="左侧边栏">左侧边栏</h2>
            <p>左侧边栏内容</p>
        </div>
        <div class="content">
            <h1 id="主要内容区域">主要内容区域</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 탄력적 레이아웃을 통해 왼쪽 및 오른쪽 사이드바의 적응형 레이아웃을 구현하는 것은 상대적으로 간단합니다. 상위 컨테이너를 플렉스 컨테이너로 설정하고 flex의 관련 속성을 사용하여 정렬을 제어하면 됩니다. 하위 요소 비율의 정렬 및 공간 점유. 이 기사에서는 독자가 참조하고 배울 수 있는 특정 코드 예제를 제공합니다. 이 기사가 도움이 되기를 바랍니다! 🎜

위 내용은 CSS Flex 레이아웃을 통해 적응형 왼쪽 및 오른쪽 사이드바를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사