CSS3 유연한 상자


CSS3 Flex Box

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

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

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

브라우저 지원

표의 숫자는 이 속성을 지원하는 첫 번째 브라우저의 버전 번호를 나타냅니다.

숫자 바로 뒤에 나오는 -webkit- 또는 -moz-는 지정된 브라우저의 접두사입니다.

CSS3 유연한 상자 콘텐츠

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

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

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

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

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

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

Instance

<!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>

Run Instance»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

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

direction 속성을 ​​rtl(오른쪽에서 왼쪽)으로 설정하면 탄력적 하위 요소의 배열도 변경되고 페이지 레이아웃도 변경됩니다. direction 属性为 rtl (right-to-left),弹性子元素的排列方式也会改变，页面布局也跟着改变:

实例

<!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 顺序指定了弹性子元素在父容器中的位置。

语法

flex-direction: row | row-reverse | column | column-reverse

flex-direction的值有:

  • row：横向从左到右排列（左对齐），默认的排列方式。

  • row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。

  • column：纵向排列。

  • column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

以下实例演示了 row-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>

예제 실행»온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요.

🎜flex-direction🎜🎜flex-direction은 탄력적 하위 항목을 지정합니다. 순서 위치에 있는 상위 컨테이너의 요소입니다. 🎜

구문

