CSS3기본 튜토리얼

CSS3 에라스틱 박스 레이아웃

CSS3 flexible Box나 flexbox는 더 유연한 사용자 인터페이스 디자인을 생성하기 위한 새로운 레이아웃 모델입니다.

Flex 레이아웃 모델을 이해하다

Flexible box, 일반적으로 flexbox로 알려져 있습니다. 이는 CSS3CSS에 중引入된 새로운 레이아웃 모델로, 행과 열을 가진 유연한 사용자 인터페이스 디자인을 생성할 수 있습니다. 이는 퍼센트나 고정 길이 값을 사용하지 않습니다.3 flex 레이아웃 모델은 간단하고 강력한 메커니즘을 제공하여 스타일 시트를 통해 공간 배치와 내용 정렬을 자동으로 처리할 수 있으며, 실제 마크업을 방해하지 않습니다.

이 예제는 flex 레이아웃 모델을 사용하여 세 개의 열을 가진 레이아웃을 생성하는 방법을 설명합니다. 각 열의 너비와 높이는 모두 같습니다.

예제

<!DOCTYPE　html>
<html　lang="en">

<head>-8">
<meta charset="utf3　">/<title>CSS
Three　Equal　Flex　Column<
　　　　.flex-container　{
　　　　　　　　width:　80%;
　　　　　　　　min-height:　300px;
　　　　　　　　display:　-webkit-flex;　/*　Safari　*/　　　　　
　　　　　　　　display:　flex;　
　　　　　　　　border:　1px　solid　#80808title>
　　　　}
　　　　.flex-container div {
　　　　　　　　background:　#dbdfe5;
　　　　　　　　-webkit-flex:　1;　/*　Safari　*/
　　　　　　　　-<style>-flex:　1;　/*　0;　10　*/
　　　　　　　　flex:　1;　
　　　　}
head>Item/ms
head>Item/IE　1style>　2style>　3head>Item/Item

테스트를 보세요‹/›

<-html>위의 예제 코드를 주의 깊게 살펴보면, .flex에 대해 우리가 설정하지 않았다는 것을 발견할 수 있습니다.컨테이너의 내부-<div>

컨테이너의 셋트의 일분의 삼분之二로 지정할 수 있습니다. 출력에서 볼 수 있듯이, 각 열의 너비는 부모 요소의 flex와 정확히 일치합니다.

Flex 레이아웃이 어떻게 작동하는지Flexbox는 Flex 컨테이너와 Flex 항목으로 구성되어 있습니다. Flex 컨테이너를 Flex 항목으로 변환하여display요소의 속성을 flex(유사한 Flex 컨테이너)로 설정하여 block-flex(유사한 Flex 컨테이너) 또는 inlineinline-block의 인라인 Flex 컨테이너)를 사용하여 Flex 컨테이너를 생성합니다. Flex 컨테이너의 모든 자식 요소는 자동으로 Flex 항목이되며, Flex 레이아웃 모델을 사용하여 레이아웃됩니다.float，clear과vertical-align확장 성질을 가진 항목에 영향을 미치지 않습니다.

확장 항목은 이를 따릅니다flex-direction속성이 지정한 확장선은 확장 컨테이너 내에 위치합니다. 기본적으로 각 flex 컨테이너는 하나의 확장선만 가지며, 이는 현재 글쓰기 모드의 인라인 축이나글쓰기 방향과 동일다음 그림은 Flex 레이아웃 용어를 이해하는 데 도움이 될 것입니다.

Flex 컨테이너 내의 스트림을 지정

표준 CSS 브렉스 모델에서, 요소는 일반적으로 루트 HTML 표시에서 등장하는 순서로 표시됩니다. Flex 레이아웃은 Flex 컨테이너 내의 스트림 방향을 제어할 수 있으며, 이를 통해 요소가 왼쪽, 오른쪽, 아래, 심지어 위 방향으로 어떤 스트림 방향으로든 레이아웃할 수 있습니다.

사용할 수 있습니다flex-direction속성은 flex 컨테이너 내의 flex 항목 스트림을 지정합니다. 이 속성의 기본 값 row는 문서의 현재 글쓰기 모드나 텍스트 방향과 동일합니다. 예를 들어, 영어는 왼쪽에서 오른쪽으로.

예제

