플렉스 박스 레이아웃 (1차원 레이아웃 설계하기)

 

 

 

---

 

1차원 레이아웃은 어떻게 설계할까?

 

 

---

 

 

 

 

플렉스 박스(Flex box) 레이아웃

 

--

플렉스 박스 레이아웃은

1차원(단일 방향) 방식으로 레이아웃을 구성할 때 유리한 방식으로

주로 가로(row) 또는 세로(column) 방향으로 배치하여 레이아웃을 설계하는 데 사용된다.

 

 

레이아웃 확인 방법은
일반적으로 웹 브라우저에서 지원하는 방법을 통해 플렉스 레이아웃을 확인할 수 있다.
ex. 크롬에서는 개발자 도구를 통해 "Elements"탭에 작성된 코드르 보면
플렉스 박스 레이아웃이 적용된 HTML 요소 옆에 "flex 아이콘"이 존재한다.

--

 

 

 

 

기본 구성

 

--

핵심 속성

 

display 속성

모든 플렉스 박스 레이아웃은

display 속성값을 "flex"나 "inline-flex"로 지정하는 것으로 시작된다.

 

기본 형식

display: flex;
/* 또는 */
display: inline-flex;

• flex  :  적용된 요소의 다음 요소가 항상 줄 바꿈
• inline-flex  :  다음 요소가 주변에 배치

display 속성이 정의된 요소가 "플렉스 컨테이너"가 되며,
해당 요소의 자식 요소는 "플렉스 아이템"이 된다.

 

예시 코드

<style>
    .flex-container{
        width:500px;
        height:300px;
        background-color: lightgray;
        border: 2px solid black;
        display: flex;
    }
    .div-1 {
        background-color: yellow;
    }
    .div-2 {
        background-color: yellowgreen;
    }
</style>
    
<!-- 생략 -->

<div class="flex-container">
    <div class="div-1">item1</div>
    <div class="div-2">item2</div>
    <div class="div-1">item3</div>
    <div class="div-2">item4</div>
</div>

플렉스 박스 레이아웃의 기본 특징은
플렉스 아이템이 가로 방향으로 배치된다.
이때, 플렉스 아이템이 원래 가지고 있던 성격(인라인, 인라인 블록, 블록)은 무시된다.

 

 

flex-direction 속성

플렉스 박스 레이아웃의 주축 방향을 결정한다.

 

기본 형식

flex-direction: 속성값;

 

예시 코드

.flex-container{
    width:500px;
    height:300px;
    background-color: lightgray;
    border: 2px solid black;
    display: flex;
    flex-direction: row-reverse;
}

 

 

 

flex-wrap 속성

플렉스 아이템이 플렉스 컨테이너 영역을 벗어날 때 어떻게 처리할지 결정하는 속성이다.

 

기본 형식

flex-wrap: 속성값;

 

예시 코드

.flex-container{
    width:500px;
    height:300px;
    background-color: lightgray;
    border: 2px solid black;
    display: flex;
    flex-wrap: wrap;
}

플렉스 아이템에 크기를 정의하지 않아서
첫 번째 줄과 두 번째 줄에 나열된 플렉스 아이템(div)의 너비가 남은 공간에 따라 달라진다.

 

 

 

flex-flow 속성

"flex-direction" 속성과 "flex-wrap" 속성을 한 번에 사용할 수 있는 단축 속성이다.

 

기본 형식

flex-flow: flex-direction flex-wrap;

 

예시 코드

flex-direction: column;
flex-wrap: nowrap;

flex-flow: column nowrap;

--

 

 

 

 

플렉스 박스 레이아웃의 정렬 속성 (플렉스 아이템 정렬)

 

--

justify-content 속성

플렉스 아이템을 주축 방향으로 정렬할 때 사용하는 속성이다.

 

기본 형식

justify-content: 속성값;

 

예시 코드

.flex-container{
    width:500px;
    height:300px;
    background-color: lightgray;
    border: 2px solid black;
    display: flex;
    justify-content: flex-start;
}

 

 

 

align-items & align-content & align-self 속성

플렉스 아이템을 교차축 방향으로 정렬할 때 사용하는 속성이다.

 

• align-items   :   플렉스 아이템을 교차축 방향으로 정렬
• align-content   :   플렉스 아이템이 "flex-wrap" 속성으로 인해 두 줄 이상이 될 때만 사용
• align-self   :   플렉스 아이템을 개별적으로 교차축 방향으로 정렬

 

기본 형식

align-items: 속성값;

align-content: 속성값;

align-self: 속성값;

 

 

예시 코드

.flex-container{
    width:500px;
    height:300px;
    background-color: lightgray;
    border: 2px solid black;
    display: flex;
    align-items: flex-end;
}

 

.flex-container{
    width:500px;
    height:300px;
    background-color: lightgray;
    border: 2px solid black;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

 

.flex-container{
    width:500px;
    height:300px;
    background-color: lightgray;
    border: 2px solid black;
    display: flex;
}

.div-1 {
    background-color: yellow;
    align-self: flex-start;
}
.div-2 {
    background-color: yellowgreen;
    align-self: flex-end;
}
.div-3 {
    background-color: lightcoral;
    align-self: center;
}
.div-4 {
    background-color: lightpink;
    align-self: baseline;
}

--