“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
레이아웃 Flex
요소들이 포함된 크느 박스에 flex를 선언하고, 안에 있는 요소들에게 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것입니다.
| display: flex; display: -webkit-flex; display: -ms-flexbox; |
박스 안에 구문은 해당 요소에 flex로 레이아웃을 계한다고 선언하는 뜻입니다.
01. flex layout
flex를 이용해 레이아웃을 만든다 이렇게 코드진행을 할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
}
#header {
width: 100%;
height: 100px;
background-color: #D5CCC9;
}
#nav {
width: 100%;
height: 100px;
background-color: #9D8980;
}
#main {
width: 100%;
height: 780px;
background-color: #74574A;
display: flex;
}
#section1 {
width: 1200px;
height: 100px;
background-color: #684D43;
display: flex;
}
#section2 {
width: 600px;
height: 200px;
background-color: #594139;
display: flex;
}
#section3 {
width: 600px;
height: 480px;
background-color: #4A352F;
display: flex;
}
#footer {
width: 100%;
height: 100px;
background-color: #3E2723;
}
.container {
width: 1200px;
height: inherit;
background-color: rgba(0, 0, 0, 0.2);
margin: 0 auto;
}
</style>
</head>
<body>
<div id="wrap">
<header id="header">
<div class="container"></div>
</header>
<nav id="nav">
<div class="container"></div>
</nav>
<main id="main">
<div class="container">
<div id="section1"></div>
<div id="section2"></div>
<div id="section3"></div>
</div>
</main>
<footer id="footer">
<div class="container"></div>
</footer>
</div>
</body>
</html>
<주의사항>
- 가운데 부분은 class container를 이용해서 만들어 줍니다.
- 박스가 3개 나열 된다고 생각하고 처음에는 큰 메인 박스를 만들어 준 후 그 아래로 차례로 section1,2,3에 가로와 세로 값 배경색을 부여한 후 display: flex를 main부터 section 1,2,3에 부여해서 main박스 안에 1,2,3가 차례대로 가로로 들어갈 수 있도록 부여해 줍니다.
flex 종류
- flex : 1은 원래 flex: 1 1 0; 의 줄인 표현 입니다. 1 1 auto와도 같으며 1 1 100px과도 같습니다. 앞이 1이면 뭐든 같은은데 이 세 값을 flex-grow, flex-shrink,flex-basis입니다. flex를 쓸 때 생략하여 사용 할 수 있습니다.
flex-grow
- 자식 요소가 적거나 크기가 작아 공간이 남을 때 항목으 크기를 늘려 채워주는 방법입니다.
- 속성 값 0 : 기본 값
- 속성 값 1 : 항목들이 모두 같으면 크기가 같습니다.
- 속성 값 양수 : 값을 높게 하면 더 늘어나고 공간이 부족하다면 어떤 값도 줘도 무의미 합니다.
- 생략 속성 값 : flex: none; , flex: 100px
flex-shrink
- 자식 요소가 많거나 그 크기가 커서 공간이 부족할 때 각 항목의 크기를 줄여 채워주는 방법입니다.
- 속성 값 0 : 공간이 부족해도 항목의 크기를 줄 수 없습니다.
- 속성 값 1 : (기본값) - 자식 요소들이 많아서 컨테이너에 넘치면 안넘치게 알아서 좁아집니다.
- 속성 값 양수 : 값을 높게 줄수록 더 좁아집니다 (내부 수축지수가 자동 계산 됩니다.) 공간이 남을 때는 어떤 값도 무의미 합니다.
- 속성의 기본 값이 1이기 때문에 자식 요소는 기본적으로 좁아집니다.
- 생략 값 : flex: none; , flex: 1; , flex: 100px; ,flex :1 100px;
flex-basis
- width속성을 주지 않고 flex 자식 요소들의 초기 길이를 지정하는 속성 입니다.
- 속성 값 auto : 기본값 입니다.
- 50px, 100px.... : 원하는 가로 크기를 부여 합니다.
- 생략 값: flex:none; , flex:1; , flex: 1 1 ;
02. flex-direction
자식 요소를 나열하는 방향을 지정하는 속성입니다 부모 요소에게 지정합니다.
| 속성 값 | 속성 설명 |
| columm | 위에서 아래로 나열 |
| columm-reverse | 아래에서 위로 나열 |
| row(기본값) | 좌측에서 우측으로 나열 |
| row-reverse | 우측에서 좌측으로 나열 |
03. justify-content
공간이 남을 때, 즉 flex-grow:0; 일때 자식 요소들을 가로로 정렬하는 속성입니다.
| 속성 값 | 속성 설명 |
| flex-start(기본 값) | 시작쪽으로 정렬 (보통 왼쪽, flex-direction: row-reverse일 때는 오른쪽) |
| flex-end | 시작쪽으로 정렬 (보통 오른쪽, flex-direction: row-reverse일 때는 왼쪽) |
| center | 중앙으로 정렬 |
| space-between | 양쪽 정렬 |
| space-around | 요소 좌우 동일 간격 |
03. flex-wrap
flex 자식 요소들의 줄바꿈 방식을 지정하는 속성입니다.
| 속성 값 | 속성 설명 |
| wrap | 자식 요소들이 많으면 다음 줄로 넘침 |
| nowrap | 자식 소들이 많아도 한줄 안에 배치됨 |
| wrap-reverse | 자식 요소들이 많으면 다음 위 줄로 넘침 |
예를 들어 flex-wrap : wrap값을 준다면 좁게 나타나는 자식 요소들이 넓게 퍼져 두줄로 나타나는 형상을 볼 수 있습니다.
04. flex-flow
flex-direction과 flex-wrap을 나란히 붙혀 하나의 속성처럼 쓸 수 있는 속성 입니다.