안녕하세요. 훈츠입니다. CSS 를 이용하여, Layout 을 손쉽게 구현 하는데 도움을 주는 FLEX 에 대해 소개 드리겠습니다. 언젠가 정리 해야지 하는 마음을 가지고만 있었는데 이제서야 정리하게 되네요.
목 차
-
FLEX 소개
-
FLEX 콘테이너 속성과 Item 속성
- FLEX 예제
FLEX 소개
CSS FLEX 는 반응형 디자인을 도와주는 모듈 입니다. 사용법이 그렇게 어렵지는 않은데 정리 해서 해보지 않으면 헷갈려요. 다른 모듈들과 마찬가지로 브라우저 버전에 따라 지원하지 않는경우도 있으니, 내가 어디 모듈을 타켓으로 작업할지 정해 두는것도 좋을것 같습니다. FLEX 관련해서 정리나 설명해놓은 많은 블로그가 있지만 개인적으로는 W3C 사이트를 참고하고 부족한경우 다른 블로그 글을 찾아보는 방법이 좋은것 같습니다. 물론 개인차가 있겠지만요.
W3C FLEX 관련 사이트 : https://www.w3schools.com/css/css3_flexbox.asp
CSS Flexbox (Flexible Box)
CSS Flexbox 1 2 3 4 5 6 7 8 Try it Yourself » CSS Flexbox Layout Module Before the Flexbox Layout module, there were four layout modes: Block, for sections in a webpage Inline, for text Table, for two-dimensional table data Positioned, for explicit positi
www.w3schools.com
FLEX 의 속성
FLEX 는 기본적으로 레이아웃을 구성하기 위해서 사용합니다. 그래서 상위에 <div class="Container"> container 라는 이름을 가진 div 태그로 하위 노드들을 감싸서 사용합니다. 이때 상위는 container 라고 부르며, 하위 노드들을 item 이라고 부릅니다. 다음을 보시면, 이해가 좀더 쉬울것 같습니다.
FLEX 를 사용하기 위해서는 위와 같이 세팅된 Container 와 Item 에 원하는 속성값을 주므로써 우리가 원하는 방향으로 레이아웃을 구성할수가 있습니다. 그렇다면 이제 Container 에 있는 속성값들의 역활과 item 에서의 속성값들에 대한 역활을 이해가 필요 하겠죠? 옵션이 조금 있는편이라 제가 알고 있는 몇가지 옵션을 설명 드리고 나머지 옵션은 표기만 해두도록 하겠습니다. ^^ 저도 해봐야 아는 옵션들이 있어서요.
Container 옵션
display
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
다음 display 를 flex로 설정 해야 합니다.
display : flex
row는 열방향 정렬, colunm 은 행방향 정렬 설정 입니다.
기능 : 아이템 정렬방향 설정
flex-direction : row 혹은 column
item들이 container 의 크기보다 클때, 배율을 늘려서 맞추지 않고, 아래로 떨어뜨리는 역활을 합니다. 아무 값도 입력하지 않으면 기본적으로 'nowarp' 입니다. key값으로 ['nowrap' , 'wrap' , 'wrap-reverse' 가 있습니다.
기능 : 줄바꿈 제어
flex-wrap : nowrap
방향과 줄바꿈을 제어하는 단축 속성 입니다.
flex-flow : <flex-direction> || <flex-wrap> 둘중 하나 또는 둘을 선언해야 합니다.
아이템의 정렬를 설정 할수 있습니다. 다음 키값으로는 다섯가지가 있습니다.
flex-start, flex-end ,center, space-between, space-around
justify-content :
기본적으로 flex-wrap 가 비슷하게 동작하지만 몇가지 속성이 더있습니다. stretch 사용하려면 이용하면 될거 같네요.
만약 flex-wrap 속성이 nowrap 이면 동작 하지 않습니다.
속성값 : flex-start, flex-end, center, space-between, space-around, stretch
align-content
속성값 : flex-start, flex-end, center, space-between, space-around, stretch
align-items
다음 정리 글을 참조 하세요.
- CSS flexible 레이아웃: flex item의 팽창과 수축.
- 플렉스 컨테이너와 플렉스 아이템(flex container & flex item)의 개념.
- flex container(플렉스 컨테이너)
- flex item(플렉스 아이템)
- 신축성(flexibility): flex item의 팽창 및 수축.
- flex item의 팽창을 제어하는 flex-grow 속성.
- flex item의 수축을 제어하는 flex-shrink 속성.
- flex item의 기준 사이즈를 제어하는 flex-basis 속성.
- flex item의 단축 속성 flex.
- 플렉스 컨테이너와 플렉스 아이템(flex container & flex item)의 개념.
- CSS flexible 레이아웃: flex item의 방향과 순서.
- flex item의 ‘방향’을 제어하는 flex-direction.
- flex item의 ‘줄 바꿈’을 제어하는 flex-wrap.
- flex item의 ‘뱡향과 줄 바꿈’을 제어하는 단축 속성 flex-flow.
- flex item의 ‘배치 순서’를 제어하는 order.
- CSS flexible 레이아웃: flex item의 정렬과 간격.
- flex item의 ‘진행 축’ 정렬과 간격을 제어하는 justify-content.
- flex item의 ‘교차 축’ 정렬을 제어하는 align-items.
- flex item의 ‘독립적 교차 축’ 정렬을 제어하는 align-self.
- flex item의 ‘여러 줄 교차 축’ 정렬과 간격을 제어하는 align-content.
items 옵션
order : item 들의 순서를 바꿀수 있습니다.
flex-grow : 기준값을 1로 줬을때, 0.7 , 0.2, 0.1 로 비율로 크기를 줄수 있다.
flex-shrink : 화면이 줄었을때 비율을 줄수 있습니다. 기본값은 0으로 너비가 고정됩니다.
flex-basis : 아이템의 너비를 지정 합니다. 기본값은 auto 이며 30% 이렇게 줄수있습니다.
align-self : 컨테이너의 align-items 속성보다 우선하여 아이템의 수직 정렬을 개별 설정 가능합니다.
align-self
컨테이너의 align-items 속성보다 우선하여 아이템의 수직 정렬을 개별 설정
속성값설명
| auto | 기본값 |
| stretch | 아이템의 높이는 컨테이너의 높이에 꽉 참 (full) (기본값) |
| flex-start | 수직 시작 부분에 정렬 (top) |
| flex-end | 수직 끝 부분에 정렬 (bottom) |
| center | 수직 가운데 정렬 (middle) |
| baseline | container의 baseline 기준 정렬 |
FLEX 예제
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
//Hoons Blog---https://rain2002kr.tistory.com------------------------------------------------------------------코드///
<style>
.container{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-content: stretch;
align-items: stretch;
width: 600px;
height: 600px;
border: solid 1px greenyellow;
background-color: powderblue;
}
.item{
border: solid 1px gray;
flex-grow: 1;
font-size: 30px;
}
#item1{
order: 3;
flex-shrink: 0.2;
}
</style>
</head>
<body>
<div class="container">
<div class="item" id="item1">item 1</div>
<div class="item" id="item2">item 2</div>
<div class="item" id="item3">item 3</div>
<div class="item" id="item3">item 4</div>
</div>
/* 이하 생략
|
cs |
flex 정리해 보았는데, 정리 했는데도 계속 찾아 보게 될거 같네요. 헷갈린다는걸 어렵다고 해야하는게 맞을거 같은데...암튼 레이아웃 구성하는게 만만하진 않네요. 안드로이드의 콘스레인트 레이아웃이 얼마나 편하고 좋은지 알겠어요. ^^