유연한 레이아웃이란 무엇입니까? 유연한 레이아웃 Flex 기본 적용(코드 포함)-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

유연한 레이아웃이란 무엇입니까? 유연한 레이아웃 Flex 기본 적용(코드 포함)

不言

Aug 01, 2018 pm 02:55 PM

유연한 레이아웃

유연한 레이아웃이란 무엇인가요? 유연한 레이아웃(flex)은 이름에서 알 수 있듯이 요즘에는 기본적으로 모든 브라우저가 유연한 레이아웃을 지원하는 레이아웃 방법입니다. 따라서 이 기사에서 다음에 공유할 내용은 유연한 레이아웃 플렉스의 기본 응용 프로그램입니다.

유연한 레이아웃을 적용하는 방법 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
        .box{
            height:20vh;            
            display: flex;          
        }
        .box div{           
            flex: 1; 
        }
        .box div:last-child{
            flex: 2;
        }
    </style>
</head>
<body>
    <div>
        <div>Document1</div>
        <div>Document2</div>
        <div>Document3</div>
        <div>Document4</div>
        <div>Document5</div>
    </div>    
</body>
</html>

실행 결과는 다음과 같습니다.

유연한 레이아웃이란 무엇입니까? 유연한 레이아웃 Flex 기본 적용(코드 포함)

컨테이너 설정

flex에는 설정할 수 있는 6가지 속성이 있습니다.

flex-direction:row(스핀들 왼쪽에서 오른쪽으로, 기본값) / row-reverse(주축을 오른쪽에서 왼쪽으로) / 열(주축을 위에서 아래로) / 열-역방향(주축을 아래에서 위로) 결정 주축의 방향

flex-wrap:nowrap (기본값, 줄 바꿈 없음) / Wrap (줄 바꿈) / Wrap-reverse (줄 바꿈, 아래 첫 번째 줄)는 항목을 한 축에 정렬할 수 없을 때 줄 바꿈 방법을 결정합니다

flex-flow:는 위의 두 속성인 flex-flow:row nowrap의 약어 모드 기본값입니다.

justify-content: flex-start(기본값, 왼쪽 정렬) / flex-end(오른쪽 정렬) / center(가운데) / space-between(양쪽 끝 정렬, 항목 간 간격 동일) /
space-around( 각 항목 사이의 간격은 동일하므로 항목 사이의 간격은 항목과 테두리 사이의 가격의 두 배입니다. 주축에서 항목의 정렬을 결정합니다. space-between/around는 간격을 적응적으로 조정할 때 유용합니다.

align-items: flex-start(교차축 시작점 정렬) / flex-end(교차축 끝점 정렬) / center(정렬) 교차 축의 중간점) /baseline(항목 텍스트의 첫 번째 줄의 기준선 정렬)/stretch(기본값, 항목이 높이를 설정하지 않거나 자동으로 설정된 경우 항목이 높이를 차지합니다. 전체 컨테이너의). 교차축의 항목 정렬을 정의합니다.

align-content: flex-start(교차축의 시작점에 맞춰 정렬) / flex-end(교차축의 끝점에 맞춰 정렬) / center(교차축에 맞춰 정렬) 교차축의 중간점) /
space-between (교차축의 양쪽 끝점에 맞춰 정렬, 축 사이의 간격이 균등하게 분포됨) /space-around (축 양쪽의 간격이 동일하므로 축 사이의 거리가 동일함) 축이 축과 프레임 사이의 거리보다 큽니다. Double)
/stretch (기본값, 축이 전체 교차 축을 차지합니다). 여러 축의 정렬을 정의합니다. 프로젝트에 자체 축이 있는 경우 이 속성은 작동하지 않습니다.

프로젝트 속성 설정

order: 항목의 순서를 정의하면 기본값이 높아집니다. 0입니다.

flex-grow: 항목의 확대 비율을 정의합니다. 기본값은 0입니다. 기본적으로 항목은 남은 공간이 있어도 확대되지 않습니다. 크기 조정 방향은 플렉스 방향의 방향입니다.

flex-shrink: 항목의 축소 비율을 정의합니다. 기본값은 1입니다. 공간이 부족하면 항목이 축소됩니다. 값이 0이면 크기 조정 방향이 flex-direction 방향입니다.

flex-basis: 초과 공간을 할당하기 전에 항목이 차지하는 주축 공간(기본 크기)을 정의합니다. 브라우저는 이 속성을 기반으로 주축에 초과 공간이 있는지 여부를 계산하지 않습니다. 기본값은 auto입니다. 항목의 원래 크기입니다. flex-basis: 80px; 너비(방향은 행) 80px로 설정됩니다.

flex: 위 세 가지 속성의 약어이며 기본값은 0 1 auto입니다. ) 및 없음( 0 0 자동)

align-self: 이 속성을 사용하면 지연된 항목을 다른 항목과 다르게 정렬하여 align-items의 속성 값을 재정의할 수 있습니다. 기본값은 auto입니다. 이는 상위 요소의 align-items 속성을 상속받거나 상위 요소가 없는 경우 확장을 의미합니다.

align-self: auto/flex-start/flex-end/center/baseline/stretch flex-basis: 값이 0일 때와 자동(기본값)일 때의 차이: 전자는 전체 항목을 계산하지 않지만 후자는 내용을 무시하므로 레이아웃에 각 항목의 백분율 구성이 필요한 경우 flex-basis를 0으로 설정해야 합니다.

관련 기사

HTML의 역할 : 웹 컨텐츠 구조Apr 11, 2025 am 12:12 AM

HTML의 역할은 태그 및 속성을 통해 웹 페이지의 구조와 내용을 정의하는 것입니다. 1. HTML은 읽기 쉽고 이해하기 쉽게하는 태그를 통해 컨텐츠를 구성합니다. 2. 접근성 및 SEO와 같은 시맨틱 태그 등을 사용하십시오. 3. HTML 코드를 최적화하면 웹 페이지로드 속도 및 사용자 경험이 향상 될 수 있습니다.

HTML 및 코드 : 용어를 자세히 살펴 봅니다Apr 10, 2025 am 09:28 AM

"Code"는 "Code"BroadlyIncludeLugageslikeJavaScriptandPyThonforFunctureS (htMlisAspecificTypeofCodeFocudecturecturingWebContent)

HTML, CSS 및 JavaScript : 웹 개발자를위한 필수 도구Apr 09, 2025 am 12:12 AM

HTML, CSS 및 JavaScript는 웹 개발의 세 가지 기둥입니다. 1. HTML은 웹 페이지 구조를 정의하고 등과 같은 태그를 사용합니다. 2. CSS는 색상, 글꼴 크기 등과 같은 선택기 및 속성을 사용하여 웹 페이지 스타일을 제어합니다.

HTML, CSS 및 JavaScript의 역할 : 핵심 책임Apr 08, 2025 pm 07:05 PM

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

HTML은 초보자를 위해 쉽게 배우나요?Apr 07, 2025 am 12:11 AM

HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.

HTML의 시작 태그의 예는 무엇입니까?Apr 06, 2025 am 12:04 AM

anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.