최신 웹 개발 튜토리얼
 

CSS3 Flexible Box

❮ 이전 다음 장 ❯

CSS3 Flexbox

유연한 상자 또는 flexbox , CSS3의 새로운 레이아웃 모드입니다.

사용 flexbox 페이지 레이아웃이 다른 화면 크기와 다른 표시 장치를 수용해야하는 경우 요소 동작 예측 것을 보장한다.

많은 애플리케이션의 경우,가요 박스 모델은 플로트를 사용하여도 그 내용의 여백 플렉스 컨테이너의 가장자리 붕괴하지 않는다는 점에서 블록 모델에 비해 개선을 제공한다.

브라우저 지원

테이블의 숫자는 완전히 기능을 지원하는 최초의 브라우저 버전을 지정합니다.

숫자는 다음 -webkit- 또는 -moz- 접두사와 함께 일 첫 번째 버전을 지정합니다.

재산
Basic support
(single-line flexbox)		 29.0
21.0 -webkit-		 11.0 22.0
18.0 -moz-		 6.1 -webkit- 12.1 -webkit-
Multi-line flexbox 29.0
21.0 -webkit-		 11.0 28.0 6.1 -webkit- 17.0
15.0 -webkit-
12.1

CSS3 Flexbox 개념

Flexbox 플렉스 컨테이너 및 플렉스 항목으로 구성되어 있습니다.

가요 성 용기는 설정에 의해 선언 된 display 중 하나에 요소의 속성을 flex (블록으로 렌더링) 또는 inline-flex (인라인으로 렌더링).

플렉스 컨테이너 내부에서 하나 이상의 플렉스 항목이 있습니다.

참고 : 플렉스 컨테이너 외부 플렉스 항목 안에 모든 것이 평소와 같이 렌더링됩니다. 인 flexbox는 플렉스 컨테이너 내부에 배치하는 방법 플렉스 항목을 정의합니다.

플렉스 항목은 플렉스 라인을 따라 플렉스 컨테이너 내부에 위치한다. 기본적으로 플렉스 컨테이너 당 하나의 플렉스 라인이있다.

다음의 예는 세 플렉스 항목을 보여줍니다. 그들은 기본적으로 위치 : 수평 플렉스 라인을 따라 왼쪽에서 오른쪽으로 :

예

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
</div>

</body>
</html>

»그것을 자신을 시도

플렉스 라인의 방향을 변경하는 것도 가능하다.

우리가 설정 한 경우 direction 에 등록 rtl (오른쪽에서 왼쪽), 텍스트가 오른쪽에 그려진 왼쪽, 또한 플렉스 라인은 페이지 레이아웃을 변경됩니다 방향이 변경된다

예

body {
    direction: rtl;
}

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}

»그것을 자신을 시도

플렉스 방향

flex-direction 속성은 플렉스 컨테이너 내부의 유연한 항목의 방향을 지정합니다. 기본값 flex-direction 인 row (왼쪽에서 오른쪽으로, 위에서 아래로).

다음과 같이 다른 값은 다음과 같습니다

  • row-reverse - 기록 모드 (방향)이 좌우되는 경우,가요 성 항목은 오른쪽에서 왼쪽으로 뻗어 될
  • column - 기록 시스템이 수평 인 경우,가요 성 항목은 수직으로 배치 될
  • column-reverse - 컬럼과 동일하지만, 반전

다음은 사용의 결과 표시 row-reverse 값 :

예

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

»그것을 자신을 시도

다음은 사용의 결과 도시 column 값 :

예

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

»그것을 자신을 시도

다음은 사용의 결과 표시 column-reverse 값 :

예

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

»그것을 자신을 시도

정당화 콘텐츠 속성

justify-content 항목이 주 축에 사용 가능한 모든 공간을 사용하지 않는 경우 속성은 수평으로 유연한 컨테이너의 항목을 정렬합니다.

가능한 값은 다음과 같습니다

  • flex-start - 기본 값입니다. 항목이 컨테이너의 시작 부분에 위치한다
  • flex-end - 항목은 상기 용기의 단부에 위치
  • center - 항목이 컨테이너의 중앙에 위치
  • space-between - 항목은 라인 사이의 공간에 위치
  • space-around - 항목 사이에, 전 공간 위치 및 선 후된다

다음은 사용의 결과 표시 flex-end 값 :

예

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

»그것을 자신을 시도

다음은 사용의 결과 도시 center 값 :

예

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

»그것을 자신을 시도

다음은 사용의 결과 표시 space-between 값 :

예

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

»그것을 자신을 시도

다음은 사용의 결과 표시 space-around 값 :

예

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

»그것을 자신을 시도

정렬-항목 속성

align-items 항목이 교차 축에 사용 가능한 모든 공간을 사용하지 않는 경우 속성은 수직으로 유연 컨테이너의 항목을 정렬합니다.

가능한 값은 다음과 같습니다

  • stretch - 기본 값입니다. 항목은 용기에 맞도록 신장된다
  • flex-start - 항목은 용기의 상단에 위치
  • flex-end - 항목은 용기의 바닥에 위치
  • center - 항목이 컨테이너의 중앙에 위치 (수직)
  • baseline - 항목은 용기의베이스에 위치

다음은 사용의 결과 표시 stretch 값 (디폴트 값이다)

예

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: stretch;
    align-items: stretch;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

»그것을 자신을 시도

다음은 사용의 결과 표시 flex-start 값 :

예

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

»그것을 자신을 시도

다음은 사용의 결과 표시 flex-end 값 :

예

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

»그것을 자신을 시도

다음은 사용의 결과 도시 center 값 :

예

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

»그것을 자신을 시도

