display flex에 대하여~

Notice

Recent Posts

Recent Comments

Link

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Tags more

Archives

Today

Total

관리 메뉴

나의 개발일지

display flex에 대하여~ 본문

CSS

display flex에 대하여~

heew0n 2023. 10. 7. 00:25

display:flex

이미지 출처 : 이번에야말로 CSS Flex를 익혀보자 – 1분코딩 (studiomeal.com)

부모요소인 container를 flex container라고 부르고, 자식요소인 item을 flex item라고 부른다.

컨테이너가 Flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것

display 속성의 flex를 지정하여 해당 컨테이너(display 속성에 flex가 지정된 태그)의

아이템(하위태그)들을 유연하게 정렬시킬 수 있음

Flex의 속성들은

1. 컨테이너에 적용하는 속성

2. 아이템에 적용하는 속성

으로 나뉜다

코드 세팅

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <style>

 .container{
    background-color: beige;
    height: 100vh;
}
.item{
    height:  40px;
    width: 40px;
    border-radius: 5px;
    border: 1px;
    padding: 5px;
    margin: 2px;
}
.item1{
    background-color: red;
}
.item2{
    background-color: blue;
}
.item3{
    background-color: green;
}
.item4{
    background-color: rgb(97, 255, 244);
}
.item5{
    background-color: rgb(243, 255, 177);
}
.item6{
    background-color: rgb(251, 87, 172);
}
.item7{
    background-color: rgb(255, 203, 120);
}
.item8{
    background-color: rgb(70, 107, 50);
}
.item9{
    background-color: rgb(105, 39, 105);
}
.item10{
    background-color: rgb(95, 50, 138);
}

    </style>
</head>
<body>
    <div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item4">4</div>
        <div class="item item5">5</div>
        <div class="item item6">6</div>
        <div class="item item7">7</div>
        <div class="item item8">8</div>
        <div class="item item9">9</div>
        <div class="item item10">10</div>
    </div>
</body>
</html>

<div>는 block의 요소를 가지기 때문에 가로로 나란히 정렬되지 않고

줄바꿈이 되어 밑으로 아이템이 정렬된다

★ % vs vh(vw) 차이

% : 부모의 크키가 기준이고 100분의 1단위

vh(vw) : 뷰포트 크키가 기준이고 100분의 1단위, 즉 부모의 크기와 상관없다

flex-direction : row; vs column;
: 요소들 나열 방향 지정
: 부모 요소에 display:flex; 가 설정돼있어야 함

display-flex

flex 아이템들은 가로 방향을 배치되고, 자신이 가진 내용물의 width 만큼 차지하게 된다.

flex / inline-flex / inline-block

* 컨테이너가 주변 요소들과 어떻게 어우러질지 결정!

flex는 block과 비슷하게 줄바꿈 없이 메인축을 다 차지한다

inline-flex는 block과 비슷하게 아이템들이 차지하는 넓이만큼 차지한다

flex-direction : row (기본값)

.container{
    display: flex;
    flex-direction: row;
    background-color: beige;
    height: 100vh;
}

flex-direction : column

.container{
    display: flex;
    flex-direction: column;
    background-color: beige;
    height: 100vh;
}

flex-direction : row-reverse vs column-reverse

flex-direction : row-reverse

.container{
    display: flex;
    flex-direction: row-reverse;
    background-color: beige;
    height: 100vh;
}

flex-direction : column reverse;

.container{
    display: flex;
    flex-direction: column-reverse;
    background-color: beige;
    height: 100vh;
}

justify-content
: 같은 라인에 있는 아이템 간의 사이 간격
: 중심축을 기준으로 하는 배치 방식의 결정

justify-content : center;

.container{
    display: flex;
    flex-direction: row;
    justify-content: center; //추가 부분
    background-color: beige;
    height: 100vh;
}

space-between / space-around / space-evenly

justify-content: space-between;

박스 요소 사이 동일한 공간이 배치되지만 양쪽 끝 박스(1번과 10번)는 좌우 맨 끝에 배치가 된

justify-content: space-around;

박스 요소 좌우 공간을 같은넓이로 만든다. 즉, 1번 박스와 2번 박스 사이의 넓이는 1번 왼쪽 넓이보다 2배가 더 넓어진다

justify-content: space-evenly;

동일한 공백을 생성한다 (맨 끝 박스도 마찬가지로!)

justify-content: center;

.container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: beige;
    height: 100vh;
}

가운데에 정렬

justify-content: flex-start;

.container{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    background-color: beige;
    height: 100vh;
}

start 지점부터 정렬한다는 의미

justify-content: flex-end;

.container{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    background-color: beige;
    height: 100vh;
}

end 지점부터 정렬한다는 의미

flex-wrap
: 요소들의 총 넓이가 부모 넓이보다 클 때(여유공간이 없을 때), 이 요소들을 다음 줄에 이어서 정렬해주는 기능
: 부모요소에 display:flex; 와 함께 기재한다
: 기본값은 nowrap, 줄 바꿈 되지 않고 자동 축소

nowrap : 줄 바꿈되지 않고 축소만 (기본값), 일정이상 넘어가면 삐져나감

wrap : 자동으로 줄 바뀜 (inline-block 이랑 비슷하게 동작)

align-content
: 줄 바꿈으로 인한 다른 라인 간의 정렬
:반대축을 기준으로 하는 배치 방식을 결정

align-content : center;

.container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    background-color: beige;
    height: 100vh;
}

align-content : space-between; / space-around / space-evenly

.container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-between; space-around; space-evenly; 
    background-color: beige;
    height: 100vh;
}

flex-flow
: flex-direction 과 flex-wrap 속성이 합쳐진 형태

.flex-flow {
    flex-direction: row-reverse;
    flex-wrap: wrap;
}


----------->>

.flex-flow {
    flex-flow: row-reverse wrap;
}

게임을 통한 예제...

개구리 색깔별로 집 찾아 주기ㅋㅋ

24단계에서 막혔다,, 그래서 다른 블로그에서 참고해서 풀었다 ㅠㅠ

1. 메인축 바꾸고 역순으로 정렬

2. 줄바꿈 해주고 역순으로 정렬

3. 메인축(세로축으로 바뀜) 의 간격을 일정하게 바꾸기

4. 가운데로 정렬하기

Flexbox Froggy - CSS flexbox 속성 배우기 게임

Flexbox Froggy

A game for learning CSS flexbox

flexboxfroggy.com

ㄹㅇ 잘 정리된 사이트 !!

[HTML/CSS] Flex 핵심 이론 : 네이버 블로그 (naver.com)

[HTML/CSS] Flex 핵심 이론

Flexbox는 기존의 position, float, display 속성을 사용해서 HTML 레이아웃을 배치하는 방법보다 좀 ...

blog.naver.com

이번에야말로 CSS Flex를 익혀보자 – 1분코딩 (studiomeal.com)

이번에야말로 CSS Flex를 익혀보자

이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누

studiomeal.com

저작자표시

'CSS' 카테고리의 다른 글

특성 선택자와 결합선택자에 대하여~ (0)	2023.10.10
float과 clear에 대하여~ (0)	2023.10.10
background에 대하여~ (1)	2023.10.10
폰트어썸에서 아이콘 만들기&링크생성하기 (1)	2023.10.07
position 에 대하여~ (0)	2023.10.06

'CSS' Related Articles

나의 개발일지

display flex에 대하여~ 본문

display flex에 대하여~

'CSS' 카테고리의 다른 글

티스토리툴바