CSS3 플렉스 박스(플렉스 박스)

레이아웃은 웹 애플리케이션의 스타일 디자인에서 매우 중요한 부분입니다. 레이아웃은 페이지에 있는 다양한 구성 요소와 요소의 크기와 위치를 결정하는 데 사용됩니다. 반응형 사용자 인터페이스의 인기로 인해 웹 애플리케이션은 일반적으로 다양한 장치 크기와 브라우저 해상도에 적응해야 합니다. 반응형 사용자 인터페이스 디자인의 가장 중요한 측면은 레이아웃입니다. 창 크기에 따라 레이아웃을 조정해야 하며, 최상의 디스플레이 효과를 얻으려면 구성 요소의 크기와 위치를 변경해야 합니다. 이는 또한 레이아웃 논리를 더욱 복잡하게 만듭니다.

이 기사에서는 CSS3 사양에 도입된 새로운 레이아웃 모델인 플렉스 박스 모델을 소개합니다. Flexbox 모델은 간단한 방법으로 여러 가지 일반적인 복잡한 레이아웃 요구 사항을 충족할 수 있습니다. 장점은 개발자가 특정 구현 방법을 제공하지 않고 레이아웃이 가져야 하는 동작만 선언한다는 것입니다. 브라우저는 실제 레이아웃을 담당합니다. 이 레이아웃 모델은 주요 브라우저에서 지원됩니다.

CSS3 유연한 상자 콘텐츠

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 150px;
    background-color: yellow;
}
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item"> 1</div>
  <div class="flex-item"> 2</div>
  <div class="flex-item"> 3</div>  
</div>
</body>
</html>

flex-direction property

상위 컨테이너에서 플렉스 박스 객체의 하위 요소 위치를 설정하거나 검색합니다.

Syntax

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

행: 왼쪽에서 오른쪽으로(왼쪽 정렬) 정렬됩니다.

row-reverse: 가로 배열을 반대로 합니다(오른쪽 정렬, 뒤에서 앞으로, 마지막 항목이 앞에 옵니다.

column: 세로 배열.

row-reverse: 세로 배열을 반대로 합니다. 뒤로 앞으로는 마지막 항목이 맨 위에 있습니다.

Firefox, Opera 및 Chrome은 flex-direction 속성을 지원합니다

justify-content 속성

주축(가로축) 방향으로 Flexbox 요소의 정렬을 설정하거나 검색합니다.

이 속성은 Flexbox 행의 모든 하위 요소를 축소할 수 없거나 최대 크기에 도달한 경우에 도움이 될 수 있습니다. 이 속성은 정렬도 제어합니다. 요소가 행을 오버플로하는 경우.

Syntax

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

flex-start: 행 위치 정렬. 행의 첫 번째 자식의 기본 시작 가장자리는 행의 기본 시작 가장자리와 정렬되고 모든 후속 Flex 항목은 이전 항목과 정렬됩니다.

flex-end: 플렉스 박스 요소가 행의 끝을 향해 정렬됩니다. 행의 첫 번째 하위 요소의 기본 끝 가장자리는 행의 기본 끝 가장자리와 정렬되고 모든 후속 플렉스 항목은 이전 항목과 정렬됩니다.

center: Flexbox 요소가 행 중앙에 정렬됩니다. 행의 하위 요소는 서로 정렬되고 행 내 중심에 배치됩니다. 첫 번째 요소는 행의 기본 시작 위치에서 마지막 요소가 행의 기본 끝 위치에서 갖는 만큼의 여백을 갖습니다(나머지 공간이 있는 경우). 음수이면 양쪽 끝에서 동일한 길이의 오버플로가 유지됩니다.

space-between: Flexbox 요소가 행에 고르게 분산됩니다. 가장 왼쪽에 남은 공간이 음수이거나 행에 하위 항목이 하나만 있는 경우 이 값은 'flex-start'와 동일합니다. 다른 경우에는 첫 번째 요소의 여백은 줄의 기본 시작 여백과 정렬되고, 마지막 요소의 여백은 줄의 기본 끝 여백과 정렬되며, 나머지 플렉스 항목은 고르게 분포됩니다. 둘.

space-around: Flexbox 요소는 행에 균등하게 분산되어 양쪽 끝의 하위 요소 사이에 공간의 절반을 남깁니다. 가장 왼쪽의 남은 공간이 음수이거나 행에 Flexbox 항목이 하나만 있는 경우 이 값은 'center'와 동일합니다. 다른 경우에는 플렉스 박스 항목이 균등한 간격으로 배치되어 항목 사이에 동일한 공백이 있으며 첫 번째 요소 앞의 공간은 절반이고 마지막 요소 뒤의 공간은 항목 사이의 공간이 절반입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
.box{
display:-webkit-flex;
display:flex;
margin:0;padding:10px;list-style:none;background-color:#eee;}
.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
#box{
-webkit-flex-direction:row;
flex-direction:row;
}
#box2{
-webkit-flex-direction:row-reverse;
flex-direction:row-reverse;
}
#box3{
height:500px;
-webkit-flex-direction:column;
flex-direction:column;
}
#box4{
height:500px;
-webkit-flex-direction:column-reverse;
flex-direction:column-reverse;
}
</style>
</head>
<body>
    <h2>flex-direction:row</h2>
    <ul id="box" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    </ul>
    <h2>flex-direction:row-reverse</h2>
    <ul id="box2" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    </ul>
    <h2>flex-direction:column</h2>
    <ul id="box3" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    </ul>
    <h2>flex-direction:column-reverse</h2>
    <ul id="box4" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    </ul>
