[css] flex

inline-block은 박스들을 원하는 위치에 정렬하기 힘들고, 간격을 수동적으로 맞춰야 한다는 단점이 있다.

이를 보완하기 좋은 레이아웃이 flex이다.

html

body 안에 div 4개를 만들었다.

위 코드의 결과화면

div는 block 이므로 위와 같이 세로로 정렬된다.

div안에 쓴 숫자도 왼쪽 위에 정렬된다.

여기에 display : flex; 를 적용하면 block 인 div를 옆으로 정렬할 수 있다.

flex를 사용하는 방법

1. 박스들의 부모요소에  display:flex; 적용

=> 부모요소가 flex container가 됨.

body 에 display추가

div 박스들을 flexbox로 만들기 위해서는 모든 div의 부모요소에 display:flex;를 줘야 한다.

현재 body 아래에 div가 있으므로 모든 div의 부모요소는 body이다.

위 코드의 결과

위와 같이 body 태그의 css에 display:flex; 만 추가해도 박스들이 옆으로 정렬된다.

 

2. 부모요소에 프로퍼티 적용

flex 에 적용하는 속성들은 수동으로 margin, padding 등 크기를 조정할 필요 없이

박스 간 공간의 간격을 자동 조절해주고, 스크린 크기가 변해도 상관없이 적용된다.

justify-content 프로퍼티

• center : 중앙 정렬
• flex-end : 오른쪽 정렬
• flex-start : 왼쪽 정렬
• space-evenly : 박스간 간 간격이 같게 정렬

주축 (main axis) 상에서 박스들을 움직인다.

justify-content:center

justify-content 프로퍼티에 center 값을 주면 수평선 상에서 가운데에 박스들이 정렬된다.

위 코드의 결과

align-items 프로퍼티

• flex-end : 아래쪽 정렬
• center : 중앙 정렬
• flex-start : 위쪽 정렬

교차축 (cross axis) 상에서 박스들을 움직인다.

align-items:center

align-items 프로퍼티에 center 값을 주면 아래와 같이 수직선 상에서 가운데에 박스들이 정렬된다.

위 코드의 결과

flex-direction 프로퍼티 : 주축과 교차축을 바꿀 수 있다.

• row : default

default일 때 주축이 수평선(x축), 교차축이 수직선(y축) 이 된다.

=> justify-content가 수평에 align-items가 수직에 적용

• column : row 와 반대로 주축이 수직, 교차축이 수평이된다.

=> justify-content가 수직에 align-items가 수평에 적용

• column-reverse : 아래 -> 위로 순서가 바뀐다.
• row-reverse : 오른쪽 -> 왼쪽 으로 순서가 바뀐다.

* 어떤 프로퍼티를 적용하든 부모요소인 body 에 썼다.

flex-wrap 프로퍼티 : flex들을 wrapping가능하게 할지말지 설정.

* wrapping : 창 크기에 따라 박스들이 줄 변경되는 현상.

• nowrap : 프로퍼티에 따라 가로, 세로길이를 변경됨.

width를 지정해도 초기 가로길이로만 받아들이고 width와 height 가 창 크기에 맞게 변한다.

• wrap : 박스의 width, height가 변하지 않는다.

창 크기를 줄이면 박스가 아래 줄로 내려간다.

• wrap-reverse : 창 크기를 줄이면 왼쪽부터 위로 올라간다.

 

3. 태그 안의 텍스트도 flexbox로 사용가능

div 에 flex 를 적용하면 div가 flex container가 되고, div의 자식요소인 텍스트 1, 2, 3, 4 가 flexbox가 된다.

div에 flex

div의 css 에 먼저 display:flex; 를 준 후, 

justify-content 와 align-items 모두 center 값을 줬다.

위 코드의 결과

div의 자식요소인 div 태그 안의 숫자들이 flex container인 div 안에서 center에 정렬됐다.