CSS3 유연한 상자

CSS3 Flex Box

Flex Box는 CSS3의 새로운 레이아웃 모드입니다.

CSS3 유연한 상자(Flexible Box 또는 Flexbox)는 페이지가 다양한 화면 크기와 장치 유형에 적응해야 할 때 요소가 적절한 동작을 갖도록 보장하는 레이아웃 방법입니다.

Flexbox 레이아웃 모델을 도입하는 목적은 컨테이너의 하위 요소에 빈 공간을 배열, 정렬 및 할당하는 보다 효율적인 방법을 제공하는 것입니다.

CSS3 유연한 상자 콘텐츠

Flexible 상자는 Flex 컨테이너와 Flex 항목으로 구성됩니다.

플렉서블 컨테이너는 디스플레이 속성 값을 flex 또는 inline-flex로 설정하여 플렉서블 컨테이너로 정의됩니다.

유연한 컨테이너에는 하나 이상의 유연한 하위 요소가 포함되어 있습니다.

참고: 유연한 컨테이너 외부와 유연한 하위 요소 내에서는 정상적으로 렌더링됩니다. 플렉스 박스는 플렉스 하위 요소가 플렉스 컨테이너 내에 배치되는 방식만 정의합니다.

Flexible 하위 요소는 일반적으로 Flexbox 내 한 행에 표시됩니다. 기본적으로 컨테이너당 하나의 행만 있습니다.

다음 요소는 왼쪽에서 오른쪽으로 연속으로 표시되는 탄력적 하위 요소를 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<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>

프로그램을 실행하여 사용해 보세요

물론 배열을 수정할 수 있습니다.

방향 속성을 rtl(오른쪽에서 왼쪽)으로 설정하면 탄력적 하위 요소의 배열도 변경되고 페이지 레이아웃도 변경됩니다.

예

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
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;
}
</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>

사용해 보세요

flex-direction

flex-direction order는 상위 컨테이너에서 유연한 하위 요소의 위치를 지정합니다.

문법

flex-direction: 행 | 행 역방향 | 열 | 열 역방향

flex-direction 값은 다음과 같습니다.

row: 왼쪽에서 오른쪽으로 정렬(왼쪽 정렬) .
row-reverse: 역방향 가로 배열(오른쪽 정렬, 뒤에서 앞으로, 마지막 항목이 맨 앞으로.
column: 세로 배열.
column-reverse: 역방향 세로 배열, 뒤에서 앞으로

다음 예에서는 행 역방향 사용을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
    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>

프로그램을 실행하여 사용해 보세요.

다음 예에서는 열 사용을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    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>

. 프로그램을 실행하고 사용해 보세요

다음 예에서는 열 역방향 사용을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
    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>

프로그램을 실행하고 사용해 보세요

justify-content 속성

콘텐츠 정렬(justify-content) 속성은 elastic에 적용됩니다. 컨테이너에서 flex 컨테이너의 기본 축을 따라 flex 항목을 정렬합니다.

justify-content 구문은 다음과 같습니다.

justify-content: flex-start | | space-between | space- around

각 값 분석:

flex-start:
Flex 항목은 줄의 머리 부분에 채워집니다. 이는 기본 시작 여백입니다. 첫 번째 플렉스 항목은 줄의 시작 부분에 배치되고 후속 플렉스 항목은 순서대로 배치됩니다.
flex-end:
첫 번째 플렉스 항목의 메인 끝 여백 가장자리는 다음과 같습니다. 행의 끝 부분 옆에 배치되고 후속 플렉스 항목은 서로 같은 높이로 배치됩니다.
center:
플렉스 항목은 서로 옆에 중앙에 배치됩니다(나머지 항목이 있는 경우). 여유 공간이 음수인 경우 플렉스 항목이 양방향으로 채워집니다.
space-between:
남은 공간이 음수이거나 남은 공간이 있는 경우 플렉스 항목이 균등하게 배포됩니다. flex 항목이 하나인 경우 이 값은 flex-start와 동일합니다. 첫 번째 flex 항목의 여백은 행의 기본 시작 가장자리에 정렬되고 마지막 flex 항목의 여백은 flex-start의 기본 끝 가장자리에 정렬됩니다. 그런 다음 나머지 플렉스 항목은 인접한 항목 사이에 동일한 간격으로 배포됩니다.
공간 주위: 플렉스 항목이 줄에 고르게 분포되어 양쪽에 공간의 절반이 남습니다. 남은 공간이 음수이거나 플렉스 항목이 하나만 있는 경우 이 값은 center와 동일합니다. 그렇지 않은 경우 Flex 항목은 서로 동일한 간격(예: 20px)으로 행을 따라 배포되고 첫 번째 측면과 마지막 측면과 Flex 컨테이너 사이에 절반의 공간을 남겨 둡니다(1/2*20px=10px).

렌더링 디스플레이:

다음 예에서는 flex-end 사용을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    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>

프로그램을 실행하여 사용해 보세요

다음 예에서는 center 사용을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    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>

프로그램 실행해 보세요

다음 예에서는 공백 사용을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    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>

프로그램을 실행하고 사용해 보세요

다음 예제에서는 공백 사용을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    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>

프로그램을 실행하고 시도해 보세요

align-items

align-items 속성은 플렉스 박스 요소의 교차축(세로축) 방향 정렬을 설정하거나 검색합니다.

Syntax

align-items: flex-start | flex-end | center | 기준선 | Stretch )의 시작 위치 경계는 행의 교차 축 시작 경계에 바로 인접합니다.

