flexbox

1. 가용공간의 활용법

1-1. Margin 여백화

margin 으로 활용한 auto로 줘서 여백을 준다.

 

1-2. flex-grow 너비화

가용공간을 같은 비율로 차지한다. basis가 지정되어있을 경우 basis + 가용공간(같은 비율)로 공간을 차지하게 된다.

flex-basis의 관계없이 똑같은 너비를 가지고자 할 때는

flex-basis:0, flex-grow:1 

 

여기서 위와 같이 같은 너비를 가지게 하는 방법이 있다.

콘텐츠의 width를 100%로 주는 것이다.

flex-shrink:1 이라는 속성 때문에 같은 너비를 가지게 된다.

 

2. min-width

flex-shrink의 초기값은 1이다. 플렉스 컨테이너에서 플렉스 아이템이 줄어들지 않고 흘러넘치는 경우가 있다.

그 이유가 무엇일까?

flex-shrink: 1이라는 값으로 인하여 같은 비율로 줄어들다가, min-width: auto 의 값으로 flex-item안의 컨텐츠의 값보다 더 이상 줄어들 수가 없다.

 

이를 해결 하는 몇가지 방법이 있다.

 

2-1. min-width: 0 

min-width:0 를 줘서 줄어들 수 있는 값을 없애는 것이다.

 

2-2. over-flow: hidden;

컨텐츠가 넘쳐 흐는 것을, 숨기거나, 스크롤, 다양한 기능이 있다. 이는 부모 요소와 독립적인 자식요소로 만드는 것이다.

 

2-3. .img(콘텐츠) { width: 100% }

이미지의 고유 크기, 너비를 그대로 하는 것이다.

 

2-4. flex-wrap: wrap

flex-shrink의 속성은 가로 공간에서만 영향을 끼치기 때문에, 가로 공간이 꽉차더라도 줄 바뀜이 생기지 않는다.

flex-wrap을 이용하여 줄바꿈을 할 수 있다.

flex-container(부모)에 사용을 한다. 여기서 바뀌는 기준은 flex-basis이다. 

각 row(한 줄)에 가용공간이 생기며, flex-grow:1를 하게되면 가용공간이 전부 채워진다.

 

3. flex 단축속성

3-1. flex: 1

flex-grow:1, flex-shrink: 1, flex-basis: 1

 

3-2. flex:1 1 200px

순서대로 grow shrink basis 이다.

 

4. justify-content

flex-container(부모) 에 사용하며, 메인 축을 정렬한다.

메인 축(Main Axis) - 가로축이다. 

 

5. align-items vs align-self

flex-container(부모)에 사용하며, 기본값은 normal이며 stretch이다. 

기본으로 height가 따로 지정을 안하면 위 아래로 늘어난다.

 

여기서 지정을 해서 정렬을 하고 싶다면

align-self가 있다.

 

align-items 는 flex-container(부모)에 적용하며, 모든 flex-items에 일괄 적용이 된다.

align-self는 flex-item에 적용하며, 원하는 flex-item에 정렬이 가능하다.

 

align-self는 flex-item에 적용 가능하며, 원하는 flex-item에 적용 가능합니다.