CSS 9. 플렉스 박스
플렉스박스
등장 배경
- 더 다양한 레이아웃을 만들고자 고안된 기법
- flex : 유연한
- 화면 레이아웃을 유연하게, 자유자재로 배치할 수 있게 해줌.
- 기존에 사용했던 블록 레벨 요소, 인라인 레벨 요소 방식보다 훨씬 강력하고
편리한 기능이 많음.
플렉스박스로 정렬하기
1) flexbox
- 사용자 인터페이스 디자인에 최적화된 레이아웃을 정의하는 CSS임.
- 이미지, 텍스트 같은 요소를 원하는 곳에 배치하는 데 사용함.
- 여백을 없앨 뿐만 아니라 축을 변경한다든지, 자식간의 정렬을 가운데 정렬등 가능
- 유연하게 박스 레이아웃을 변경할 수 있음.
- 두축(주축, 교차축)을 기준으로 움직이기 떄문에 축 방향을 기준으로 요소를
움직일 수 있음.
제 1원칙
- 부모만이 플렉스 할 수 있다.
- 꼭 부모 태그를 선택자로 지정해 줘야함.
- 자식 요소를 원하는 방향으로 유연하게 배치할 수 있음.
2) 표시
<style>
적용 대상 태그
---
body{ display: flex;}
</style>
3) 공간에 맞추기
- display flex
4) 주축 정렬하기
justify-content 속성
- 웹 페이지의 축을 따라 요소 사시에 공간을 만드는 방법을 정의함.
축 : 주축, 교차축
- 별도 설정이 없다면 주축은 가로, 교차축은 세로를 기본값으로 가짐.
flex -start
- 시작 부분에 정렬
justify-content: flex-start;
flex -end
- 끝 부분에 정렬
justify-content: flex-end;
conter
- 태그의 주축을 중앙에 정렬
justify-content: center;
space-between
- 요소가 축을 따라 펼쳐짐 ( 각 요소 사이에 공간이 있음 )
- 자식요소가 균등한 간격으로 정렬됨.
justify-content: space-between;
space-around
- 요소가 축을 따라 펼쳐지지만 가장자리 주변에도 공간이 있음.
justify-content: space-around;
Flex Container
display
- Flex Container의 화면 출력(보여짐) 특성
- flex : 블록 요소와 같이 Flex Container 정의
- inline-flex : 인라인 요소와 같이 Flex Container 정의
flex-direction
- 주 축(main-axis)을 설정
- row : 행축(좌=>우), default값
- row-reverse : 행축(우=>좌)
flex-direction: column;
justify-content
주 축의 정렬 방법
- flex-start : Flex Items를 시작점으로 정렬
- flex-end : Flex Items를 끝점으로 정렬
- center : Flex Items를 가운데 정렬
- space-between : 각 Flex Items 사이를 균등하게 정렬
- space-around : 각 Flex Items의 외부 여백을 균등하게 정렬
flex-wrap
flex-wrap: wrap;
- Flex Items 묶음(줄 바꿈) 여부
- nowrap : 묶음 없음. default 값
- wrap : 여러 줄로 묶음
- wrap-reverse : wrap의 반대방향으로 묶음
5) 교차축 정렬하기
align-content
교차 축의 여러 줄 정렬 방법
- stretch, flex-start : Flex Items를 시작점으로 정렬
- flex-end : Flex Items를 끝점으로 정렬
- center : Flex Items를 가운데 정렬
- space-between : 각 Flex Items 사이를 균등하게 정렬
- space-around : 각 Flex Items의 외부 여백을 균등하게 정렬
align-items
교차 축의 한 줄 정렬 방법
- stretch : Flex Items를 교차 축으로 늘림,
요소의 길이와 교차축의 길이를 같게 함. - flex-start : Flex Items를 각 줄의 시작점으로 정렬
- flex-end : Flex Items를 각 줄의 끝점으로 정렬
- center : Flex Items를 각 줄의 가운데 정렬
6) 순서 정렬하기
order
- Flex Items의 순서
- 0 : 순서 없음
- 숫자 : 숫자가 작을수록 먼저
#box1 {order: 2;}
#box2 {order: 3;}
#box3 {order: 1;}
...
<body>
<div id="container">
<div id="box1"><h2>box1</h2></div>
<div id="box2"><h2>box2</h2></div>
<div id="box3"><h2>box3</h2></div>
</div>
</body>
...
댓글남기기