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에 정렬이 가능하다.