.flex-container　{
　　　　width:　80%;
　　　　min-height:　300px;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-flex-direction: row-reverse;
　　　　
　　　　display:　flex;
　　　　flex-direction: row-reverse;
　　　　border:　1px　solid　#666;
}

테스트를 보세요‹/›

또한, 활성 컨테이너 내에서 열 형태로 활성 항목을 표시할 수 있습니다. 이는 flex를 사용하지 않고도 가능합니다-direction 속성의 값은 열 행을 나타냅니다. 다음과 같이 보입니다:

예제

.flex-container　{
　　　　width:　80%;
　　　　min-height:　300px;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-flex-direction: column;
　　　　
　　　　display:　flex;
　　　　flex-direction: column;
}

테스트를 보세요‹/›

활성 항목의 크기를 제어하

활성 레이아웃의 가장 중요한 측면은 활성 프로젝트가 사용 가능한 공간을 채우기 위해 너비나 높이를 변경할 수 있는 능력입니다. 이는 다음과 같이flex속성을 통해 구현된 것입니다. 이는 요약 속성입니다flex-성장，flex-축소또는flex-기본속성.

활성 컨테이너는 사용 가능한 공간을 활성 성장 인자와 비례하여 프로젝트에 분배하거나, 부과되는 경화 수축 계수와 비례하여 축소하여 부과되는 경화를 방지합니다.

예제

.flex-container　{
　　　　width:　80%;
　　　　min-height:　300px;
　　　　display:　-webkit-flex;　/*　Safari　*/　　　　　
　　　　display:　flex;　
}
.flex-container div {
　　　　padding:　10px;
　　　　background:　#dbdfe5;
}
.item1,　.item3　{
　　　　-webkit-flex:　1;　/*　Safari　*/
　　　　flex:　1;　
}
.item2　{
　　　　-webkit-flex:　2;　/*　Safari　*/
　　　　flex:　2;　
}

테스트를 보세요‹/›

