https://flexboxfroggy.com/#ko
Flexbox Froggy
A game for learning CSS flexbox
flexboxfroggy.com
생각보다 재미있었던 개구리 flex게임
Flex
flexbox 혹은 flexible box라 불리는 flex는 아이템 공간 배분/정렬 기능을 제공하기 위한 기능이다.
(1차원 레이아웃 모델)
+ Flex 기능을 이용하여 Holy grail layout을 만들 수 있다.
flex가 있기 전에는 <table>로 했었다는 끔찍한 전설이....
우선, Flex를 사용하기 위해서는 꼭! Container역할을 하는 요소가 있어야 한다.
<container>
<item></item>
</container>요롷게 부모 역할의 container가 있어야 한다.
이 때, item의 width는 콘텐츠 크기로 정해지고, 높이는 container의 높이만큼 차지한다. (inline요소와 비슷)
그리고 여기서 container역할을 하는 요소 / item 역할을 하는 요소에 부여할 수 있는 속성은 각각 따로 정해져 있다. (아래에서 각각 쓸수 있는 속성들을 정리해 놓았다)
예를 들면,
flex를 사용하기 위해서는
1. display: flex;를 container역할 요소에 부여한다. (item역할 요소한테 ㄴㄴ)
2. flex-direction(아이템 정렬 방향)도 container역할 요소에 부여한다.
container{
display: flex;
flex-direction : column;
}이렇게!
여기서 flex-direction은 간단하게, 아이템 정렬이 가로(row)이냐, 세로(column)이냐를 나타낸다. 기본 설정은 가로(row)이다.
*flex 기능을 더 알기 위해서 알아야 할 지식이 있는데 바로 주축(Main Axis)과 교차축(Cross Axis)이다.*
위에서 말했듯이, flex-direction의 기본 값은 가로(row)이다. 여기서 주축은 row 방향을 따른다.
가로의 교차는? 세로(column)겠지. 그러니 flex-direction: row; 일 때, 주축은 가로, 교차축은 세로가 된다.
반대로, flex-direction: column; 일 때, 아이템 정렬은 세로로 되어있다.
그때 주축은 세로 방향(column)이고, 교차축은 반대로 가로 방향(row)이 되는 것이다.
Flex Container Properties(container에 부여할 수 있는 flex 속성들)
- flex-direction:
row - 가장 기본 방향. 오른쪽에서 왼쪽으로
row-reverse - row의 역순. 왼쪽에서 오른쪽으로 정렬
column - 세로 방향. 위에서 아래로
column-reverse - column의 역순. 아래에서 위로.
(이러한 기능들을 이용해서 모바일에선 column 정렬이었다가 폭이 넓어지면 row를 쓰는 반응형 레이아웃도 구현 가능하다..)
- flex-wrap:
nowrap;
wrap;
wrap-reverse;
나열된 item들의 총 넓이가 부모(container)보다 넓을 때 item들이 부모를 벗어나거나, 부모크기에 맞춰 축소되지 않도록 다음 줄에 이어서 정렬해주는 기능(감싸안는것)
flex-wrap을 설정해주지 않으면 기본값은 flex-wrap: nowrap;이다.
실제 사이즈인 분홍색 박스와 달리 같은 사이즈의 item 박스들이 container안에 다 들어가기 위해 축소된다. (혹은 container박스를 넘어가는 경우도 있다. 이 차이점은 다음에...)
wrap을 설정해 주었을 때는 부모 container안에서 item 박스들이 크기를 유지하며 정렬되어 있다. 아래는 코드.
<!DOCTYPE html>
<head>
<style>
.container{
width: 100px;
height: 200px;
border:2px solid black;
display:flex;
flex-wrap:wrap;
}
.container div{
width: 50px;
height: 50px;
}
.aside{
width: 50px;
height: 50px;
background-color: pink;
}
</style>
<title></title>
</head>
<body>
<div class="container">
<div style="background-color:orange;">A</div>
<div style="background-color: firebrick;">B</div>
<div style="background-color: slateblue;">C</div>
<div style="background-color: dodgerblue;">D</div>
<div style="background-color: limegreen;">E</div>
<div style="background-color: gray;">F</div>
</div>
<div class="aside">size</div>
</body>
만약에 item들에 개수가 많아서 부모요소에 다 담기지 못한다면..?
wrap-reverse;는 역순으로 정렬이 되는건데, wrap이 상단에서 정렬이 시작되었다면 wrap-reverse는 그와 반대로 하단에서 정렬이 시작된다.
- flex-flow:
flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성
e.g) flex-flow: column wrap;
- justify-content:
위에서 언급한 주축(Main Axis)을 기준으로 item 배열의 위치를 조종하거나 item 간의 간격을 설정할 수 있다.
flex-start; Axis 처음으로 정렬, 주축이 가로라면 가로 왼쪽으로 item정렬
flex-end; Axis 끝으로 정렬, 주축이 가로라면 가로 오른쪽으로 item 정렬
center; Axis 중간으로 정렬, 주축이 가로라면 중앙으로 item정렬
space-between; item간의 사이 균등하게 여백 주기
space-around; item의 네 면에 균등하게 여백 주기 / item 사이에 여백은 2배가 되어 더 넓어짐.
space-evenly; item의 네 면 + item간 사이 모두 균등하게 여백 / IE, Edge에선 지원 안됨...
space-between이나 space-around나, 일단 flex-wrap을 설정해 주어도 자식요소가 부모요소 크기에 여백없이 딱 맞게 들어 간다면 space가 적용되지 않는다....
- align-items:
justify-content와 다르게 교차축(Cross Axis)을 기준으로 item 배열의 위치를 지정할 수 있다.
stretch; 기본값. item의 크기가 정해져 있지 않으면 교차축 방향으로 끝까지 늘어난다.
flex-start; 교차축 처음으로 item들이 위치하게 된다.
flex-end; 교차축의 끝으로 item들이 위치한다.
center; 교차축의 중앙으로 item들이 위치하게 된다.
baseline; text의 베이스라인 기준으로 위치하게 된다.
*jusitfy-content: center;
align-items: center;를 설정하면
margin:0 auto; 처럼 정중앙에 위치 시킬 수 있으니 꼭! 외워서 써먹자.
- align-content:
flex-wrap:wrap;이 설정된 상태에서 item들의 행이 2줄 이상일 때, 교차축(Cross Axis) 방향 기준으로 정렬을 설정해주는 기능
아래는 위에 나왔던 것들과 기능 똑같으니 자세한 설명은 생략한다.
flex-start;
flex-end;
center;
space-between; - 아이템을 그룹으루 묶어서 그룹과 그룹사이로 인지
space-around;
space-evenly; (역시 IE와 Edge에서는 지원 안됨)
Flex Item Properties(item에 부여할 수 있는 flex 속성들)
- order:
item들의 나열 순서를 정할 수 있는 속성. 0(기준점)부터 시작해서 작은 숫자일 수록 먼저 배치된다. html 구조를 바꾸는 것이 아닌 오로지 "시각적" 순서를 나타내는 것이기 때문에 스크린 리더를 사용하는 시각장애인에게는 order의 적용은 의미가 없다.
order에 부여하는 숫자는 절대적인 위치를 나타내는 숫자가 아니라 "상대적"이다.
- flex-basis:
flex item들의 기본 크기를 설정. flex-direction에 따라 너비/높이중 하나가 설정된다. flex-basis를 설정하지 않으면 콘텐츠의 넓이만큼 크기가 설정 됌.
width:100px;
flex-basis:100px; 의 차이점? => width:100px;은 더 강제성이 있어 콘텐츠 크기에 상관없이 100px로 아이템 크기가 정해진다. flex-basis:100px;은 콘텐츠 크기 때문에 100px가 넘는 크기의 아이템을 억지로 100px로 맞추지는 않음. - flex-grow:
아이템들의 크기가 유연하게 커질 수 있게 하는 기능.
아이템들의 flex-basis크기에서 남은 여백을 얼만큼의 비율을 차지하며 커질것인지 정할 수 있다.
기본값은 flex-grow:0;
flex-basis:50px만 주고 flex-grow 값은 주지 않은 상태 
컨텐츠부분(글자)를 제외한 나머지 여백 비율이 1 : 2 : 1 : 1 item C 박스에는 flex-grow:2 나머지에는 flex-grow:1 값을 주었다. - flex-shrink:
flex-grow와 반대로 아이템 크기가 유연하게 작아지도록 설정하는 기능. 기본값은 flex-shrink:1;이다.
flex-shrink:0;으로 설정시 작아지지 않는다. - flex:
flex-basis + flex-grow + flex-shrink를 한번에 쓸 수 있는 축약형. - align-self:
부모의 align-items 속성보다 우선하여 개별 item 요소에게 align 속성을 부여하는 것. 기본값은 stretch이다.
아래는 flex에 대하여 설명이 잘 정리되어 있는 글이다.(영어주의)
'땀내 품긴 개발 노-트 > HTML, CSS' 카테고리의 다른 글
| flex 설정시 아이폰 카카오톡 링크 오픈 창에서 생기는 issue (0) | 2022.05.28 |
|---|---|
| [코드라이언] Flex 진화형 Grid -Day13- (0) | 2022.04.26 |
| [코드라이언] 선택자 심화 -Day12- (2) | 2022.04.23 |
| [코드라이언] Float의 단짝 Overflow -Day11- (0) | 2022.04.22 |
| [코드라이언] Text와 Position -Day10- (6) | 2022.04.20 |