[CSS] display 속성 - Flex : flex-item

flex에는 두가지 요소가 있다.

flex-container : 컨테이너에 적용하는 속성 ( 부모 요소 )

flex-item : 플랙스 컨테이너를 구성하는 아이템에 적용하는 속성 ( 자식 요소 )

flex-item

• flex-basis : auto, center , ....
• flex-grow
• flex-shrink
• flex
• align-self : auto , stretch , flex-start , flex-end, center, baseline
• order
• z-index

---

Flex Item에 적용하는 속성

---

1. flex-basis : 유연한 박스의 기본 영역 설정

flex 아이템의 기본 크기를 설정한다.

flex-direction : row  -> 너비 설정

flex-direction : column -> 높이 설정

flex-basis가 auto면, 해당 아이템의 width값을 사용한다. 

 

다음은 아이템에 width값도 flex-basis 값도 적용하지 않은 예시이다.

여기서 flex-basis : 200px로 준다면 

200px이 넘지 않았던 첫번째 두번째 아이템의 너비가 200px로 늘어난다. 

처음부터 200px이 넘었던 세번째 아이템은 너비가 그대로 유지가 된다.

즉 flex-basis : 200px를 해주면, 아이템들의 width를 200px로 해주는데 이미 200px이 넘었더라면 그건 그냥 둬~~

이렇듯 유연하게 아이템들의 너비를 설정해 줄 수 있다.

 

flex-basis가 아닌 width값을 200px로 준다면

세번째 아이템도 200px의 값을 갖는다. 

2. flex-grow : 유연하게 늘리기 ( 여백을 늘려 빈공간을 메워준다 )

flex-grow는 아이템의 여백을 늘려 값을 더 커질 수 있도록 해주는 속성이다.

flex-grow에는 숫자값이 들어가는데, 0보다 큰 값이 들어가면 해당 아이템이 유연한 박스로 변해 빈 공간을 메운다.

 

flex-grow가 0인 상태 (flex-basis는 주지 X)

아이템이 늘어나지 X

flex-grow가 1인 상태 

빈 공간을 메운다.

모든 아이템에게 flex-grow값을 1을 준 상태. 그래서 모두 동일한 비율로 여백을 가졌다.

flex-grow를 각각 1:2:1로 주었을 때

3. flex-shrink : 유연하게 줄이기 

flex-grow와 반대로, 아이템이 flex-basis의 값보다 작아질 수 있게 해주는 속성이다.

flex-shrink에는 숫자값이 들어가는데, 0보다 큰 값이 들어가면 해당 아이템이 유연한 박스로 변하고 flex-basis보다 작아진다.

flex-shrink : 1 (기본값) flex-basis보다 작아질 수 있다
flex-shrink : 0  flex-basis보다 절대 안작아짐!!!!!!

먼저 basis값을 400px로 주고 컨테이너의 width 값을 1000px로 주었다. ( 아이템들의 크기에 관여하지 않을정도로 걍 크게 줌.) 

각각 400px의 너비를 갖는다. 

 

이번엔 컨테이너의 값을 극단적으로 작게 주었다. 

flex-shrink : 1이 적용된 준 두번째 아이템은 flex-basis로 준 크기보다 줄어든것을 확인할 수 있다.

flex-shrink : 0이 적용된 첫번째는 컨테이너의 크기가 줄어들어도 flex-basis값을 그대로 유지한다.  

4. flex : 축약해서 쓰기 ( basis + grow + shrink )

위에서 했던 flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 축약형 속성이다.

 

flex-grow , flex-shrink , flex-basis 순서로 적용된다. ( 늘리기 줄이기 기본크기 순서!)

ex) 
flex : 1  grow : 1 shrink : 1 basis : 0% 
flex : 1 0 auto  grow : 1 shrink : 0 basis : auto 
flex : 1 500px  grow : 1 shrink : 1 basis : 500px 

 

 

컨테이너의 너비가 80%이고 아이템의 basis를 40%로 주었기 때문에 한줄에 두개씩 배치하게 된다.  

 

'

basis를 20%로 주면 한줄에 4개씩 배치하게 된다.

5. align-self : 수직축 아이템 정렬

컨테이너의 수직축 정렬을 할 때와 동일하다.

컨테이너의 align-items는 컨테이너안의 전체 아이템들의 수직축 방향 정렬이라면, 

아이템의 align-self는 각각 아이템들의 수직축 방향 정렬이다.

align-self : auto; ( 기본값 ) align-items 설정을 상속 받음 
align-self : stretch;     
align-self : flex-start; 
align-self : flex-end;    
align-self : center;   
align-self : baseline;

 

auto값은 부모인 컨테이너의 align-items의 속성을 상속받는다. 

예를 들어 align-items를 center로 해주었다면, align-self : auto의 값은 center가 된다.

컨테이너에 align-items : center를 주고 나머지는 동일하게 해주었다.

auto는 상속받았기 때문에 center가 적용되었고

나머지 아이템들은 align-items가 아닌 align-self의 값을 여전히 적용시키고 있는것을 확인 할 수 있다.  

align-items와 align-self를 동시에 주었다면 우선순위는 각각의 아이템에 설정을 주는 align-self가 갖게된다. 

6. order : 배치 순서

작은 숫자일수록 먼저 배치가 된다. 단! '시각적'인 순서이기 때문에 HTML 자체의 구조가 바뀌는것이 아니다 주의!

order의 값이 작은 순서대로 배치가 된 것을 확인 할 수 있다.

 

보이는 순서만 바뀌었을 뿐! HTML구조에는 관여를 하지 않는다.

7. z-index : Z축으로 정렬

z-index로 Z축을 정렬한다. 숫자가 클 수록 위로 올라온다.

 

transform: scale(2); 가로와 세로를 두배로 확대해준다. 
어떤 아이템이 위로 올라왔는지 육안으로 확인하기 어렵다. 그래서 transfrom 속성을 사용해서 확인하였다.

2번째 4번째 5번째의 아이템에 z-index값을 주었고 5번째는 숫자를 좀 더 크게 주었다. 

z-index의 값이 클수록 위로 올라간다.

 

 

 

studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자