display와 flex 속성
display : 박스를 배치하거나 고유의 속성을 바꿔주는 속성
- display는 '보여주다'라는 의미로 블록요소와 인라인 요소의 특징을 바꿀때 사용한다.
display : block;★
해당 요소를 block속성으로 바꾸거간 none으로 숨긴 요소를 다시 나타낼때 사용한다.
display : inline;
해당 요소를 inline속성으로 바꾼다.
display : inline-block;
해당 요소를 inline-block속성으로 바꿀 때 사용한다.
display : none;★
해당 요소를 화면에서 영역까지 모두 숨긴다.
display: flex 중요!!
-
부모박스(container)안에 자식박스(item)를 정렬하는 속성.
-
display:flex속성은 부모박스에 적용해야 하며,
이에 따른 하위 정렬속성 또한 부모박스에 적용해야 한다.
<하위 정렬 속성>
1.justify-content
- 부모박스 안에 자식 박스들을 가로로 정렬할때 사용하는 속성.
<flex속성이 걸려있어야 사용 가능>
-justify-content: flex-start;
: 기본값으로 부모박스안에 자식박스들을 왼쪽에서 오른쪽으로 정렬한다.
-justify-content: flex-end;
: 부모박스안에 자식박스들을 오른쪽에서 왼쪽으로 정렬한다.
-justify-content: center;
: 부모박스안에 자식박스들을 가운데로 정렬한다.
-justify-content: space-between;
: 부모박스안에 자식박스들을 동일한 여백으로 양쪽 정렬한다.
-justify-content: space-around;
: 자식박스의 양옆으로 동일한 간격을 주어 정렬한다.
-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속성이 없어야 한다.
- flex-direction
- 자식박스의 나열 방향을 정하는 속성
자식박스를 block속성처럼 세로로 나열하거나
flex의 기본값처럼 가로로 나열할때 주로 사용한다.
속성값의 -reverse가 붙으면 start와 end의 자리가
바뀌게 된다.flex-direction: row;
: 기본값으로 flex를 적용한 기본 모습과 같이 가로로
자식박스들을 나열한다.
flex-direction: row-reverse;
: 자식박스들을 가로로 반전시킨다.
flex-direction: column;
: 자식박스들을 위에서 아래로 나열한다.
flex-direction: column-reverse;
: 자식바스들을 세로로 반전시킨다.
- flex-wrap
- flex를 적용하게 되면 자식요소들이 부모박스의 넓이보다 넓을때 자동으로 자식의 넓이를 무시하고 1줄에 걸쳐 컨텐츠를 작게 찌그러트린다. 이때 만약 자식의 넓이와 높이를 그대로 유지하고 싶다면 flex-wrap을 사용한다.
flex-wrap: nowrap;
: 기본값으로 모든 자식요소들을 한 줄에 걸쳐 부모박스에 맞춘다.
flex-wrap: wrap;
: 자식 요소들의 넓이 높이를 유지하며 여러 줄에 걸쳐 정렬한다.
flex-wrap: wrap-reverse;
: 자식 요소들을 넓이 높이를 유지하며 여러 줄에 걸쳐 반대로 정렬한다.
5.flex-flow : 나열방향 + 감싸기 속성
- flex-direction(나열속성) + flex-wrap(감싸기속성)을 한꺼번에
선언할때 사용한다. 두 속성의 조합은 많이 사용되기 때문에
한 번에 선언하고 싶을때 flex-flow를 이용할 수 있다.
두 속성의 속성값을 공백으로 구분하여 한 번에 쓴다.flex-flow : 나열방향, 감싸기;
Ex) flex-flow : cloumn wrap;
-> 세로방향으로 나열하고, 자식요소 넓이 유지함
flex-flow : row wrap-reverse
-> 가로방향으로 나열하고, 자식요소 넓이 높이를 유지하며 뒤집는다.
- gap : 컨텐츠 사이 여백
- gap을 사용하면 flex가 적용된 자식요소 사이에 간격을 만들 수 있다.
gap은 컨텐츠 사이에 생기며, 이것을 gutter라고 표현하기도 한다.
값을 1개만 쓰면 row,column방향으로 동일한간격을 만들어주고,
값을 2개로 나눠 쓰면 앞자리가 column방향, 뒷자리가 row방향이다.