위의 예제에서 첫 번째와 세 번째 유연한 요소는1/4즉1/(1+1+2)의 자유 공간, 두 번째 유연한 요소는1/2즉2/(1+1+2의 자유 공간. 비슷하게, 이 간단한 기술을 사용하여 다른 유연한 레이아웃을 생성할 수 있습니다.

주의:숏cuts 속성을 사용하는 것이 강력히 권장됩니다. 단일 flex 속성보다, 그것은 미지정된 구성 요소를 올바르게 재설정할 수 있습니다.

Flex 컨테이너 내에서 Flex 요소를 정렬합니다

이 네 가지 속성이 있습니다justify-content，align-content，align-items과align-self의 목적은 유연한 컨테이너 내의 유연한 요소의 정렬을 지정하는 것입니다.前三자는 유연한 컨테이너에 적용되며, 마지막자는 단일 유연한 요소에 적용됩니다.

주 축에 Flex 요소를 정렬합니다

를 사용하여-content 속성은 유연한 요소를 유연한 컨테이너의 주 축(즉, 수평 방향)에 정렬할 수 있습니다. 일반적으로 유연한 요소가 주 축의 모든 사용 가능한 공간을 사용하지 않을 때 사용됩니다.

justify-content 속성은 다음 값을 받습니다:

flex-start-기본 값. 유연한 요소는 주 축의 시작점에 배치됩니다.
flex-end -Flex 요소는 주 축의 끝에 위치합니다.
center　　- Flex 요소는 주 축의 중앙에 배치되며, 양 끝에 동일한 자유 공간이 있습니다. 남은 자유 공간이 음수인 경우, 즉 프로젝트가 부족하다면, 유연한 요소는 두 방향에서 모두 일정하게 부족하게 됩니다.
space-between　-의 Flex 요소는 주 축에沿着 주 축(첫 번째 요소가 주 시작에 배치되고 마지막 요소가 주 끝에 배치됨)을 평균적으로 분포됩니다. 요소가 부족하거나 하나의 요소만 있을 경우, 이 값은 flex와 같습니다.-start를 보여드리겠습니다.
space-around　-Flex 요소는 양 끝에 반 크기의 공간으로 균일하게 분포됩니다. 그들이 부족하거나 하나의 요소만 있을 경우, 이 값은 center와 같습니다.

아래의 예제는 다양한 justify-content 속성 값이 고정된 너비의 다중 열 Flex 컨테이너에 미치는 영향을 보여줍니다.

예제

.flex-container　{
　　　　width:　500px;
　　　　min-height:　300px;
　　　　border:　1px　solid　#666;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-justify-content: space-around;
　　　　
　　　　display:　flex;
　　　　justify-content: space-around;
}
.item1　{
　　　　width:　75px;
　　　　background: #e84d51;
}
.item2　{
　　　　width:　125px;
　　　　background: #7ed636;
}
.item3　{
　　　　width:　175px;
　　　　background: #2f97ff;
}

테스트를 보세요‹/›

가로 축에 Flex 요소를 정렬합니다

을 사용할 수 있습니다-items 또는 align-self 속성은 Flex 컨테이너의 가로 축(즉, 수직 방향)에 Flex 요소를 정렬합니다. 그러나 align-items 속성이 Flex 컨테이너에 적용될 때, 이 align-self 속성은 단일 Flex 요소에 적용되며 align 속성을 대체합니다.-요소. 이 두 가지 속성은 다음 값을 받습니다:

flex-start — Flex 요소가 교차 축의 시작점에 위치합니다.
flex-end — Flex 요소가 교차 축의 끝에 위치합니다.
center　— 유연한 요소가 가로 축의 중앙에 배치되며, 양 끝에 동일한 사용 가능한 공간이 있습니다. 남은 자유 공간이 음수인 경우, 즉 프로젝트가 부족하다면, 유연한 요소는 두 방향에서 모두 일정하게 부족하게 됩니다.
baseline　— 각 유연한 프로젝트의 텍스트 기준(또는 내부 축)이 가장 큰 유연한 프로젝트의 기준선과 일치합니다.font-size.
Stretch —확장 항목은 최소 및 최대 너비 또는 높이에 의해 차단되지 않는 한, 현재 행이나 열을 채우기 위해 확장됩니다.-items 속성의 기본 값.

다음 예제에서는 다른 align-items 속성 값이 고정된 높이를 가진 다중 열 플렉스 컨테이너에 미치는 영향.

예제

.flex-container　{
　　　　width:　500px;
　　　　min-height:　300px;
　　　　border:　1px　solid　#666;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-align-items: center;
　　　　
　　　　display:　flex;
　　　　align-items: center;
}
.item1　{
　　　　width:　75px;
　　　　height:　100px;
　　　　background: #e84d51;
}
.item2　{
　　　　width:　125px;
　　　　height:　200px;
　　　　background: #7ed636;
}
.item3　{
　　　　width:　175px;
　　　　height:　150px;
　　　　background: #2f97ff;
}

테스트를 보세요‹/›

또한 다중 행이나 열 플렉스 컨테이너의 가로 축에 가용 공간을 분배할 수 있습니다. 이 속성은 align입니다-content는 플렉스 컨테이너의 행을 정렬하는 데 사용됩니다. 예를 들어, 가로 축에 남은 공간이 많다면, 다중 행 플렉스 컨테이너의 행을 justify로 정렬할 수 있습니다.-content 정렬은 단일 항목을 주축에 정렬하는 것과 유사합니다.

align-content 속성은 justify와 같은 값을 받아들입니다.-content가 적용되지만, 주축 대신 가로 축에 적용됩니다. 또한 다른 값을 받아들입니다:

Stretch가용 공간이 모든 행이나 열 간에 평균적으로 배분되어, 교차 크기를 증가시킵니다. 남은 자유 공간이 음수인 경우, 이 값은 flex에 동일합니다.-start를 보여드리겠습니다.

다음 예제에서는 다른 align-content 속성 값이 고정된 높이를 가진 다중 행 플렉스 컨테이너에 미치는 영향.

예제

.flex-container　{
　　　　width:　500px;
　　　　min-height:　300px;
　　　　margin: 0 auto;
　　　　font-size:　32px;
　　　　border:　1px　solid　#666;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-flex-flow: row wrap;
　　　　-webkit-align-content: space-around;
　　　　
　　　　display:　flex;
　　　　flex-flow: row wrap;
　　　　align-content: space-around;
}
.flex-container div {
　　　　width:　150px;
　　　　height:　100px;
　　　　background:　#dbdfe5;
}

테스트를 보세요‹/›

각 플렉스 항목을 재정렬할 수 있습니다.

플렉스 컨테이너 내의 흐름을 변경하는 것 외에도, 다음을 사용하여orderorder 속성은 단일 플렉스 항목의 순서를 표시합니다. 이 속성은 정수 또는 부수를 값으로 받아들입니다. 기본적으로 모든 플렉스 항목은 HTML 태그에서 나타난 순서로 표시되고 배치됩니다. 이는 order 기본 값이 0인 때문입니다.

다음 예제에서는 단일 플렉스 항목의 순서를 지정하는 방법을 보여드리겠습니다.

예제

.flex-container　{
　　　　width:　500px;
　　　　min-height:　300px;
　　　　border:　1px　solid　#666;
　　　　display:　-webkit-flex;　/*　Safari　6.1+　*/
　　　　display:　flex;
}
.flex-container div {
　　　　padding:　10px;
　　　　width:　130px;
}
.item1　{
　　　　background: #e84d51;
　　　　-webkit-order:　2;　/*　Safari　6.1+　*/
　　　　order:　2;
}
.item2　{
　　　　background: #7ed636;
　　　　-webkit-order:　1;　/*　Safari　6.1+　*/
　　　　order:　1;
}
.item3　{
　　　　background: #2f97ff;
　　　　-webkit-order:　-1;　/*　Safari　6.1+　*/
　　　　order:　-1;
}

테스트를 보세요‹/›

주의:가장 낮은 등급 값의 항목이 앞에 배치되고, 가장 높은 등급 값의 항목이 마지막에 배치됩니다. 같은 order 값의 항목은 원본 문서에서 나타난 순서로 표시됩니다.

flexbox의 수평 및 수직 중앙 정렬

일반적으로, 콘텐츠 블록의 수직 정렬은 JavaScript나 간단한 CSS 기술을 사용합니다. 그러나 flexbox를 사용하면 이 작업을 쉽게 수행할 수 있으며, 어떤 조정도 필요 없습니다.

다음 예제에서는 CSS를 사용하는 방법을 보여드리겠습니다.3flexbox 기능이 중앙에 콘텐츠 블록을 수직 및 수평으로 정렬하는 것이 쉽습니다.

예제

.flex-container　{
　　　　width:　500px;
　　　　min-height:　300px;
　　　　border:　1px　solid　#666;
　　　　display:　-webkit-flex;　/*　Safari　6.1+　*/
　　　　display:　flex;　
}
.item {
　　　　width:　300px;
　　　　padding:　25px;
　　　　margin: auto;
　　　　background: #f0e68c;
}

테스트를 보세요‹/›

弹性项目换行启用

기본적으로, 유연한 컨테이너는 유연한 항목의 단일 행이나 단일 열을 표시합니다. 하지만flex-wrap확장선에 충분한 공간이 없으면, flex 컨테이너의 속성을 사용하여 확장 항목이 다수의 행으로 바뀔지 여부를 지정할 수 있습니다.

이 flex-wrap 속성은 다음과 같은 값을 받아듭니다:

nowrap-기본 값. 확장 항목은 한 행에 배치됩니다. 확장선에 충분한 공간이 없으면 부유할 수 있습니다.
wrap — flex 컨테이너는 flex 항목을 다수의 행으로 분해하여, 현재 행에 맞지 않는 텍스트가 새 행으로 분해되는 것과 유사하게 합니다.
wrap-reverse — 필요할 때마다 줄을 바꿀 수 있으며, 순서는 반대로, 즉,교차 시작점(cross-start)과교차 끝점(cross-end)방향이 교환됩니다.

다음 예제는 flex를 사용하는 방법을 보여줍니다.-wrap 속성은 flex 컨테이너에서 일행 또는 다수의 행에 flex 항목을 표시합니다.

예제

.flex-container　{
　　　　width:　500px;
　　　　min-height:　300px;
　　　　border:　1px　solid　#666;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-flex-wrap:　wrap;
　　　　
　　　　display:　flex;
　　　　flex-wrap:　wrap;　　
}
.flex-container　div{
　　　　width:　130px;
　　　　padding:　10px;　　　　
　　　　background:　#dbdfe5;
}

테스트를 보세요‹/›

주의:단일 선언에서 간단한 CSS 속성을 사용할 수도 있습니다.flex-flowflex 설정-direction과 flex-wrap. 각 속성과 같은 값을 받아들이며, 값은 어떤 순서든 가능합니다.

CSS3 필터(Filters)CSS3 상자 크기(box-sizing)