display: 박스를 배치하거나 고유의 속성을 바꿔주는 속성
display는 '보여주다'라는 의미로 블록요소와 인라인 요소의 특징을 바꿀때 사용한다.
-display: block; ★
해당요소를 block속성으로 바꾸거나 none으로 숨김 요소를 다시 나타낼때 사용한다.
-display: inline;
해당 요소를 inline속성으로 바꿈.
-display: inline-block;
해당 요소를 inline-block속성으로 바꿀때 사용한다.
-display: none; ★
해당요소를 화면에서 영역까지 모두 숨긴다.
visibillity : 영역은 남겨둔 채 요소만 숨기는 속성
display : none을 사용하면 해당요소가 차지하고 있던 공간과 해당 요소를
모두 숨겨준다. 하지만 영역은 남겨둔채 요소의 모양만 숨기고 싶다면 visibillity를 사용할 수 있다.
-visibillity : hidden; ★
요소가 차지하고 있던 공간은 그대로 둔 채 요소만 숨긴다.
-visibillity : visible;
기본값으로 요소와 공간을 그대로 보여준다.
★★★★★ display : flex ★★★★★
- 부모박스(container)안에 자식박스(item)를 가로로 정렬하는 속성.
- 자식박스의 가로 넓이의 총 합이 부모박스의 넓이를 넘게되면 자식박스의 사이즈가 자동으로 줄어들며 부모박스를 채운다.
★중요!!! display: flex 속성은 부모박스에 적용해야 하며, 이에따른 하위 정렬속성 또한 부모박스에 적용해야 한다.
<하위 정렬 속성> 이거 또한 부모 박스에 적용해야함
1. justify-content: 부모박스안에 자식 박스들을 가로로 정렬할때 사용하는 속성.
-justify-content:flex-start;
: 기본값으로 부모박스안에 자식박스들을 왼쪽에서 오른쪽으로 정렬한다.
-justify-content: flex-end;
: 부모박스안에 자식박스들을 오른쪽에서 왼쪽으로 정렬한다.
-justify-content: centre;
: 부모박스안에 자식박스들을 가운데로 정렬한다.
-justify-content : sapce-between;
:부모박스안에 자식박스들을 동일한 여백으로 양쪽 정렬한다.
-justify-content : sapce-around;
:자식박스의 양옆으로 동일한 간격을 주어 정렬한다.
-justify-content : sapce-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속성이 없어야 한다.(0이 아닌 아에 선언되지 않아야함)
3.flex-direction 자식박스의 나열 방향을 정하는 속성
- 자식 박스들은 block 속성이라 원래 세로로 나열되는데 flex를 적용하면 자동으로 가로로 정렬된다. 이때 자식박스를 block속성처럼 세로로 나열하거나 flex의 기본값처럼 가로로 나열할때 주로 사용한다.
- ☆속성값에 -reverse가 붙으면 start와 end의 자리가 바뀌게 된다.
-flex-direction: row;
:기본값으로 flex를 적용한 기본 모습과 같이 가로로 자식박스들을 나열한다.
-flex-direction: row-reverse;
: 자식박스들을 가로로 반전시킨다.
-flex-direction: coloum;
: 자식박스들을 위에서 아래로 나열한다.
-flex-direction: columm-reverse ;
: 자식박스들을 세로로 반전시킨다.
4.flex-wrap : 감싸기 속성
부모박스 안에 있는 자식박스의 갯수가 많을 때 flex를 적용하면 자식 박스 넓이를 무시하고 1줄로 보여주는데 이때 자식박스의 넓이와 높이를 유지하는 속성
-flex-wrap:nowrap;
:기본값으로 모든 자식요소들을 한 줄에 걸쳐 부모박스에 맞춘다.
아예안쓴거랑 똑같음
-flex-wrap: wrap;
:자식 요소들의 넓이 높이를 유지하며 여러 줄에 걸쳐 정렬한다.
-flex-wrap: wrap-reverse;
:자식 요소들의 넓이 높이를 유지하며 여러 줄에 걸쳐 반대로 정렬한다.
5.gap : 컨텐츠 사이 여백
gap을 사용하면 flex가 적용된 자식요소 사이에 간격을 만들고 이것을 gutter라고 표현한다.
값을 1개만 쓰면 row, column방향으로 동일한 간격을 만들어주고,
값을 2개로 나눠 쓰면 앞자리가 column방향, 뒷자리가 .row방향이다.
6. flex-flow : 나열방향 + 감싸기 속성
flex-direction(나열속성) + flex-wrap(감싸기속성)을 한꺼번에 선언할때
사용한다.두 속성의 속성값을 공백으로 구분하여 한 번에 쓴다.
-flex-flow : column wrap;
-> 세로방향으로 나열하고, 자식요소 넓이 유지함
-flex-flow : row wrap-reverse;
-> 가로방향으로 나열하고, 자식요소 넓이 높이를 유지하여 뒤집는다.
실습!
7.align-content
flex-wrap을 적용했을 때 자식 컨텐츠가 많을 경우 여러줄로 형성되고 이때 한 줄을 하나의 content라고 한다. align-content는 컨텐츠를 각각 세로로 정렬하고 요소사이에(beteen),주위에(around),고르게(evenly) 동일한 간격을 주어 배치할수 있다.
- align-content : flex-start;
여러 줄을 컨테이너의 top위치에 배치한다. - align-content : flex-end;
여러 줄을 컨테이너의 bottom위치에 배치한다. - align-content : flex-centre;
여러 줄을 컨테이너의 middle위치에 배치한다. - align-content : space-between;
여러 줄들을 양끝에 배치하고 줄 사이에 동일한 간격을 준다. - align-content : space-around;
여러 줄들을 양옆에 동일한 간격을 주어 배치한다. - align-content : space-evenly;
여러 줄 사이에 동일한 간격을 주어 배치한다. - align-content : stretch;
여러 줄들을 컨테이너(부모박스)에 맞도록 늘린다.
