내가 보려고 쉽게 써보는 flexbox
주축과 교차축
주축, 교차축이라는 개념이 있는데 이런 용어 자체에 부담을 느끼는 사람도 있다. 어떻게 하면 쉽게 이해할 수 있을까? 일단 이렇게 단어정리를 하자.
- row: 행
- column: 열
- row-reverse: 행 반대로
- column-reverse : 열 반대로
위쪽이나 아래로 직선 하나를 그린다고 하자. 이걸 그냥 주축이라고 부르자. 그럼 나올 수 있는 주축은 4개다.
- 오른쪽에서 왼쪽으로 긋기
- 왼쪽에서 오른쪽으로 긋기
- 위에서 아래로 긋기
-
아래에서 위로 긋기
그리고 이 주축에 수직인 걸 교차축이라고 부른다.
사실 왼쪽, 오른쪽같은 말을 쓰는 건 MDN에서 지양하고 있긴 하다. 부정확한 표현이고 더 이상 Text가 왼쪽에서 오른쪽으로 쓰인다는 보장도 없기 때문이다.
그래도 직관적으로 이해하려면 이렇게 말하는 표현이 낫다.
flex container, flex item에 사용하는 CSS
flex-contianer에 지정할 수 있는 값이 있고 flex 아이템이 지정할 수 있는 css가 따로 있다. 암만 flex item에 flex-container에 지정하는 CSS를 사용해봐야 먹지 않는다.
이 개념은 Grid를 사용할때도 마찬가지다. grid container와 grid 아이템에 쓰이는 css는 다르다.
flex 컨테이너에 사용하는 CSS 속성들
flex-direction, flex-flow justify-content, align-items align-content
flex item에서 사용하는 CSS 속성들
order flex-grow flex-shrink flex-basis align-self
flex container 속성
flex-flow
flex-flow는 flex-direction과 flex-wrap을 단축해서 정해놓은 것이다.
flex-direction : 안에 아이템을 어떻게 배치할 것인가. 수직으로 쌓을건지, 왼쪽에서 오른쪽으로 쌓을 것인지 등
flex-wrap : 안에 있는 아이템이 container를 벗어나게 되면 어떻게 처리할 것인지 속성.nowrap,wrap
.item {
flex-flow: row nowrap;
}justify-content
주축에서 어떻게 아이템을 배치할 것인지 하는 속성이다. 가장 많이 쓰는 속성이 아닐까 싶다.
justify-content: center;
justify-content: start;
justify-content: end;
justify-content: flex-start;
justify-content: flex-end;
justify-content: left;
justify-content: right;align-items, align-contents
이 두 개는 교차축에서 어떻게 아이템을 배치할 것인지에 대한 속성이다.
하는일은 완전히 같은데 뭐가 다른 건지는 그냥 이렇게 머리에 박고 넘어가면 된다.
align-contents는 두 줄 이상일때만 쓴다.
flex Item 속성
flex-item에서는 float, vertical-align,clear과 같은 속성은 무시된다.
order
order는 말 그대로 명확하다. 순서를 지정할 수 있다.
<div class="myflex">
<div class="flex-item" style="order:3;">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>flex-shrink, flex-grow, flex-basis
flex-item의 속성중에서 가장 많이 쓰이는 것이다.
- flex-grow는 부모 컨테이너에 여분의 공간이 남아있다면 해당 아이템을 확장할건지 설정한다. default:0
- flex-shirink는 여분의 공백이 없다면 축소해야하는지 설정한다. default:1
- flex-basis: 이 아이템의 초기 크기를 지정한다. default:auto
flexbox item에 아무런 설정을 하지 않으면
li {
flex: 0 1 auto;
}라고 생각하면 된다. 즉 축소되는건 auto인데 확장은 기본이 아니다. 이걸 이용해서 유용한 레이아웃들을 많이 짤 수 있다.
여기를 참고하자. flexbox를 이용해서 레이아웃 짜기이다.
align-self
마지막으로 align-self가 있다. 이 속성은 flex-container에 부여했던 align-item이나 align-contents의 속성을 오버라이딩하는 효과를 준다.
<div class="myflex" style="align-itmes:flex-start;">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item" style="align-self:flex-end;flex-basis:10vw;">
align-self: flex-end
</div>
</div>