Flex => '유연한' 박스 레이아웃을 잘 만들 수 있게 고안된 스펙
기존의 float, inline-block을 사용하는 레이아웃보다 훨씬 강력하고 편리한 기능 많다
Grid => Flex보다 더 강력하고 많은 기능을 제공하는 최신 스펙. Flex로 되는 건 대부분 Grid로도 구현 가능하기 때문에 상위호환으로 생각하는 경우가 많음
-
그리드로는 구현이 어렵지만 Flex로는 쉽게 구현할 수 있는 경우도 있음
-
그리드보다는 플렉스가 더 사용하기가 간단함
-
두 개의 특징을 잘 알아두고 적재적소에 사용하는 게 중요
[실습]
부모 요소 => flex container
자식 요소 => flex item
컨테이너에 적용하는 속성과 아이템에 적용하는 속성이 따로 있음
부모 요소에 적용하는 속성
display:flex를 적용한 결과 (flex의 기본 동작)
[블럭 엘리먼트인 div들이 인라인처럼 나란히 배치되고 차지하고 있는 폭도 꽉 차있었던게 각자의 contents만큼의 폭을 가지게 바뀜]
flex의 장점 : column 디자인할 때 좋음
알아야 할 용어
축!
flex item이 배치된 방향의 축 : 메인축(main axis)
메인축과 수직이 되는 방향의 축 : 교차축(cross axis), 수직축
가로축 세로축이 아님! (flex-direction: column이면 세로축이 메인축이니까)
떡꼬치라고 생각하셈 (꼬챙이 = 메인축, flex item = 떡)
flex-direction => 가로/가로거꾸로/세로/세로거꾸로 4가지 있음. 순서는 왼쪽에서 오른쪽 (언어를 따라감)
flex-wrap : 아이템의 총합보다 컨테이너의 크기가 작을 때 줄바꿈 어떻게 할지 설정
nowrap: 기본값. 컨텐츠가 길어지면 컨테이너를 넘어감 (컨테이너가 뻐팅김)
wrap: 컨텐츠가 길어지면 컨테이너가 늘어남 (가로 길이가 늘어나든 세로 길이가 늘어나든, 컨텐츠를 포함할 수 있는 크기가 되고, 컨텐츠는 줄바꿈됨)
wrap-reverse : wrap과 같지만 배치 순서가 뒤집힘
flex-direction과 flex-wrap을 동시에 같이 쓸 수 있는 flex-flow
사용예시
flex-flow: row wrap;
flex-flow: column wrap-reverse;
두개를 한번에 쓸수있는 축약형임
[지금까지 배운걸로 반응형 만들어보자]
flex나 grid (특히 grid)는 파폭으로 연습하면 좋다 (플렉스/그리드를 위한 특별한 기능이 있음 (레이아웃 가이드 등...)
그리드는 코딩할 때 몇째줄 몇째칸인지 알아보기 힘들어서 이런 기능이 유용함
-미디어 쿼리! 라는 걸 썼다! (화면이 특정 크기일 때 특정 스타일을 적용한다! 이걸로 반응형 만드는듯)
<style>
@media (min-width: 600px) {
.flex-container {
display: flex;
}
}
</style>기본 스타일에도 플렉스를 적용하고 media가 발동하면 바뀌게 할 수도 있으
<style>
.flex-container {
display: flex;
flex-direction: column;
}
@media (min-width: 600px) {
.flex-container {
display: flex;
flex-direction: row;
}
}
</style>justify => 메인 축 위에서 떡을 정렬하는 것 (떡 뽑아먹는 방향)
align => 수직 축 방향에서 떡을 정렬하는 것 (떡 뜯어먹는 방향)
가로정렬, 세로정렬이라고 정해져있는 게 아님!! 메인 축 방향이 바뀌면 이것도 반대가 됨
=> 제일 처음 배울 때 맨날 justify가 가로인지 세로인지 헷갈리는 이유. 가로도 세로도 아님!! main axis가 세로면 justify는 세로 정렬이 되고, 가로면 가로 정렬이 되는 것
justify-content : 컨텐트를 메인축 방향에서 정렬
flex-start : 시작 위치
flex-end : 시작 위치 반대
center : 가운데
space-between : 사이에 공간 두기 (양끝에 붙고 사이의 공간 균일하게 나눠가짐)
space-around : 주변에 공간 두기 (아이템들이 동일한 크기의 주변 공간을 양 끝마다 가짐 = 아이템A(좌10우10) 아이템B(좌10우10) 이런 식으로)
space-evenly : 모두 동일한 크기의 사이 여백을 가짐
space-evenly는 ms계열 브라우저에서는 지원하지 않으니 주의
보통은 space-between, space-around 많이 씀
align-content : 여러 행 정렬!
flex-wrap: wrap;이 설정된 상태 (줄바꿈이 있는 상태)에서, 아이템들의 행이 2줄 이상 되었을 때 수직축 방향 정렬을 결정하는 속성
stretch : 기본값 (컨테이너에 맞춰서 수직축 방향으로 아이템 길이를 늘림)
flex-start : 시작 위치 기준으로
flex-end : 끝 위치 기준으로
center : 가운데
space-between : 양 끝방향에 붙이고 사이에 중간 행들을 놓음 (첫행과 마지막행을)
space-around : 각 행이 각각 동등한 여백 공간을 가짐
space-evenly : 각 행 사이 공간이 모두 똑같은 크기를 가짐
align -> 수직 축 위에서 떡을 정렬하는 것 (떡 뜯어먹는 방향)
align-items : 기본값은 stretch(아이템 크기를 맞춤으로 늘려버림)
flex-start : 시작부분 기준
flex-end : 끝부분 (시작 반대편) 기준
center : 중앙 정렬 (굉장히 많이 씀)
baseline : 텍스트 베이스라인 기준으로 정렬
justify-content: center;
align-items: center;
보통 이런 식으로 가운데 정렬 시킨다. 익숙하다!
자식 요소 (flex item)에 적용하는 속성들
flex-basis : 아이템이 가지는 기본 크기를 메인 축 기준으로 설정한다고 생각하면 됨 (근데 width, height랑은 다름...)
flex-basis: 100px (메인 축 기준으로 기본 크기가 100px)
width와의 차이는?
width: 100px이면 아이템의 컨텐츠 길이와 상관없이 무조건 100px로 맞춰버림
flex-basis가 100px이면 아이템의 컨텐츠 길이가 작아도 크기가 '최소 100px'로 맞춰짐 (컨텐츠 길이가 길어지면 늘어남)
둘 다 설정하면? => flex-basis가 적용되는듯?
flex-grow : 유연하게 늘리기
아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성
숫자값이 들어가며, 0보다 큰 값이 세팅되면 해당 아이템이 유연한(flexible)박스로 변하고 원래의 크기보다 커지면 빈 공간을 메우게 됨
기본값은 0
flex-grow에 들어가는 숫자의 의미 : 아이템들의 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가진다.
늘어날 수 있는 한계 : 내 부모의 width
flex-shrink : 유연하게 줄이기 (flex-grow와 세트!) 아이템이 flex-basis의 값보다 작아질 수 있는지 결정
0보다 큰 값이 세팅되면 아이템이 유연한 박스로 변하고 flex-basis보다 작아질 수 있게 됨
기본값이 1이라서 따로 세팅하지 않아도 활성화되어있음
숫자값 의미 = > 줄어들 때 몇대몇으로 줄어드느냐
flex-shrink : 0; => 안줄어든다! 아무리 컨테이너가 짜그라들어도 안줄어든다
flex-basis는 단독으로는 잘 안쓰고 다른 속성들을 같이 설정할 수 있는 축약형을 사용할 때 많이 쓴다고 했는데, 그 다른 속성이 flex-grow, flex-shrink임 (flex: 0 1 10 이따구로 쓰는 거 본거같다)
flex-basis, flex-grow, flex-shrink 는 세트다!
flex : 그로우; 쉬링크; 베이시스;
flex: 1;로 설정하면?
flex-grow : 1; flex-shrink: 1; flex-basis: 0%;
flex-basis를 생략해서 쓰면 flex-basis값은 0이 된다! (기본값은 auto)
flex: 1 500px;
grow 1 shrink 1 basis 500px
다단컬럼같은 거 만들때는 flex-grow보단 width로 설정하는 게 더 확실함 (flex는 강제적으로 줄이거나 하지는 않기 때문에...)
엄청 긴 문단을 nowrap으로 넣어놓고 각각 설정했을 때
flex-grow 설정 => 아이템 크기를 줄이지 않고 줄바꿈없이 쭉~~~보여줌 = 아이템 크기가 엄청 커짐
width: 20%로 설정하면? => 아이템 크기를 20%로 강제하고, 내용이 삐져나오든 말든 신경안씀
flex-grow를 이용하든 basis를 이용하든 width를 이용하든 구현하는데는 상관이 별로 없는데, 아이템 내용이 넘치는 걸 대비해서 width로 설정하는 게 일반적이다
그럼 grow basis같은건 어따쓰냐? => 쓰는데가 따로 있다
(...flex grow, basis 사용예시 설명...)
어디다 뭘 써야되는지 정답은 없다! (그래서 어려움...)
각 속성들의 특징을 잘 파악해야 잘 쓸 수 있다
다단 컬럼 만들기
flex-basis의 기본값은 auto다.
=> auto가 뭐냐? = width를 basis로 가진다 (내가 설정한 width가 있다면 그 값을 basis로 가지는 것)
flex-item에 flex: 1 1 auto를 줬는데, 그 상태에서 flex-item의 width가 50%로 설정되면 자연스럽게 flex-basis가 50%가 되어 작동하는 것
basis 명시 안하면 0%되는거 생각할것
3단컬럼 만들 때 flex-item width를 33.33333%로 안하고 27%, 30%처럼 애매한 값으로 설정해도 대충 알아먹고 작동하는 이유 => flex-grow가 1이니까 (flex-grow: 1이면 내 width가 모자라도 알아서 늘어나서 빈부분을 채우니까! 27%로 설정하면 지알아서 늘어나서 33.3333333...%로 만드는거)
유용한 기법들
auto-margin
ABC에 있으면 C에다가 (혹은 라스트차일드에다가) margin-left: auto로 두면? => c만 끝에 감 (마진auto는 남아있는 마진을 다 점유해버림)
이거 어디서 썼냐? 메인프로젝트때 nav만들면서 로그아웃버튼이랑 만들기버튼 nav 맨아래로 꼬라박는데 썼다
고정폭 컬럼과 가변폭 컬럼 혼합
flex를 이용하면 쉽게 만들 수 있따
123 있으면, 1번(width 150px) 3번(width 200px)로 설정하고 flex-shrink 꺼버리면(flex: 0 0 auto;)=>2번은 가변폭을 갖고(flex-grow 1설정해주기), 1 3번은 고정폭을 가진 레이아웃을 만들 수 있다
footer를 창 바닥에 붙이기
컨텐트에다가 flex-grow 설정하기 (flex: 1 auto;) + 페이지에 min-height: 100vh 설정하기
=> 페이지가 100vh를 차지하고, 컨텐트는 여백을 모두 점유해서 쫙 늘어나고 푸터는 자연스럽게 맨 아래에 갖다박힘
IE버그
IE에서는 위에서 한거 적용 안됨 (min-height => height로 바꾸면 적용됨...근데 이상함)
개별 아이템 속성
align-items => 아이템들을 통째로 수직축 방향 정렬
align-self => 특정 아이템을 개별적으로 수직축 방향 정렬
order => 시각적 나열 순서 결정하는 속성 (숫자가 작을 수록 먼저 배치) / 시각적인 나열 순서일 뿐 HTML 구조는 그대로이므로 접근성 측면에서 주의해야 함 (스크린리더 쓰는 사용자라든가...)
z-index => Z축정렬시킴 (포토샵의 레이어랑 비슷하게)