<!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>
🎜flex-direction 값은 다음과 같습니다: 🎜
  • 🎜row: 가로로 정렬 왼쪽에서 오른쪽으로(왼쪽 정렬) 기본 배열입니다. 🎜
  • 🎜row-reverse: 가로 배열을 반대로 합니다(오른쪽 정렬, 뒤에서 앞으로, 마지막 항목이 앞에 옵니다. 🎜
  • 🎜column: 세로 배열. 🎜
  • 🎜column-reverse: 마지막 항목이 맨 위에 오도록 뒤에서 앞으로 수직 배열을 뒤집습니다. 🎜
🎜다음 예는 row-의 사용법을 보여줍니다. reverse:🎜🎜🎜Instance🎜🎜
<!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>
🎜🎜🎜인스턴스 실행»🎜🎜온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요🎜🎜

다음 예에서는 열의 사용을 보여줍니다. column 的使用:

实例

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

运行实例 »

点击 "运行实例" 按钮查看在线实例

以下实例演示了 column-reverse 的使用:

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

justify-content 属性

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

justify-content 语法如下：

<!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>

各个值解析:

  • flex-start：

    弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。

  • flex-end：

    弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。

  • center：

    弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。

  • space-between：

    弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。

  • space-around：

    弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（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: 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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

以下实例演示了 center

Example

<!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>

예제 실행 »
온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요🎜🎜🎜다음 예제에서는 column-reverse 사용을 보여줍니다.🎜🎜🎜Example🎜🎜
align-items: flex-start | flex-end | center | baseline | stretch
🎜
인스턴스 실행»🎜온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요🎜🎜

정당화 -content attribute🎜🎜Content alignment ( justify-content 속성은 flex 컨테이너에 적용되어 flex 컨테이너의 기본 축을 따라 flex 항목을 정렬합니다. 🎜🎜justify-content 구문은 다음과 같습니다: 🎜
<!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:
    🎜 🎜유연성 항목은 줄의 머리 부분을 향해 나란히 채워집니다. 이것이 기본값입니다. 첫 번째 Flex 항목의 기본 시작 여백 가장자리는 행의 기본 시작 가장자리에 배치되고 후속 Flex 항목은 순서대로 동일하게 배치됩니다. 🎜
  • 🎜flex-end:
    🎜🎜Flex 항목은 줄 끝 부분에 가깝게 패딩됩니다. 첫 번째 Flex 항목의 기본 끝 여백 가장자리는 행의 기본 끝 가장자리에 배치되고 후속 Flex 항목은 순서대로 같은 높이로 배치됩니다. 🎜
  • 🎜center:
    🎜🎜플렉스 항목은 패딩 옆 중앙에 위치합니다. (남은 여유 공간이 음수이면 플렉스 항목이 양방향으로 오버플로됩니다.) 🎜
  • 🎜공백:
    🎜🎜Flex 항목은 행에 고르게 분포됩니다. 남은 공간이 음수이거나 Flex 항목이 하나만 있는 경우 이 값은 flex-start와 동일합니다. 그렇지 않은 경우 첫 번째 Flex 항목의 여백은 행의 기본 시작 가장자리에 정렬되고 마지막 Flex 항목의 여백은 행의 기본 끝 가장자리에 정렬된 다음 나머지 Flex 항목이 분산됩니다. 행은 서로 인접해 있습니다. 🎜
  • 🎜공간 순환:
    🎜🎜Flex 항목은 줄에 고르게 분포되어 양쪽에 공간의 절반이 남습니다. 남은 공간이 음수이거나 Flex 항목이 하나만 있는 경우 이 값은 center와 동일합니다. 그렇지 않은 경우 Flex 항목은 서로 동일한 간격(예: 20px)으로 행을 따라 배포되고 첫 번째 측면과 마지막 측면과 Flex 컨테이너 사이에 절반의 공간을 남겨 둡니다(1/2*20px=10px). 🎜
🎜렌더링 디스플레이: 🎜🎜🎜🎜다음 예에서는 flex-end 사용을 보여줍니다.🎜🎜🎜Example🎜🎜
<!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>
🎜
인스턴스 실행»🎜온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요🎜🎜🎜다음 예에서는 center 사용을 보여줍니다.🎜🎜🎜예 🎜🎜rreee🎜
인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

다음 예에서는 space-between 사용을 보여줍니다. space-between 的使用:

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

以下实例演示了 space-around 的使用:

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

align-items 属性

align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

语法

<!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-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

  • flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

  • center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

  • baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

  • stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

以下实例演示了 stretch(默认值) 的使用:

实例

flex-flow:  ||

运行实例 »

点击 "运行实例" 按钮查看在线实例

以下实例演示了 flex-start 的使用:

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

以下实例演示了 flex-end 的使用:

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

以下实例演示了 center

Instance

<!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>
🎜 인스턴스 실행»🎜 🎜온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.🎜🎜🎜다음 예에서는 space-around 사용을 보여줍니다. 🎜🎜🎜Instance🎜🎜
align-content: flex-start | flex-end | center | space-between | space-around | stretch
🎜🎜🎜인스턴스 실행 »🎜🎜온라인 예제를 보려면 "인스턴스 실행" 버튼을 클릭하세요🎜🎜

align-items 속성🎜🎜align-items 교차축(수직축) 방향. 🎜

구문

<!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>
🎜각 값 분석:🎜
  • 🎜flex-start: 유연한 측면 축(세로 축)의 시작 위치 상자 요소 테두리는 행의 교차축 시작 테두리를 감싸고 있습니다. 🎜
  • 🎜flex-end: 플렉스박스 요소의 교차축(세로축) 시작 위치의 경계가 행의 교차축 끝 경계에 가깝습니다. 🎜
  • 🎜center: Flexbox 요소는 행의 교차축(세로축) 중앙에 위치합니다. (행의 크기가 Flexbox 요소의 크기보다 작으면 양방향으로 동일한 길이로 오버플로됩니다.) 🎜
  • 🎜baseline: 플렉스 박스 요소의 인라인 축과 측면 축이 동일한 경우 이 값은 'flex-start'와 동일합니다. 그렇지 않으면 이 값이 기준선 정렬에 참여하게 됩니다. 🎜
  • 🎜stretch: 교차 축 크기를 지정하는 속성 값이 'auto'인 경우 해당 값은 항목의 여백 상자 크기를 행 크기에 최대한 가깝게 만듭니다. 동시에 'min /max-width/height' 속성 제한을 준수합니다. 🎜
🎜다음 예에서는 stretch(기본값) 사용을 보여줍니다. 🎜🎜🎜Instance🎜🎜
order:
🎜🎜🎜Run Instance»🎜🎜"Run Instance"를 클릭합니다. 버튼 온라인 예제 보기 🎜🎜🎜다음 예제에서는 flex-start 사용을 보여줍니다. 🎜🎜🎜Instances🎜🎜
<!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>
🎜🎜🎜인스턴스 실행»🎜🎜온라인으로 보려면 "인스턴스 실행" 버튼을 클릭하세요. 예제🎜🎜🎜 다음 예제에서는 flex-end 사용을 보여줍니다. 🎜🎜🎜Instance🎜🎜
<!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>
🎜🎜🎜예제 실행»🎜🎜온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요🎜 🎜🎜다음 예에서는 center 사용법을 보여줍니다.🎜🎜🎜Example🎜🎜
<!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>
🎜
인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

다음 예에서는 기준 사용을 보여줍니다. baseline 的使用:

实例

align-self: auto | flex-start | flex-end | center | baseline | stretch

运行实例 »

点击 "运行实例" 按钮查看在线实例

flex-wrap 属性

flex-wrap 属性用于指定弹性盒子的子元素换行方式。

语法

<!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>

各个值解析:

  • nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。

  • wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行

  • wrap-reverse -反转 wrap 排列。

以下实例演示了 nowrap 的使用:

实例

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

运行实例 »

点击 "运行实例" 按钮查看在线实例

以下实例演示了 wrap 的使用:

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

以下实例演示了 wrap-reverse 的使用:

实例

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;  
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
   &amp

运行实例 »

点击 "运行实例" 按钮查看在线实例

align-content 属性

align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

语法

rrreee

各个值解析:

  • stretch - 默认。各行将会伸展以占用剩余的空间。

  • flex-start - 各行向弹性盒容器的起始位置堆叠。

  • flex-end - 各行向弹性盒容器的结束位置堆叠。

  • center -各行向弹性盒容器的中间位置堆叠。

  • space-between -各行在弹性盒容器中平均分布。

  • space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

以下实例演示了 center

Instance

rrreee
🎜인스턴스 실행 »🎜🎜온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요🎜🎜

flex-wrap 속성🎜🎜flex-wrap 이 속성은 하위의 래핑 방법을 지정하는 데 사용됩니다. -플렉스 박스의 요소. 🎜

구문

rrreee🎜각 값 구문 분석:🎜
  • 🎜nowrap - 기본값, Flex 컨테이너는 단일 행입니다. 이 경우 플렉스 아이템이 컨테이너를 넘칠 수 있습니다. 🎜
  • 🎜포장 - Flex 컨테이너는 여러 줄로 구성됩니다. 이 경우 탄성 자식의 넘친 부분이 새 줄에 배치되고 자식 내에서 줄 바꿈이 발생합니다 🎜
  • 🎜wrap-reverse - 줄 바꿈을 반대로 합니다. 준비. 🎜
🎜다음 예에서는 nowrap 사용을 보여줍니다. 🎜🎜🎜Instance🎜🎜rrreee🎜🎜🎜Run Instance»🎜🎜보려면 "인스턴스 실행" 버튼을 클릭하세요. 온라인 예제🎜 🎜🎜다음 예제에서는 wrap 사용을 보여줍니다. 🎜🎜🎜Instance🎜🎜rrreee🎜🎜🎜Run Instance»🎜🎜온라인 예제를 보려면 "인스턴스 실행" 버튼을 클릭하세요🎜 🎜🎜다음 예에서는 wrap-reverse 사용법을 보여줍니다. 🎜🎜🎜Instance🎜🎜rrreee🎜🎜🎜인스턴스 실행»🎜🎜온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요🎜🎜

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

구문

rrreee🎜각 값 구문 분석:🎜
  • 🎜stretch - 기본값. 나머지 공간을 차지하도록 행이 늘어납니다. 🎜
  • 🎜flex-start - Flex 컨테이너의 시작 부분을 향해 행을 쌓습니다. 🎜
  • 🎜flex-end - 행은 Flex 컨테이너의 끝을 향해 쌓입니다. 🎜
  • 🎜center - 행이 Flex 컨테이너의 중앙을 향해 쌓입니다. 🎜
  • 🎜space-between - 행은 Flexbox 컨테이너 내에 고르게 분산됩니다. 🎜
  • 🎜space-around - 각 행은 Flex 컨테이너에 균등하게 분산되어 양쪽 끝의 하위 요소 사이에 절반의 공간을 남깁니다. 🎜
🎜다음 예에서는 center 사용을 보여줍니다. 🎜🎜🎜Example🎜🎜rrreee🎜
예제 실행»

온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요

Elastic 하위 요소 속성

Sort

Syntax

rrreee

각 값 분석:

  • <정수>: 사용 정수 값 앞에 더 작은 값을 사용하여 정렬 순서를 정의합니다. 부정적일 수 있습니다.

order 속성은 탄력적 컨테이너에 있는 탄력적 하위 요소의 속성을 설정합니다. order 属性设置弹性容器内弹性子元素的属性:

实例

rrreee

运行实例 »

点击 "运行实例" 按钮查看在线实例

对齐

设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为"auto"，可以使弹性子元素在弹性容器的两上轴方向都完全集中。

以下实例在第一个弹性子元素上设置了 margin-right: auto; 。 它将剩余的空间放置在元素的右侧：

实例

rrreee

运行实例 »

点击 "运行实例" 按钮查看在线实例

完美的居中

以下实例将完美解决我们平时碰到的居中问题。

使用弹性盒子，居中变的很简单，只想要设置  margin: auto;

Instance

rrreee

Run Instance»보려면 "인스턴스 실행" 버튼을 클릭하세요. 온라인 인스턴스

Alignment🎜🎜 "margin" 값을 "auto" 값으로 설정하면 탄력적 컨테이너의 남은 공간을 자동으로 확보할 수 있습니다. 따라서 수직 여백 값을 "auto"로 설정하면 탄성 컨테이너의 양쪽 상단 축 방향에 탄성 하위 요소가 완전히 집중되도록 할 수 있습니다. 🎜🎜다음 예에서는 첫 번째 flex 하위 요소에 margin-right: auto;를 설정합니다. 나머지 공간은 요소 오른쪽에 배치됩니다. 🎜🎜🎜Instance🎜🎜rrreee🎜🎜🎜Run Instance»🎜🎜온라인 예제를 보려면 "인스턴스 실행" 버튼을 클릭하세요.🎜🎜🎜Perfect Centering🎜🎜다음 예제는 다음과 같습니다. 우리의 문제를 완벽하게 해결하십시오. 일반적인 센터링 문제. 🎜🎜유연한 상자를 사용하면 중심 맞추기가 매우 간단해집니다. margin: auto;만 설정하면 탄성 하위 요소가 두 개의 위쪽 축 방향에서 완전히 중앙에 배치됩니다. 🎜🎜🎜예🎜🎜rrreee 🎜🎜 🎜인스턴스 실행»🎜🎜온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요🎜🎜

align-self

align-self 속성은 탄성요소 자체의 교차축(세로축) 방향 정렬을 설정하는 데 사용됩니다. align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。

语法

rrreee

各个值解析:

  • auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。

  • flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

  • flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

  • center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

  • baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

  • stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

以下实例演示了弹性子元素上 align-self 不同值的应用效果：

实例

rrreee

运行实例 »

点击 "运行实例" 按钮查看在线实例

flex

flex

Syntax

rrreee

개별 값 분석:

  • auto: 'align-self' 값이 'auto'인 경우 계산된 값은 요소 상위 요소의 'align-items' 값입니다. 상위 요소가 없으면 계산된 값은 'stretch'입니다.

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

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

  • center: Flexbox 요소는 행의 교차축(세로축) 중앙에 위치합니다. (행의 크기가 Flexbox 요소의 크기보다 작은 경우 양방향으로 동일한 길이로 오버플로됩니다.)

baseline: 플렉스 박스 요소의 인라인 축과 측면 축이 동일한 경우 이 값은 'flex-start'와 동일합니다. 그렇지 않으면 이 값이 기준선 정렬에 참여하게 됩니다.

stretch: 교차 축 크기를 지정하는 속성 값이 'auto'인 경우 해당 값은 항목의 여백 상자 크기를 행 크기에 최대한 가깝게 만들지만 동시에 '최소/최대 너비/높이' 속성을 준수합니다.


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

Example

rrreee

예제 실행»

보려면 "예제 실행" 버튼을 클릭하세요. 온라인 예제

flex

flex 속성은 탄력적인 하위 요소가 공간을 할당하는 방법을 지정하는 데 사용됩니다.
Syntax
rrreee🎜각 값 분석:🎜🎜🎜🎜none: none 키워드의 계산된 값은 다음과 같습니다. 0 0 auto🎜🎜🎜🎜[ flex-grow ]: 플렉스 박스 요소의 확장 비율을 정의합니다. 🎜🎜🎜🎜[flex-shrink]: 연성 상자 요소의 수축 비율을 정의합니다. 🎜🎜🎜🎜[ flex-basis ]: 플렉스 박스 요소의 기본 기준 값을 정의합니다. 🎜🎜🎜🎜다음 예에서 첫 번째 탄력적 하위 요소는 공간의 2/4를 차지하고 나머지 두 요소는 공간의 1/4을 차지합니다. 🎜🎜🎜Example🎜🎜rrreee🎜🎜🎜예제 실행»🎜🎜클릭 온라인 예제를 보려면 "인스턴스 실행" 버튼을 누르세요🎜🎜🎜🎜🎜더 많은 예제🎜🎜🎜탄성 상자를 사용하여 반응형 페이지 만들기🎜🎜🎜Instances🎜🎜rrreee🎜🎜