flex-end: 플렉스박스 요소의 교차축(세로축) 시작 위치의 경계가 행의 교차축 끝 경계에 가깝습니다.

center: Flexbox 요소는 행의 교차축(세로축) 중앙에 위치합니다. (행의 크기가 Flexbox 요소의 크기보다 작으면 양방향으로 동일한 길이로 오버플로됩니다.)
baseline: 플렉스 박스 요소의 인라인 축과 측면 축이 동일한 경우 이 값은 'flex-start'와 동일합니다. 그렇지 않으면 이 값이 기준선 정렬에 참여하게 됩니다.
stretch: 교차 축 크기를 지정하는 속성 값이 'auto'인 경우 해당 값은 항목의 여백 상자 크기를 행 크기에 최대한 가깝게 만들지만 동시에 '최소/최대 너비/높이' 속성을 준수합니다.

다음 예에서는 스트레치(기본값) 사용을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: stretch;
    align-items: stretch;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 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>

프로그램을 실행하고 사용해 보세요

다음 예는 flex-start 사용을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 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>

프로그램을 실행하고 사용해 보세요

다음 예는 flex-end 사용을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 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>

프로그램을 실행하고 사용해 보세요

다음 예에서는 center 사용을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 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>

프로그램을 실행하고 사용해 보세요

다음 예에서는 기준선 사용을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: baseline;
    align-items: baseline;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 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>

프로그램을 실행하고 사용해 보세요

flex-wrap 속성

flex-wrap 속성은 플렉스 박스 줄 바꿈 모드의 하위 요소를 지정하는 데 사용됩니다.

Syntax

flex-flow: ||

각 값 분석:

nowrap - 기본적으로 Flex 컨테이너는 한 줄입니다. 이 경우 플렉스 아이템이 컨테이너를 넘칠 수 있습니다.
wrap - Flex 컨테이너는 여러 줄로 구성됩니다. 이 경우 신축성 있는 자식의 넘친 부분이 새 줄에 배치되고 자식 내부에서 줄 바꿈이 발생합니다.
wrap-reverse - 줄 바꿈 배열을 반대로 합니다.

다음 예에서는 nowrap 사용을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 300px;
    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>

프로그램을 실행하고 사용해 보세요

다음 예에서는 Wrap 사용을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 300px;
    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>

프로그램을 실행하고 사용해 보세요

다음 예제에서는 Wrap-reverse 사용을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
    width: 300px;
    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>

프로그램을 실행하고 사용해 보세요

align-content 속성

align-content 속성은 flex-wrap 속성의 동작을 수정하는 데 사용됩니다. align-items와 유사하지만 flex 하위 요소의 정렬을 설정하는 대신 개별 행의 정렬을 설정합니다.

문법

align-content: 플렉스 시작 | 플렉스 끝 | 공백 사이 스트레치 | 나머지 공간을 차지하도록 행이 늘어납니다.

flex-start - 각 행은 Flex 컨테이너의 시작 위치를 향해 쌓입니다.

flex-end - 플렉스 컨테이너의 끝을 향해 행이 쌓입니다.
center - 각 행은 Flexbox 컨테이너의 중앙을 향해 쌓입니다.
space-between - Flexbox 컨테이너에 행이 고르게 분포됩니다.
space-around - 각 행은 Flexbox 컨테이너에 고르게 분산되어 양쪽 끝의 하위 요소 사이에 절반의 공간을 남겨 둡니다.

다음 예에서는 center의 사용을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.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;
}
.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>

순서:

분석 각 값:

<integer>: 정수 값을 사용하여 정렬 순서를 정의합니다. 작은 값이 먼저 나열됩니다. 부정적일 수 있습니다.

