Material UI를 활용해서 FlexBox 레이아웃을 적용하기위해 미리 학습한 내용들을 정리해 본다.
우선 Material UI에서는 레이아웃을 위한 컴포넌트가 세가지가 있다.
-
Box : Box컴포넌트는 style toolbox이다. tailwind CSS 방식을 좋아하는 사람들에게 유용하다. css를 작성하는 대신 Box style의 props을 사용할 수 있다.
-
Grid : Grid컴포넌트는 Container 안의 레이아웃을 핸들링해준다. CSS flexbox 모델의 추상화이다. item-spacing, responsive colums handling 이 두가지 흥미로운 특징을 갖고있다.
-
Container : Container컴포넌트는 메인 레이아웃 컴포넌트로 사용되어야 한다. 최소한의 패딩이 양쪽 옆으로 설정되어있다. 화면이 큰 경우, 수평적으로 중심에 컨텐츠들이 위치한다.
✔︎ Grid Container와 Container 컴포넌트를 교환해서 사용할수는 없다.
✔︎ Gird Container는 flex container이고, Container 컴포넌트는 페이지의 최상위 엘레먼트이다.
Flex container의 특성
display
flex 컨테이너를 정의해 준다. 주어진 값에 따라 인라인 혹은 블록이다.
직접적인 모든 자식들을 flex 문맥을 사용가능하게 해준다.
.container {
display: flex; /*on inline-flex*/
}CSS Column은 flex container의 영향을 받지 않는다.
flex-direction
이것은 주 방향을 설정한다 그러면 flex item들이 flex container에 방향대로 위치한다.
Flexbox는 단방향의 레이아웃 개념이다.(wrapping 개념을 제외하고)
.container {
flex-direction: row | row-reverse | column | column-reverse;
}flex-wrap
기본적으로, 모든 flex item들이 첫 줄에 맞추려고 할 것이다. wrap을 사용해서 이 속성을 변경할 수 있다.
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}- nowrap (default): all flex items will be on one line
- wrap: flex items will wrap onto multiple lines, from top to bottom.
- wrap-reverse: flex items will wrap onto multiple lines from bottom to top.
flex-flow
flex-direction과 flex-wrap 특성의 flex container의 주축과 교차축을 함께 정의하는 간단한 방법이다.
.container {
flex-flow: column wrap;
}justify-content
이것은 주축의 정렬을 정의한다. 한 줄의 모든 flex item들이 유연하지 않거나 유연하지만 최대 크기에 도달했을 때 남는 여유 공간을 분산하는데 도움이 된다. 또한, item들이 선을 넘었을때 어느정도 제어해준다.
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}-
flex-start (default): items are packed toward the start of the flex-direction.
-
flex-end: items are packed toward the end of the flex-direction.
-
start: items are packed toward the start of the writing-mode direction.
-
end: items are packed toward the end of the writing-mode direction.
-
left: items are packed toward left edge of the container, unless that doesn’t make sense with the flex-direction, then it behaves like start.
-
right: items are packed toward right edge of the container, unless that doesn’t make sense with the flex-direction, then it behaves like start.
-
center: items are centered along the line
space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line -
space-around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.
-
space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal.
위의 값들은 브라우저에 따라 지원이 미묘하게 달라질 수 있다.
안전한 값은 flex-start, flex-end, center이다.
safe/unsafe 키워드
safe 키워드를 사용하게되면 엘레멘트를 off-screen(off the top)에 렌더시키거나 내용들이 스크롤되지 않게(data loss) 해준다.
algin-items
현재 라인의 횡축을 따라 flex item들이 어떻게 배치되는지에 대한 정의다.
justify-content의 세로 버젼이라고 생각하면 된다.
.container {
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}- stretch (default): stretch to fill the container (still respect min-width/max-width)
- flex-start / start / self-start: items are placed at the start of the cross axis. The difference between these is subtle, and is about respecting the flex-direction rules or the writing-mode rules.
- flex-end / end / self-end: items are placed at the end of the cross axis. The difference again is subtle and is about respecting flex-direction rules vs. writing-mode rules.
- center: items are centered in the cross-axis
baseline: items are aligned such as their baselines align
safe/unsafe 키워드들은 다른 나머지 키워드들과 같이 사용될 수 있다. 그리고 내용에 접근할수 없도록 엘레멘트 정렬하는것을 방지해 준다.
align-content
flex container의 라인에서 교차축에 여유 공간이 있을경우 정렬을 도와준다. justify-content가 주축 안의 개별 item들을 정렬하는 것과 유사하다.
✔︎ item들이 한줄에 있으면 영향을 미치지 않는다.
.container {
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}-
flex-start / start: items packed to the start of the container. The (more supported) flex-start honors the flex-direction while start honors the writing-mode direction.
-
flex-end / end: items packed to the end of the container. The (more support) flex-end honors the flex-direction while end honors the writing-mode direction.
-
center: items centered in the container
-
space-between: items evenly distributed; the first line is at the start of the container while the last one is at the end
-
space-around: items evenly distributed with equal space around each line
-
space-evenly: items are evenly distributed with equal space around them
-
stretch (default): lines stretch to take up the remaining space
The safe and unsafe modifier keywords can be used in conjunction with all the rest of these keywords (although note browser support), and deal with helping you prevent aligning elements such that the content becomes inaccessible.
Flex item의 특성
order
기본적으로 flex item들은 소스 순서에 따라 배열되지만, order 특성이 어떤 순서로 나타내줄지 통제한다.
flex-grow
flex item이 늘어나는게 필요할 경우 정의된다.
단위가 아니라 비율의 형태로 제공되고, flex container 안의 공간이 얼마나까지 사용가능한지 규정한다.
만약 모든 아이템들이 flex-grow가 1로 설정된 경우, container의 남는 공간들이 동등하게 나눠질 것이다.
하나의 아이템이 2로 설정됬다면, 남은공간을 다른 아이템들보다 2배 더 많이 갖을 것이다.
.item {
flex-grow: 4; /* default 0 */
}flex-shrink
만약에 flex item이 수축이 필요할 경우 정의된다.
.item {
flex-shrink: 3; /* default 1 */
}flex-basis
남는 공간을 나누기 전에 기본적인 공간을 정의한다. 길이(e.g.20%, 5rem, etc.) 혹은 키워드가 될 수 있다.
기본값인 auto는 나의 넓이나 길이 프로퍼티를 확인하라는 의미이다.(main-size키워드가 사용되지 않을때까지 일시적으로 수행된다.) content키워드는 아이템 콘텐츠에 따라 사이징한다는 뜻인데 아직은 잘 지원되지 않아 테스트가 어렵다.
.item {
flex-basis: | auto; /* default auto */
}
만약에 0으로 설정하면, 콘텐츠 주변의 추가 공간이 고려되지 않는다. 자동으로 설정하면 추가공간이 flex-grow의 값 증가에 따라 나눠진다.
flex
flex-grow, flex-shrink, flex-basis가 결합된 특성이다.
두번째와 세번째 파라미터인 flex-shrink와 flex-basis는 선택적이다.
기본값은 0 1 auto이며, 숫자값만 사용한다면 1 0과 같다.
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
이 shorthand property는 다른 값들을 지능적으로 적용해주기 때문에 개별적인 특성들을 일일히 적용하는것보다 추천한다.
align-self
이 특성은 개별적인 flex item들에 기본정렬(혹은 align-items에 의해 특정된 한가지 아이템)을 덮어쓰게 해준다.
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}float, clear, vertical-align은 flex item에 영향을 끼치지 않는다.
References
