단축문장- div 글자는 안써도 된다. 바로 .으로 시작해도 된다. $는 숫자 / .뒤에는 클래스 이름 / > 안에 라는 뜻
★ 아래 속성들은 반드시 자식박스에 적용하는 속성들입니다 ★
★ 부모박스에 dispaly: flex; 가 적용되어 있어야만 사용할 수 있다. ★
dispaly: flex; 는 자손한테만 전달된다. 직접적인 부모박스에 줘야함
< order >
: 자식박스의 순서 변경 속성
order를 통해 flex 안쪽에 자식 요소의 순서를 바꿀 수 있다.
기본값은 0이며, 양수나 음수로 바꿀 수 있다.
작은 수일수록 나열 순서가 앞으로(왼쪽) 온다. 숫자가 클수록 오른쪽에 나열된다.
반응형을 작업할때 사용한다.
<align-self>
: 개별 요소 세로 정렬 속성
자식박스를 개별적으로 세로로 정렬할 때 사용하는 속성
align-items에 적용하는 속성값들을 모두 똑같이 사용함. 값을 지정한 해당 태그에만 적용됨.
- align-self: flex-start;
: 해당 요소를 컨테이너(부모박스)의 top 위치로 정렬한다. (기본값)
- align-self: flex-end;
: 해당 요소를 컨테이너의 bottom 위치로 정렬한다.
- align-self: center;
: 해당 요소를 컨테이너의 middle 위치로 정렬한다.
- align-self: baseline;
: 해당 요소를 컨테이너의 시작위치로 정렬한다. (기본값과 결과가 동일)
- align-self: stretch;
: 해당 요소를 컨테이너에 맞게 늘린다.
