반응형
22.flex
CSS의 flex는 엘리먼트들의 크기나 위치를 쉽게 잡아주는 도구입니다. 지금까지 레이아웃과 관련된 다양한 속성들이 있었지만 그리 효과적이지 않았습니다. flex를 이용하면 레이아웃을 매우 효과적으로 표현할 수 있습니다. 아래 영상에서는 flex가 도입된 배경을 설명합니다.
이 기술을 현재 사용해도 좋을지는 아래 페이지를 참고하셔요.
1) flex의 기본
flex를 사용하기 위해서는 컨테이너 태그에 display:flex 속성을 부여해야 합니다. 또한 flex-direction을 이용해서 정렬방향을 바꿀 수 있습니다. 기본은 row입니다. 아래 영상은 flex의 기본적인 사용법을 알려드립니다.
flex-basic1.html (doctyle html이 아닌 doctype임을 유의)
<!DOCTYPE >
<html>
<head>
<meta charset="utf-8">
<style>
.container
background-color:powderblue;
display:flex;
/* flex-direction:row-reverse;*/
.item
background-color: tomato;
color:white;
border:1px solid white;
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
실행 화면
실행하면 블록레벨 엘리먼트가 아닌 인라인 엘리먼트가 됩니다.
만약 다음과 같이 flex-direction:row-reverse;를 추가하면
아래와 같이 순서가 뒤바뀌면서 오른쪽 정렬로 됩니다.
flex-direction의 디폴트는 row이다. row로 바꾸면 다시 원래대로 돌아갑니다.
아래는 flex-direction: column을 했을 때입니다.
실행 화면
다음과 같이 flex-direction:column-reverse로 한다면
아래와 같이 column방향으로 방향이 반대순서로 나타나게 됩니다.
결론적으로 flex-direction은 글자의 방향이 row로 할껀지 아니면 column으로 할껀지 결정하는 것입니다.
2) grow & shrink
아이템은 컨테이너의 크기에 따라서 작아지기도 하고 커지기도 합니다. 이 때 작아지고, 커지는 비율을 지정하는 방법이 바로 grow & shrink입니다. 여기서는 이 속성들에 대해서 알아보겠습니다.
flex-grow-shrink.html
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style>
.container
background-color:powderblue;
height:200px;
display:flex;
flex-direction:row;
.item
background-color: tomato;
color:white;
border:1px solid white;
.item:nth-child(2)
flex-basis: 200px;
/*2번째 아이템만 엘리먼트의 크기를 200px로 적용하게 함 */
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
실행 화면
flex-basis옵션을 주면 flex방향에 해당하는 곳으로 넓이를 주는 옵션이다. 아래는 2번째만 flex-basis옵션이 적용된 것을 볼 수 있습니다.
item클래스에 flex-grow 옵션을 1로 주게 되면 모두 균일하게 n빵해서 영역을 나눠갖게 됩니다.
아래와 같이 균일하게 나눠갖게 됩니다.
만약 아래와 같이 2번째 아이템에만 2의 weight를 주고 싶다면 아래와 같이 .item:nth-child(2)에 flex-grow를 2로 주면 됩니다.
이번에는 shrink에 대해서 알아봅시다.
1번째 아이템에만 shrink를 0으로 적용하고 나머지는 그냥 둔 상태입니다.
flex-grow-shrink.html
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style>
.container
background-color:powderblue;
height:200px;
display:flex;
flex-direction:row;
.item
background-color: tomato;
color:white;
border:1px solid white;
.item:nth-child(1)
flex-basis: 200px;
flex-shrink:0;
.item:nth-child(2)
flex-basis: 300px;
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
실행 화면
이 상태에서 넓이를 줄여보면 아래와 같이 2번의 넓이는 줄어들지만 1번의 넓이는 고정되어 있습니다. 즉 shrink를 0으로 주면 넓이를 고정시키겠다는 의미입니다.
아래와 같이 1번이 shrink를 1로 두고 2번을 shrink를 2로 두면 1번은 1/3만큼의 넓이를 줄일 수 있고 2번은 2/3만큼의 넓이는 줄일 수 있게 된다.
넓이를 줄이기 전
넓이를 줄인 후
3) Holy Grail layout
Holy Grail은 성배라는 뜻입니다. 많은 사람들이 성배를 찾기 위해서 노력했지만 찾지 못한 것처럼 많은 사람들이 아래와 같은 레이아웃을 만들기 위해서 노력했지만 완벽한 방법을 찾지 못했습니다.
이것에 비유해서 이런 레이아웃을 성배 레이아웃이라고 부르곤 합니다. flex는 아주 세련된 방법으로 이 문제를 간편하게 해결합니다. 여기서는 플랙스를 이용해서 성배 레이아웃을 만드는 법을 알아봅니다.
flex-holy.html
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style>
.container
display: flex;
flex-direction: column;
header
border-bottom:1px solid gray;
padding-left: 20px;
footer
border-top:1px solid gray;
padding: 20px;
text-align: center;
.content
display:flex;
.content nav
border-right:1px solid gray;
.content aside
border-left:1px solid gray;
nav, aside
flex-basis: 150px;
flex-shrink: 0;
main
padding: 10px;
</style>
</head>
<body>
<div class="container">
<header>
<h1>생활코딩</h1>
</header>
<section class="content">
<nav>
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ul>
</nav>
<main>
css 수업 중입니다.
</main>
<aside><!--광고 태그-->
AD
</aside>
</section>
<footer>
</footer>
</div>
</body>
</html>
실행 화면
여기서 핵심은 content의 nav와 aside를 고정시키기 위해서 flex-shrink 0으로 주었고 main만 줄어들게 만들었다는 점입니다.
4) flex 여러 속성들
align-items : 수직 방향에 대한 정렬
justify-content : 수평 방향에 대한 정렬
align-content : 같은 행을 그룹이라고 한다면 그룹과 그룹사이의 정렬
align-self : 특정한 것만 예외적으로 정렬할 때
order : 아이템들간의 순서를 바꾸고자 할 때 씀
반응형
'프로그래밍 > CSS' 카테고리의 다른 글
| 생활코딩 css 정리 - 22. 다단(multi column) (0) | 2018.01.15 |
|---|---|
| 생활코딩 css 정리 - 21. Float (0) | 2017.12.18 |
| 생활코딩 css 정리 - 20. media query (0) | 2017.12.10 |
| 생활코딩 css 정리 - 18．포지션(Position) (0) | 2017.12.01 |
| 생활코딩 css 정리 - 20.마진 겹침 현상 (0) | 2017.11.20 |
| 생활코딩 css 정리 - 19. box-sizing (0) | 2017.11.19 |
| 생활코딩 css 정리 - 18. 박스 모델 (0) | 2017.11.15 |
| 생활코딩 css 정리 - 14. 레이아웃 인라인 vs 블럭레벨 (0) | 2017.10.15 |