다음은 사용의 결과 표시 baseline 값 :

예

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: baseline;
    align-items: baseline;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

»그것을 자신을 시도

플렉스 랩 속성

flex-wrap 속성은 하나의 플렉스 라인에 그들을위한 충분한 공간이없는 경우 플렉스 항목, 포장 여부를할지 여부를 지정합니다.

가능한 값은 다음과 같습니다

  • nowrap - 기본 값입니다. 유연한 항목은 포장하지 않습니다
  • wrap - 필요한 경우 유연한 항목을 포장한다
  • wrap-reverse - 필요한 경우 유연한 항목은 역순으로, 포장한다

다음은 사용의 결과 표시 nowrap 값 (디폴트 값이다)

예

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 300px;
    height: 250px;
    background-color: lightgrey;
}

»그것을 자신을 시도

다음은 사용의 결과 표시 wrap 값 :

예

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 300px;
    height: 250px;
    background-color: lightgrey;
}

»그것을 자신을 시도

다음은 사용의 결과 표시 wrap-reverse 값 :

예

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
    width: 300px;
    height: 250px;
    background-color: lightgrey;
}

»그것을 자신을 시도

정렬 콘텐츠 속성

align-content 속성의 동작 수정 flex-wrap 속성을. 유사하다 align-items , 대신 플렉스 항목을 정렬, 그것은 플렉스 라인을 정렬합니다.

가능한 값은 다음과 같습니다

  • stretch - 기본 값입니다. 선은 나머지 공간을 차지하기 위해 스트레칭
  • flex-start - 라인 플렉스 용기 스타트 향해 포장
  • flex-end - 라인 플렉스 용기의 단부를 향해 포장
  • center - 라인 플렉스 용기의 중심을 향해 포장
  • space-between - 라인 균등 플렉스 컨테이너에 배포됩니다
  • space-around - 라인 균등하게 양쪽 끝에서 절반 크기의 공간으로, 플렉스 컨테이너에 배포됩니다

다음은 사용의 결과 도시 center 값 :

예

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
    width: 300px;
    height: 300px;
    background-color: lightgrey;
}

»그것을 자신을 시도

플렉스 상품 등록

주문

order 속성은 동일한 용기 내부가요 나머지 항목 유연한 상품 상대적인 순서를 지정

예

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}

.first {
    -webkit-order: -1;
    order: -1;
}

»그것을 자신을 시도

여유

설정 margin: auto; 여분의 공간을 흡수합니다. 다른 위치에 플렉스 항목을 푸시 할 수있다.

다음 예에서 우리는 설정 margin-right: auto; 첫 번째 플렉스 항목. 이것은 모든 여분의 공간은 그 요소의 오른쪽에 흡착되게된다 :

예

.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: 10px;
}

.flex-item:first-child {
    margin-right: auto;
}

»그것을 자신을 시도

완벽한 센터링

완벽한 센터링 : 다음 예에서 우리는 거의 매일 문제를 해결합니다.

그것은 인 flexbox 매우 간단합니다. 설정 margin: auto; 완벽하게 두 축의 중심 항목을 만들 것입니다 :

예

.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: auto;
}

»그것을 자신을 시도

정렬 - 자기

align-self 플렉스 항목의 속성은 해당 항목의 플렉스 컨테이너의 정렬 - 항목 속성을 무시합니다. 그것은 같은 가능한 값이 align-items 속성을.

다음 예는 각 플렉스 항목에 대한 다른 정렬 - 자기 값을 설정합니다 :

예

.flex-item {
    background-color: cornflowerblue;
    width: 60px;
    min-height: 100px;
    margin: 10px;
}

.item1 {
    -webkit-align-self: flex-start;
    align-self: flex-start;
}
.item2 {
    -webkit-align-self: flex-end;
    align-self: flex-end;
}

.item3 {
    -webkit-align-self: center;
    align-self: center;
}

.item4 {
    -webkit-align-self: baseline;
    align-self: baseline;
}

.item5 {
    -webkit-align-self: stretch;
    align-self: stretch;
}

»그것을 자신을 시도

굽힘

flex 속성은 동일한 용기 내부 플렉스 나머지 항목에 대해 플렉스 항목의 길이를 지정한다.

다음 예에서, 제 플렉스 항목은 여유 공간의 2/4을 소비하며, 다른 두 플렉스 항목은 각각 자유 공간의 1/4을 소비한다 :

예

.flex-item {
    background-color: cornflowerblue;
    margin: 10px;
}

.item1 {
    -webkit-flex: 2;
    flex: 2;
}

.item2 {
    -webkit-flex: 1;
    flex: 1;
}

.item3 {
    -webkit-flex: 1;
    flex: 1;
}

»그것을 자신을 시도

예

더 예

인 flexbox와 반응 웹 사이트 만들기
이 예는 인 flexbox와 반응 웹 사이트 레이아웃을 만드는 방법을 보여줍니다.

CSS3 인 flexbox 등록

다음 표는 인 flexbox에 사용되는 CSS 속성을 나열합니다 :

Property Description
display Specifies the type of box used for an HTML element
flex-direction Specifies the direction of the flexible items inside a flex container
justify-content Horizontally aligns the flex items when the items do not use all available space on the main-axis
align-items Vertically aligns the flex items when the items do not use all available space on the cross-axis
flex-wrap Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line
align-content Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines
flex-flow A shorthand propert for flex-direction and flex-wrap
order Specifies the order of a flexible item relative to the rest of the flex items inside the same container
align-self Used on flex items. Overrides the container's align-items property
flex Specifies the length of a flex item, relative to the rest of the flex items inside the same container

❮ 이전 다음 장 ❯