</body>
</html>

align-items 속성

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

Syntax

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
.box{
display:-webkit-flex;
display:flex;
width:400px;height:100px;margin:0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}
.box li{margin:5px;padding:10px;border-radius:5px;background:#aaa;text-align:center;}
#box{
-webkit-justify-content:flex-start;
justify-content:flex-start;
}
#box2{
-webkit-justify-content:flex-end;
justify-content:flex-end;
}
#box3{
-webkit-justify-content:center;
justify-content:center;
}
#box4{
-webkit-justify-content:space-between;
justify-content:space-between;
}
#box5{
-webkit-justify-content:space-around;
justify-content:space-around;
}
</style>
</head>
<body>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>justify-content:flex-end</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>justify-content:center</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>justify-content:space-between</h2>
<ul id="box4" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>justify-content:space-around</h2>
<ul id="box5" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>

flex-wrap attribute

플렉스 박스 객체의 하위 요소가 상위 컨테이너를 초과할 때 래핑할지 여부를 설정하거나 검색합니다.

Syntax

flex-wrap: nowrap | Wrap | Wrap-reverse

nowrap: 하위 요소가 상위 컨테이너를 오버플로할 때 래핑하지 마세요.

wrap: 하위 요소가 상위 컨테이너를 오버플로하면 자동으로 래핑됩니다.

wrap-reverse: 랩 배열을 반대로 합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
.box{
display:-webkit-flex;
display:flex;
width:200px;height:100px;margin:0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}
.box li{margin:5px;border-radius:5px;background:#aaa;text-align:center;}
.box li:nth-child(1){padding:10px;}
.box li:nth-child(2){padding:15px 10px;}
.box li:nth-child(3){padding:20px 10px;}
#box{
-webkit-align-items:flex-start;
align-items:flex-start;
}
#box2{
-webkit-align-items:flex-end;
align-items:flex-end;
}
#box3{
-webkit-align-items:center;
align-items:center;
}
#box4{
-webkit-align-items:baseline;
align-items:baseline;
}
#box5{
-webkit-align-items:strecth;
align-items:strecth;
}
</style>
</head>
<body>
<h2>align-items:flex-start</h2>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>align-items:flex-end</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>align-items:center</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>align-items:baseline</h2>
<ul id="box4" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>align-items:strecth</h2>
<ul id="box5" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>