order 속성은 탄력적 컨테이너에 있는 탄력적 하위 요소의 속성을 설정합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<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;
}
.first {
    -webkit-order: -1;
    order: -1;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item first">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>
</body>
</html>

다음 예제에서는 첫 번째 탄력적 하위 요소에 margin-right: auto;를 설정합니다. 나머지 공간은 요소 오른쪽에 배치됩니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: 10px;
}
.flex-item:first-child {
    margin-right: auto;
}
</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>

프로그램을 실행하여 사용해 보세요

완벽한 센터링

다음 예는 우리가 일반적으로 직면하는 센터링 문제를 완벽하게 해결합니다.

유연한 상자를 사용하면 중심 맞추기가 매우 간단해집니다. 탄성 하위 요소를 두 개의 위쪽 축 방향에서 완전히 중앙에 맞추려면 margin: auto만 설정하면 됩니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: auto;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">Perfect centering!</div>
</div>
</body>
</html>

프로그램을 실행하고 사용해 보세요

align-self

align-self 속성은 탄성 요소 자체의 교차축(세로축) 방향 정렬을 설정하는 데 사용됩니다. ㅋㅋㅋ 부모가 없으면 '스트레칭'합니다.

flex-start: 플렉스박스 요소의 교차축(세로축) 시작 위치의 테두리가 행의 교차축 시작 테두리에 가깝습니다.

flex-end: 플렉스박스 요소의 교차축(세로축) 시작 위치의 경계가 행의 교차축 끝 경계에 가깝습니다.

기준선: 플렉스박스 요소의 인라인 축과 측면 축이 동일하면 이 값은 'flex -start'와 동일합니다. 그렇지 않으면 이 값이 기준선 정렬에 참여하게 됩니다.
stretch: 교차 축 크기를 지정하는 속성 값이 'auto'인 경우 해당 값은 항목의 여백 상자 크기를 행 크기에 최대한 가깝게 만들지만 동시에 '최소/최대 너비/높이' 속성을 준수합니다.

다음 예에서는 탄력적 하위 요소에 대한 다양한 align-self 값의 적용 효과를 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.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;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item item1">flex-start</div>
  <div class="flex-item item2">flex-end</div>
  <div class="flex-item item3">center</div>
  <div class="flex-item item4">baseline</div>
  <div class="flex-item item5">stretch</div>
</div>
</body>
</html>

프로그램을 실행하고 사용해 보세요

flex

flex 속성은 탄력적인 하위 요소가 공간을 할당하는 방법을 지정하는 데 사용됩니다.

Syntax

flex: none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

각 값 분석:

none: 없음 키워드 값은 0 0 auto
[ flex-grow ]: 플렉스 박스 요소의 확장 비율을 정의합니다.
[flex-shrink]: 연성 상자 요소의 수축 비율을 정의합니다.
[ flex-basis ]: 플렉스 박스 요소의 기본 기준 값을 정의합니다.

다음 예에서 첫 번째 탄력적 하위 요소는 공간의 2/4를 차지하고 나머지 두 요소는 공간의 1/4을 차지합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.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;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item item1">flex item 1</div>
  <div class="flex-item item2">flex item 2</div>
  <div class="flex-item item3">flex item 3</div>  
</div>
</body>
</html>

프로그램을 실행하고 사용해 보세요

CSS3 flex box attribute

다음 표에는 유연한 상자에 일반적으로 사용되는 속성이 나열되어 있습니다.

다음 섹션

새로운 파일

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>php中文网(php.cn)</title>
 <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>

제출하다 코드 재설정

자동운전

전체 화면

없음

Attribute	Description
display	HTML 요소 상자 유형을 지정합니다.
flex-direction	은 플렉스 컨테이너의 하위 요소 배열을 지정합니다.
justify-content	는 플렉스 박스 요소의 주축(가로축) 방향 정렬을 설정합니다.
align-items	플렉스 박스 요소의 정렬을 교차축(세로축) 방향으로 설정합니다.
flex-wrap	플렉스 박스의 하위 요소가 상위 컨테이너를 초과할 때 래핑할지 여부를 설정합니다.
align-content	다음과 유사하게 flex-wrap 속성의 동작을 수정합니다. Align-ITEMS. 그러나 하위 요소 정렬을 설정하는 것은 아니지만 정렬 선 및 플렉스 랩의 약어에 대해 탄성 상자의 하위 요소 정렬 순서를 설정하는 선을 설정합니다.
align-self	flex 하위 요소에 사용됩니다. 컨테이너의 align-items 속성을 재정의합니다.
flex	플렉스 박스의 하위 요소가 공간을 할당하는 방법을 설정합니다.