-
이 속성들은 반드시 자식박스에 적용해야 하고 부모박스에 flex가 적용되어 있어야만 쓸 수 있다.
1. order : 순서 변경 속성
기본값은 0이며, 양수나 음수로 바꿀 수 있다.
작은 수일수록 나열 순서가 앞으로 온다.2. align-self: 개별요소를 세로로 정렬
자식박스를 세로로 정렬할때 사용하는 속성.
align-items에 적용하는 속성값들을 모두 똑같이 사용한 값을 지정한 해당 태그에만 적용된다.-align-self : flex-start;
:해당 요소를 컨테이너의 top위치로 정렬한다.-align-self : flex-end;
:해당 요소를 컨테이너의 bottom위치로 정렬한다.-align-self : centre;
:해당 요소를 컨테이너의 middle위치로 정렬한다.-align-self : baseline;
:해당 요소를 컨테이너의 시작위치로 정렬한다.
(=기본값인 flex-start와 동일)-align-self : stretch;
:해당 요소를 부모박스 높이나 넓이에 맞춰 늘린다.
(비어있는 방향에 따라 width나 height를 없애준다)
실습!
반응형을 만들때 많이 사용하는 가변단위들
1. % : 어떤 영역에서 어떤 비율만큼 차지하는 단위
2. vw,vh : viewport width, viewport height의 약자이며,
'보이는 화면'을 기준으로 백분율(%)하여 보여준다.
3. vmin, vmax : viewport 최대, 최소 넓이를 설정하는 단위
4. fr : 컨텐츠가 차지하는 비율. 1fr이고, 컨텐츠가 3개라면 부모영역을 1:1:1로 채운다.
첫번때 컨텐츠가 2fr이고, 나머지 컨텐츠가 1fr이라면 2:1:1이 된다.overflow
overflow 속성은 내부 요소가 부모박스의 범위를 벗어날때 어떻게 처리할 것인가를 정하는 속성.
-overflow:hidden;★
:영역을 벗어나는 부분은 숨긴다. 단, 부모박스에 높이가 지정되지 않은 경우 자식요소만큼 부모박스가 늘어난다.
-overflow: scroll;
:영역을 벗어나는 부분은 스크롤바를 만들어 보여준다.
-overflow: visible;
:기본값으로 부모영역을 벗어나더라도 보여준다.
-overflow:: auto;★
:부모영역에서 자식요소가 넘치면 스크롤바를 만들고, 넘치지않으면 스크롤바를 만들지 않는다.
-overflow: initial;
:기본값으로 설정함, 즉, visible과 같다.
-overflow: inherit;
부모요소의 속성을 상속받는다.
overflow:scroll
scroll에는 가로 스크롤을 지정하는 overflow-x, 세로스크롤능 지정하는 overflow-y가 있다.
-overflow : scroll;
:가로 세로 스크롤을 모두 나타낸다.
-overflow-x : scroll/hidden;
:가로 스크롤을 나타내거나 숨긴다.
-overflow-y : scroll/hidden;
:세로 스크롤을 나타내거나 숨긴다.
scroll속성은 가로,세로 스크롤이 모두 나타나는 것이 기본값이다.
만약 특정 스크롤을 숨기고 싶다면 특정 스크롤의 값을 hidden으로 지정해야만 숨길 수 있다.