align-content 속성

flexbox 스택 flex 행의 정렬을 설정하거나 검색합니다.

Syntax

align-content: flex-start | space-around | Stretch

flex-start: 컨테이너 시작 위치가 스택되었습니다. Flexbox 컨테이너에 있는 첫 번째 행의 교차축 시작 가장자리는 Flexbox 컨테이너의 교차축 시작 가장자리에 인접하고 각 후속 행은 이전 행에 인접합니다.

flex-end: 각 행은 플렉스 박스 컨테이너의 끝을 향해 쌓입니다. Flexbox 컨테이너의 마지막 행의 교차축 끝 경계는 Flexbox 컨테이너의 교차축 끝 경계에 가깝고 각 후속 행은 이전 행에 가깝습니다.

center: 각 행은 Flexbox 컨테이너의 중앙을 향해 쌓입니다. 행은 2개씩 정렬되고 Flex 컨테이너의 중앙에 배치되어 Flex 컨테이너의 교차축 시작 콘텐츠 가장자리와 첫 번째 행 사이의 거리와 컨테이너의 교차축 끝 콘텐츠 가장자리와 마지막 행 사이의 거리를 유지합니다. 거리는 동일합니다. (남은 공간이 음수인 경우 행은 양방향으로 동일한 거리로 쏟아집니다.)

space-between: 행은 Flexbox 컨테이너에 고르게 분포됩니다. 남은 공간이 음수이거나 Flex 컨테이너에 행이 하나만 있는 경우 이 값은 'flex-start'와 동일합니다. 다른 경우에는 첫 번째 행의 교차 축 시작 가장자리가 Flex 컨테이너의 교차 시작 콘텐츠 가장자리에 있고, 마지막 행의 교차 축 끝 가장자리가 Flex 컨테이너의 교차 축 끝 가장자리에 있고, 나머지 행은 다음과 같이 배열됩니다. Flexbox 창 사이의 공간이 동일하도록 합니다.

space-around: 각 행은 Flexbox 컨테이너에 고르게 분산되어 양쪽 끝의 하위 요소 사이에 공간의 절반을 남겨 둡니다. 남은 공간이 음수이거나 Flexbox 컨테이너에 행이 하나만 있는 경우 이 값은 'center'와 동일합니다. 다른 경우에는 행 사이의 공간이 동일하고 첫 번째 행 앞과 마지막 행 뒤의 공간이 다른 행 공간의 절반이 되는 방식으로 행이 Flexbox 컨테이너에 배열됩니다.

늘이기: 각 행이 늘어나 나머지 공간을 차지합니다. 남은 공간이 음수인 경우 이 값은 'flex-start'와 동일합니다. 다른 경우에는 교차축 크기를 확장하기 위해 남은 공간을 모든 행에 균등하게 나누어줍니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
.box{
display:-webkit-flex;
display:flex;
width:220px;margin:0;padding:10px;list-style:none;background-color:#eee;}
.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
#box{
-webkit-flex-wrap:nowrap;
flex-wrap:nowrap;
}
#box2{
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
}
#box3{
-webkit-flex-wrap:wrap-reverse;
flex-wrap:wrap-reverse;
}
</style>
</head>
<body>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>flex-wrap:wrap</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>flex-wrap:wrap-reverse</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>

order 속성

Flexbox 모델 객체의 하위 요소가 나타나는 순서를 설정하거나 검색합니다.

Syntax

order: <integer>

