CSS 플렉스 박스 레이아웃 (flexible box layout)
CSS layout
CSS 에서 layout 이란 사이트 전체 디자인이나 배열을 일관성 있게 재배치 가능하게 하는 기능을 말한다.
일반적으로 웹 사이트는 수직으로 구성된 레이아웃이기 때문에 위아래로 스크롤하게 되어있다.
웹 페이지를 구성할 때 웹 요소들이 block 개념으로 dispay 되며 이 요소들은 위에서 아래로 쌓이기 때문에 수직 구성의 레이아웃은 쉽게 만들 수 있다.
수평 구성 레이아웃의 경우에는 table 이나 float inline-block 속성으로 만들 수는 있지만, 명확하게 정해져 있지 않아 다양한 문제들에 직면할 수 있다.
이러한 수직, 수평 구성 레이아웃을 만드는 방법은 세가지정도가 있다.
CSS 박스모델의 레벨 속성을 이용한 layout
📌 block-level 과 inline-level 엘리먼트들을 자유롭게 배치하여 레이아웃을 만든다.
displaypositionfloat속성을 사용
플렉스 박스 레이아웃 (flex box layout)
📌 수직 또는 수평을 주축으로 하여 flex item 들을 flex container 에 자유롭게 배치하여 레이아웃을 만든다.
12개의 속성들이 플렉스 컨테이너에 적용하는 속성과 플렉스 아이템에 적용하는 속성으로 분류된다.
CSS 그리드 레이아웃 (css grid layout)
📌 수직 수평 상관없이 퍼즐 맞추듯 grid item 을 grid container 에 자유롭게 배치하여 레이아웃을 만든다.
15개의 속성들이 그리드 컨테이너에 적용하는 속성과 그리드 아이템에 적용하는 속성으로 분류된다.
첫번째 방법인 레벨 속성을 이용한 레이아웃은 css 박스모델 관련된 글로 정리했으니 두번째 방법인 플렉스 박스 레이아웃에 대해 정리해보자 !
플렉스 박스 레이아웃 (flex box layout)
수직 또는 수평을 주축으로 하여 flex item 들을 flex container 에 자유롭게 배치하여 레이아웃을 만든다. 명확하게 정해져 있지 않던 수평 구성 레이아웃을 만들 수 있게 하고, 수직 구성 레이아웃 또한 어려움 없이 만들 수 있게 한다.
<style>
.container {
display: flex;}
.item {
flex: 1;}
</style>
<html>
...
<div class="container">
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
</div>
...
</html>위 코드는 플렉스 박스 레이아웃을 사용할 때의 일반적인 구조를 의미한다.
여러개의 요소를 자식으로 두고 있는 부모 요소에 display: flex; 스타일을 적용시키게 되면 부모 요소는 flex container 가 되고, 자식 요소들은 flex item 이 된다.
각각 적용시키는 속성이 분류되기 때문에 컨테이너인 부모 요소와, 아이템인 자식 요소를 구분하여 해당 요소에 맞는 속성을 적용시키는 것이 중요하다.
flex box 의 구조
flex box 는 플렉스 아이템 flex item 들을 감싸는 플렉스 컨테이너 flex container 와, 수평방향인 주축 (main axis) 과 주축 시작점 (main start) , 주축 끝점 (main end) 그리고 수직방향인 교차축 (cross axis) 과 교차축 시작점 (cross start) , 교차축 끝점 (cross end) 로 구성된다.
flex container 의 속성
| 속성 | 속성값 | 설명 |
|---|---|---|
| display | flex | 컨테이너를 block 레벨로 정의 |
| inline-flex | 컨테이너를 inline 레벨로 정의 | |
| flex-flow | flex-direction 과 flex-wrap 의 단축형 속성 | |
| flex-direction | row | 아이템의 주축을 가로로 지정 (왼쪽-오른쪽으로 배치) |
| row-reverse | 아이템의 주축을 가로로 지정 (오른쪽-왼쪽으로 배치) | |
| column | 아이템의 주축을 세로로 지정 (위-아래로 배치) | |
| column-reverse | 아이템의 주축을 세로로 지정 (아래-위로 배치) | |
| flex-wrap | nowrap | 줄바꿈 하지 않음 (넘치면 삐져나감) |
| wrap | 줄바꿈을 함 | |
| wrap-reverse | 줄바꿈을 함 (역순으로) | |
| justify-content | flex-start | 주축의 시작점에 맞춰 아이템 정렬 |
| flex-end | 주축의 끝점에 맞춰 아이템 정렬 | |
| center | 주축의 중앙에 맞춰 아이템 정렬 | |
| space-between | 아이템들 사이에 균일한 여백을 두고 정렬 | |
| space-around | 아이템들 둘레에 균일한 여백을 두고 정렬 | |
| space-evenly | 아이템들 사이, 양끝에 균일한 여백을 두고 정렬 | |
| align-items (1줄) | strech | 아이템의 높이값이 교차축의 높이값에 따라 늘어남 |
| flex-start | 교차축의 시작점에 맞춰 아이템을 정렬 | |
| flex-end | 교차축의 끝점에 맞춰 아이템을 정렬 | |
| center | 교차축의 중앙에 맞춰 아이템을 정렬 | |
| baseline | 교차축의 문자 베이스라인에 맞춰 아이템을 정렬 | |
| align-content (2줄) | strech | 아이템의 높이값이 교차축의 높이값에 따라 늘어남 |
| flex-start | 교차축의 시작점에 맞춰 아이템을 정렬 | |
| flex-end | 교차축의 끝점에 맞춰 아이템을 정렬 | |
| center | 교차축의 중앙에 맞춰 아이템을 정렬 | |
| space-between | 아이템들 사이에 균일한 여백을 두고 정렬 | |
| space-around | 아이템들 둘레에 균일한 여백을 두고 정렬 | |
| space-evenly | 아이템들 사이, 양끝에 균일한 여백을 두고 정렬 |
display
Author And Source
이 문제에 관하여(CSS 플렉스 박스 레이아웃 (flexible box layout)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@cakecoder/CSS-플렉스-박스-레이아웃-flexible-box-layout-zqkkrrxp
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Author And Source
이 문제에 관하여(CSS 플렉스 박스 레이아웃 (flexible box layout)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@cakecoder/CSS-플렉스-박스-레이아웃-flexible-box-layout-zqkkrrxp저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
