- display (표현속성)
display란 '보여주다'라는 의미로 block속성과 inline속성의 특징을 바꿀 때 사용한다.
display: block
해당 요소를 block속성으로 바꾸거나, none으로 숨긴 요소를 다시 나타낼 때 사용한다.
display: none
해당 요소를 화면에서 영역까지 모두 숨긴다.
(box2에 display: none; 을 적용한 상태)- visibillity
영역은 남겨둔 채 요소만 숨기는 속성으로
해당 요소가 차지하고있던 공간은 남겨둔 채,
요소의 모양만 숨기고 싶을 때 사용한다.
visibillity: hidden
요소가 차지하고 있던 공간은 그대로 둔 채 요소만 숨긴다.
(visible2에 visibillity : hidden; 을 적용한 상태)- ★flex (display: flex)★
display의 속성으로 "display: flex"로 사용된다.
부모박스(container)안에 자식박스(item)을 정렬하는 속성으로,
flex를 적용하는 순간부터 자식박스는 가로로 정렬된다.
이 때, 자식박스들의 가로넓이의 합이 부모박스 넓이보다 길어지면,
자식박스의 사이즈가 자동으로 줄어들며 부모박스를 채운다.
부모박스에 flex를 적용하면 자식박스들을 다양하게 정렬하는 하위정렬속성을 함께 사용할 수 있다.
하위정렬속성
1. justify-content
: 부모박스안의 자식박스들을 가로로 정렬
- justify-content: flex-start
: 기본값. 왼쪽>오른쪽 정렬 - justify-content: flex-end
: 오른쪽>왼쪽 정렬 - justify-content: center
: 가운데로 정렬 - justify-content: space-between
: 동일한 여백으로 양쪽 정렬 - justify-content: space-around
: 자식박스 양 옆으로 동일한 간격 정렬
(박스 1,2 사이의 여백을 각각 반씩 가지고 있는 상태) - justify-content: space-evenly
: 자식박스들을 고르게 동일한 간격으로 정렬
2. align-items
: 부모박스안의 자식박스들을 세로로 정렬
부모박스를 기준으로 top/middle/bottom 정렬
- align-items: flex-start
: top위치로 정렬 - align-items: flex-end
: bottom위치로 정렬 - align-items: center
: middle위치로 정렬 - align-items: baseline
: 자식박스들을 부모박스의 시작 위치에 정렬
=flex-start와 동일한 결과값 - align-items: stretch
: 자식박스들을 부모박스높이에 맞춰 늘림.
★이 때, 자식박스에는 height속성이 없어야함.
(height=0 도 X -> 높이가 0인 높이가 있는 셈)
3. flex-direction
: 자식박스의 나열방향을 정하는 속성.
block속성처럼 세로로 나열하거나, flex의 기본값처럼 가로로 나열할 때 주로 사용한다.
속성값에 -reverse가 붙으면 start와 end의 자리가 바뀌게 된다.
- flex-direction: row
: 기본값. flex를 적용한 기본 모습과 같이 가로로 자식박스들 나열 - flex-direction: row-reverse
: 가로로 반전 - flex-direction: column
: 위에서 아래로 세로 나열 - flex-direction: column-reverse
: 세로로 반전
4. flex-wrap
: 감싸기속성. flex를 적용했을때, 자식박스들 넓이의 총 합이 부모박스를 넘어가면 자식박스들의 넓이를 자동으로 줄여 부모박스 안에 들어가게 한다.
이 때 자식박스의 넓이와 높이를 그대로 유지하려면 flex-wrap을 사용한다.
-
flex-wrap: nowrap
: 기본값. 모든 자식박스를 한 줄에 걸쳐 부모박스에 맞춤 -
flex-wrap: wrap
: 자식박스들의 넓이높이를 유지하며 여러 줄에 걸쳐 정렬 -
flex-wrap: wrap-reverse
: 자식박스들의 넓이높이를 유지하며 여러 줄에 걸쳐 반대로 정렬
(flex-wrap: wrap; 적용상태. 컨텐츠 사이 여백은 기본적으로 동일)
(flex-wrap: wrap-reverse; 적용상태)
5. gap (=gutter)
: 컨텐츠 사이 여백으로, flex가 적용된 자식박스 사이의 간격을 만들 수 있다.
값을 1개만 쓰면 row와 column 모든방향으로 동일한 간격을 적용한다.
값을 2개로 나눠쓰면 앞자리가 column, 뒷자리가 row방향이다.
6. flex-flow
: 나열방향과 감싸기를 한 번에 선언하는 속성이다. 두 속성의 속성값을 공백으로 구분하여 쓴다.
- flex-flow: 나열방향 감싸기;
ex) flex-flow: row wrap;
: 가로방향으로 나열하고, 자식요소 넓이높이 유지
flex-flow: column wrap-reverse;
: 세로방향으로 나열하고, 자식요소 넓이높이 유지한 채 뒤집어 정렬
