CSS3 유연한 레이아웃
CSS3의 Flex Elastic 레이아웃 기본 구문 소개:
이 장에서는 Flex Elastic 레이아웃의 기본 구문을 소개합니다. 레이아웃 유연성으로 인해 앞으로 널리 사용될 것입니다.
여기에서는 브라우저 호환성 문제에 집착하지 않고 기본 구문에 중점을 둡니다. 호환성 문제는 현재 기본적으로 해결될 수 있을 뿐만 아니라 향후 브라우저 버전이 개선되면 자연스럽게 해결될 것이기 때문입니다. 이제 요점을 살펴보겠습니다.
특별 참고 사항: 아래의 모든 그림은 다음 두 기사에서 가져온 것입니다.
(1) Flexbox에 대한 전체 안내서.
(2).CSS3 Flexbox 속성에 대한 시각적 가이드.
1. Flex Elastic 레이아웃이란:
Flex는 유연한 레이아웃을 의미하는 Flex Box의 약어입니다.
모든 컨테이너를 유연한 레이아웃, 즉 Flex 레이아웃으로 지정할 수 있습니다.
먼저 코드 예시를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<style type="text/css">
#box {
display:flex;
width:300px;
height:100px;
justify-content:space-between;
align-items:center;
background:#ccc;
}
#box span {
border-radius:50px;
background:green;
width:50px;
height:50px;
}
</style>
</head>
<body>
<div id="box">
<span></span>
<span></span>
</div>
</body>
</html>위 코드는 유연한 레이아웃을 사용한 간단한 예시입니다.
컨테이너를 유연한 레이아웃으로 설정하려면 다음 코드를 사용할 수 있습니다.
#box{
display: flex;
}
内联元素也可以设置为弹性布局，代码如下:
#box{
display: inline-flex;
} 2. 유연한 레이아웃의 개념:
Flex 레이아웃을 사용하는 요소를 Flex 컨테이너(Flex 컨테이너) 또는 줄여서 "컨테이너"라고 합니다.
컨테이너의 모든 하위 요소는 자동으로 "항목"이라고 하는 Flex 항목(플렉스 항목)이라고 하는 컨테이너의 구성원이 됩니다.
다이어그램은 다음과 같습니다.
다이어그램에 대한 간략한 소개는 다음과 같습니다.
(1) 주축: 확장 가능한 컨테이너의 주축은 주로 이 축을 따라 배열됩니다.
특별 참고 사항: 수평일 필요는 없으며 주로 "justify-content" 속성에 따라 달라집니다.
(2). 메인 스타트 및 메인 엔드: 텔레스코픽 프로젝트는 메인 스타트부터 메인 스타트까지 텔레스코픽 컨테이너에 배치됩니다.
(3). 주축 크기: 단일 항목이 차지하는 주축 공간을 주축 크기라고 합니다.
(4) 교차축: 주축에 수직인 것을 교차축이라고 합니다. 방향은 주로 주축 방향에 따라 달라집니다.
(5) 교차 시작 및 교차 끝: 텔레스코픽 열의 구성은 컨테이너의 교차 축 시작 가장자리에서 시작하여 교차 축 끝 가장자리에서 끝납니다.
(6). 교차 크기: 단일 항목이 차지하는 교차 축 공간을 교차 축 크기라고 합니다.
3.1.flex-direction 속성:
이 속성은 항목의 배열 방향인 주축의 방향을 결정합니다.
문법 구조:
#box {
flex-direction: row | row-reverse | column | column-reverse;
}도표는 다음과 같습니다.
속성 값 분석:
(1).row(기본값): 주축이 가로이고 시작점이 왼쪽 끝에 있습니다.
(2).row-reverse: 주축이 수평이고 시작점이 오른쪽 끝에 있습니다.
(3).column: 주축이 수직이고, 시작점이 위쪽 가장자리에 있습니다.
(4).column-reverse : 주축이 수직이고 시작점은 아래쪽 가장자리에 있습니다.
3.2 flex-wrap 속성:
기본적으로 항목은 한 줄("축")에 정렬됩니다.
flex-wrap 속성은 한 축이 맞지 않는 경우 선을 감싸는 방법을 정의합니다.
문법 구조:
#box{
flex-wrap: nowrap | wrap | wrap-reverse;
}다이어그램은 다음과 같습니다.
속성 값 분석:
(1) nowrap (기본값): 줄바꿈 없음.
(2) 감싸다 : 감싸다, 첫 번째 줄이 맨 위에 옵니다.
(3) Wrap-reverse : 줄 바꿈, 첫 번째 줄이 아래에 있습니다.
3.3 flex-flow 속성:
이 속성은 flex-direction 속성과 flex-wrap 속성의 약어입니다. 기본값은 row nowrap입니다.
구문 구조:
#box {
flex-flow: <flex-direction> || <flex-wrap>;
}3.4 justify-content 속성:
justify-content 속성은 주축의 항목 정렬을 정의합니다.
문법 구조:
#box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}다이어그램은 다음과 같습니다.
매개변수 분석:
5개의 값을 취할 수 있으며 구체적인 정렬은 축 방향과 관련이 있습니다. 다음은 주축이 왼쪽에서 오른쪽이라고 가정합니다.
(1).flex-start (기본값): 왼쪽 정렬
(2).flex-end: 오른쪽 정렬
(3).center: 가운데
(4).space-between: 양쪽 끝 정렬, 사이 항목 간격이 동일합니다.
(5).space-around: 각 항목의 양쪽 공간이 동일합니다. 따라서 항목 사이의 공간은 항목과 테두리 사이의 공간의 두 배입니다.
3.5 align-items 속성:
이 속성은 항목이 교차축에 정렬되는 방식을 정의합니다.
문법 구조:
#box {
align-items: flex-start | flex-end | center | baseline | stretch;
}다이어그램은 다음과 같습니다.
속성 값 분석:
5개의 값을 사용할 수 있습니다. 구체적인 정렬은 교차축의 방향과 관련됩니다. 아래에서는 교차축이 위에서 아래로 가정됩니다.
(1).flex-start: 교차축의 시작점을 정렬합니다.
(2).flex-end: 교차축의 끝점을 정렬합니다.
(3).center: 교차축의 중간점을 정렬합니다.
(4).baseline: 항목 텍스트의 첫 번째 줄의 기준선 정렬입니다.
(5) 늘이기(기본값): 항목이 높이를 설정하지 않거나 자동으로 설정된 경우 컨테이너의 전체 높이를 차지합니다.
3.6 align-content 속성:
이 속성은 여러 축의 정렬을 정의합니다. 프로젝트에 축이 하나만 있는 경우 이 속성은 효과가 없습니다.
문법 구조:
#box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}다이어그램은 다음과 같습니다.
속성값 분석:
(1).flex-start: 교차축의 시작점에 맞춰 정렬합니다.
(2).flex-end: 교차축의 끝점에 맞춰 정렬합니다.
(3).center: 교차축의 중간점에 맞춰 정렬됩니다.
(4).space-between: 교차축의 양쪽 끝을 정렬하고, 축 사이의 간격이 고르게 분포되도록 합니다.
(5).space-around: 각 축의 양쪽 간격이 동일합니다. 따라서 축 사이의 거리는 축과 프레임 사이의 거리의 두 배입니다.
(6).stretch(기본값): 축이 전체 교차 축을 차지합니다.
4.1 주문 속성:
이 속성은 항목의 순서를 정의합니다. 값이 작을수록 순위가 높아집니다. 기본값은 0입니다.
구문 구조:
.item {
order: <integer>;
}다이어그램은 다음과 같습니다.
4.2.flex-grow 속성:
이 속성은 항목의 확대 비율을 정의하며 기본값은 0입니다.
단, 남은 공간이 없으면 확대되지 않습니다.
구문 구조:
.item {
flex-grow: <number>; /* default 0 */
}그림은 다음과 같습니다.
모든 항목의 flex-grow 속성이 1인 경우 나머지 공간(있는 경우)을 균등하게 나눕니다.
4.3.flex-shrink 속성:
이 속성은 항목의 축소 비율을 정의하며 기본값은 1입니다. 즉, 공간이 부족하면 항목이 축소됩니다.
문법 구조:
.item {
flex-shrink: <number>; /* default 1 */
}도표는 다음과 같습니다.
모든 항목의 flex-shrink 속성이 1일 경우 공간이 부족할 경우 비례하여 모두 축소됩니다.
한 항목의 flex-shrink 속성이 0이고 다른 항목이 1인 경우 전자는 공간이 부족할 때 축소되지 않습니다.
4.4 flex-basis 속성:
이 속성은 초과 공간을 할당하기 전에 항목이 차지하는 주축 공간(기본 크기)을 정의합니다.
이 속성을 기반으로 브라우저는 주축에 추가 공간이 있는지 계산합니다. 기본값은 프로젝트의 원래 크기인 auto입니다.
구문 구조:
.item {
flex-basis: <length> | auto; /* default auto */
}4.5.flex 속성:
이 속성은 flex-grow, flex-shrink 및 flex-basis의 약어입니다. 기본값은 0 1 auto입니다. 마지막 두 속성은 선택 사항입니다.
구문 구조:
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}이 속성에는 자동(1 1 자동)과 없음(0 0 자동)이라는 두 가지 단축키 값이 있습니다.
4.6 align-self 속성:
이 속성을 사용하면 단일 항목이 다른 항목과 다른 정렬을 가질 수 있으며 align-items 속성을 재정의할 수 있습니다.
기본값은 auto이며, 이는 상위 요소의 align-items 속성을 상속함을 의미합니다. 상위 요소가 없으면 스트레치와 동일합니다.
문법 구조:
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}다이어그램은 다음과 같습니다.
이 속성은 6개의 값을 가질 수 있으며, 자동을 제외하고 나머지는 align-items 속성과 완전히 동일합니다.
다음 섹션