[Web] CSS flex속성

부모속성에 사용

💡항상 display:flex;를 적용해줘야 한다.

#flex{
	display:flex;
    justify-content:flex-end; /*오른쪽으로*/
    align-items:flex-end; /*아래로*/
    flex-direction:row-reverse; /*반대방향*/
    flex-wrap:wrap /*여러줄/실제크기 정렬*/
    flex-flow:row wrap; /*정방향+여러줄정렬*/
    align-content:flex-start; /*여러줄 위로*/
}
.yellow {
	order:1; /*1의 위치(뒤)로 이동*/
    align-self:flex-end; /*yellow아이템만 아래로 이동*/
}

🔸justify-content : 중심축. 가로축

• flex-start : 왼쪽으로 정렬 (default값)
• flex-end : 오른쪽으로 정렬
• center : 중앙 정렬
• space-between : 요소들 사이에만 동일한 간격
• space-around : 요소들 둘러싼 여백까지 모두 동일한 간격

🔸align-items : 세로축

• flex-start : 위로 정렬 (default값)
• flex-end : 아래로 정렬
• center : 중앙 정렬
• baseline : 시작위치에 정렬
• stretch : 컨테이너에 맞게 크기 늘림

🔸flex-direction : 방향 지정

축이 중요! 방향 중요X
column이면 justify가 상하 (축이 변함)

• row : 기존 방향과 동일하게 정렬 (default값)
• row-reverse : 반대 방향으로 정렬
• column : 위에서 아래로 정렬
• column-reverse : 아래에서 위로 정렬

🔸order : 순서 변경

default값은 0 0 0 (애초에 순서가 없음)
앞으로 가는건 음수 order:-n, 뒤로 가는 건 양수 order:n
여러개의 아이템이 있어도 모두 0이기때문에, 한가지에만 -1을 매겨준다면 맨 앞으로 간다

🔸align-self : 각각 상하축 이동

align-self:flex-end; 각각을 상하축으로 이동

🔸flex-wrap : 정렬

• nowrap : 모두 한줄로 정렬 너무 많으면 찌부됨 (defalut값)
• wrap : 여러줄에 걸쳐 실제 width로 정렬
• wrap-reverse : 여러줄에 걸쳐 실제 width로 반대로 정렬

🔸flex-flow : direction wrap;

flex-direction과 flex-wrap이 자주 같이 사용되기 때문에, flex로 한번에 속성 적용 가능
flex-flow : direction wrap 순서로 사용한다
(ex)flex-flow:row wrap;

🔸align-content : 여러 줄 사이 간격 지정

• flex-start : 여러줄 위에 정렬
• flex-end : 여러줄 아래 정렬
• center : 여러줄 가운데 정렬
• space-between : 여러줄 사이에만 동일한 간격
• space-around : 여러줄 주위까지 모두 동일한 간격
• stretch : 여러줄 컨테이너에 맞게 크기 늘림

---

자식요소에게 쓰는 수치

🔸flex-grow : 기본값에서 늘어남

• flex-grow:1; - 기본값을 넘어 늘어남 (화면 끝까지 늘어남)
• flex-grow:0; - 고유 크기 유지

2에 해당하는 요소는 기본width이상으로 늘어남

.box:nth-child(2) {
    flex-grow: 1;
}

늘어나는 비율 각각 설정
1:2의 비율로 늘어남

.box:nth-child(2) {
    flex-grow: 1;
}
.box:nth-child(3) {
    flex-grow: 2;
}

🔸flex-shrink : 기본값에서 줄어듬

• flex-shrink:1; - width값이 있어도, 브라우저의 가로 길이가 줄어들면 width를 무시하고 줄어듬
• flex-shrink:0; - 고유 크기 유지

2에 해당하는 요소는 줄어드는 비율이 다른 요소의 2배

.box:nth-child(2) {
    flex-shrink: 2;
}

🔸flex-basis : 기본 크기 지정

flex-grow, flex-shrink로 늘어나거나 줄어들기 전 기본 크기를 설정함

flex-direction:row;기준 basis는 너비(가로), column은 높이(세로)

• flex-basis:npx;
• '기본크기'이기에 이 크기보다 큰 아이템들은 자신의 크기 유지
• width, height를 주면 해당 크기 유지
• width를 함께 사용하지 않는다

🔸flex : grow shrink basis;

flex: grow shrink basis 순으로 작성한 축약 형태로 사용한다.

• flex-basis를 생략하면 auto가 아닌 0으로 설정
• flex-shrink를 생략하면 1로 설정

grow=1, shrink=1, 기본크기=50%

• 50%를 기본값으로 50%가 넘으면 1:1비율로 늘어나거나 수축

.box{
	flex 1 1 50%
}

grow=1, shrink=1, 기본크기=auto(50px)

.box{
	width:50px
	flex 1 1 auto
}

1:1비율로 늘어나는 것

.box{
	flex:1;
}

• flex: 내부 콘텐츠(텍스트 등)가 있다면, 고정된 위치에서 고정된 상태로 요소가 존재한다(브라우저 크기에 좌우되지 않는다)

.box{
	flex-grow:1;
}

• grow: 내부 콘텐츠(텍스트 등)가 있다면, 브라우저 크기에 영향을 받는다(유동적으로 움직임)

✔️flex

• display:flex;
• justify-content:
• align-content:
• align-itmes:
• flex-wrap:
• flex-derection:
• flex-grow:n;
• flex-shrink:n;
• flex-basis:npx/n%;
• flex:grow shrink basis;