<integer>: 앞에 작은 값을 포함하여 정렬 순서를 정의하려면 정수 값을 사용하세요. 부정적일 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
.box{
display:-webkit-flex;
display:flex;
-webkit-flex-wrap:wrap;
flex-direction:wrap;
width:200px;height:200px;margin:0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}
.box li{margin:5px;padding:10px;border-radius:5px;background:#aaa;text-align:center;}
#box{
-webkit-align-content:flex-start;
align-content:flex-start;
}
#box2{
-webkit-align-content:flex-end;
align-content:flex-end;
}
#box3{
-webkit-align-content:center;
align-content:center;
}
#box4{
-webkit-align-content:space-between;
align-content:space-between;
}
#box5{
-webkit-align-content:space-around;
align-content:space-around;
}
#box6{
-webkit-align-content:strecth;
align-content:strecth;
}
</style>
</head>
<body>
<h2>align-content:flex-start</h2>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:flex-end</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:center</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:space-between</h2>
<ul id="box4" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:space-around</h2>
<ul id="box5" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:strecth</h2>
<ul id="box6" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
</body>
</html>

align-self 속성

flexbox 요소 자체의 교차축(세로축) 방향 정렬을 설정하거나 검색합니다.

Syntax

align-self: auto | flex-end | center | Stretch

auto: 'auto' 그런 다음 요소 상위 요소의 'align-items' 값으로 평가되고, 상위 요소가 없는 경우 'stretch'로 평가됩니다.

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
.box{
display:-webkit-flex;
display:flex;
margin:0;padding:10px;list-style:none;background-color:#eee;}
.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
#box li:nth-child(3){
-webkit-order:-1;
order:-1;
}
</style>
</head>
<body>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
</body>
</html>

플렉스 속성

복합 속성. Flex Box 객체의 하위 요소가 공간을 할당하는 방법을 설정하거나 검색합니다.

약어가 flex:1인 경우 계산된 값은 다음과 같습니다. 1 1 0

Syntax

flex: none | - based ]

none: none 키워드의 계산된 값은 다음과 같습니다. 0 0 auto

[ flex-grow ]: 플렉스 박스 요소의 확장 비율을 정의합니다.

[ flex-shrink ]: 플렉스 박스 요소의 수축 비율을 정의합니다.

[ flex-basis ]: 플렉스 박스 요소의 기본 기준 값을 정의합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
.box{
display:-webkit-flex;
display:flex;
-webkit-align-items: flex-end;
height:100px;margin:0;padding:10px;border-radius:5px;list-style:none;background-color:#eee;}
.box li{margin:5px;padding:10px;border-radius:5px;background:#aaa;text-align:center;}
.box li:nth-child(1){
-webkit-align-self: flex-end;
align-self: flex-end;
}
.box li:nth-child(2){
-webkit-align-self: center;
align-self: center;
}
.box li:nth-child(3){
-webkit-align-self: flex-start;
align-self: flex-start;
}
.box li:nth-child(4){
-webkit-align-self: baseline;
align-self: baseline;
padding:20px 10px;
}
.box li:nth-child(5){
-webkit-align-self: baseline;
align-self: baseline;
}
.box li:nth-child(6){
-webkit-align-self: stretch;
align-self: stretch;
}
.box li:nth-child(7){
-webkit-align-self: auto;
align-self: auto;
}
</style>
</head>
<body>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>i</li>
</ul>
</body>
</html>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> <style> .box{ display:-webkit-flex; display:flex; margin:0;padding:10px;list-style:none;background-color:#eee;} .box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;} #box{ -webkit-flex-direction:row; flex-direction:row; } #box2{ -webkit-flex-direction:row-reverse; flex-direction:row-reverse; } #box3{ height:500px; -webkit-flex-direction:column; flex-direction:column; } #box4{ height:500px; -webkit-flex-direction:column-reverse; flex-direction:column-reverse; } </style> </head> <body> <h2>flex-direction:row</h2> <ul id="box" class="box"> <li>a</li> <li>b</li> <li>c</li> </ul> <h2>flex-direction:row-reverse</h2> <ul id="box2" class="box"> <li>a</li> <li>b</li> <li>c</li> </ul> <h2>flex-direction:column</h2> <ul id="box3" class="box"> <li>a</li> <li>b</li> <li>c</li> </ul> <h2>flex-direction:column-reverse</h2> <ul id="box4" class="box"> <li>a</li> <li>b</li> <li>c</li> </ul> </body> </html>

제출하다 코드 재설정

자동운전