YB WEB

Front-End

[CSS] Flexbox 정리

YB CHA 2023. 10. 19.

 

 

Flexbox ?

기존의 display나 positon 등을 이용한 웹의 레이아웃 개발은 생각할 부분이 많고 어느 정도 한계가 존재해서 개발하기가 복잡하고 어려움이 있습니다. 이런 점을 극복하기 위해서 css3에 추가된 flexbox입니다. flexbox를 이용하면 특별한 계산 없이 쉽게 정렬을 할 수 있고, 이를 통해 레이아웃을 편리하게 구성할 수 있습니다.

 

 

Flexbox 특징

flexbox는 flex container(부모 요소)와 flex item(자식 요소)로 구성됩니다.

 

flex-container에 적용할 수 있는 속성 값

  • display : flex container를 정의
  • flex-direction : flex-container 내의 item을 배치할 때 사용할 방향을 지정
  • flex-flow :  flex-direction, flex-wrap속성의 단축 속성
  • flex-wrap : flex item이 flex container를 벗어났을 때 줄을 바꾸는 속성
  • justify-content : 콘텐츠의 좌우 관계 정렬 상태 정의
  • align-items : flex-direction으로 정해진 방향을 기준으로 수직으로 item을 정렬
  • align-content : flex-direction으로 정해진 방향을 기준으로 수직으로 여러 줄인 item을 정렬

 

display

  • flex : Black 특성의 Flex Container를 정의
  • inline-flex : Inline 특성의 Flex Container를 정의

 

flex-direction

  • row : 왼쪽에서 오른쪽으로 정렬
  • row-reverse : 오른쪽에서 왼쪽으로 정렬
  • column : 위쪽에서 아래쪽으로 정렬
  • column-reverse : 아래쪽에서 위쪽으로 정렬

 

flex-flow

  • flex-direction : Items의 주 축(main-axis)을 설정 row
  • flex-wrap : Items의 여러 줄 묶음(줄 바꿈) 설정 nowrap

 

flex-wrap

  • nowrap : 모든 item을 한줄에 정렬
  • wrap : item이 container를 벗어날 경우 여러 행에 걸쳐 정렬
  • wrap-reverse : item이 container를 벗어날 경우 여러 행에 걸쳐 반대로 정렬

 

justify-content

  • flex-strat : item을 왼쪽으로 시작점으로 정렬
  • flex-end : item을 오른쪽으로 시작으로 정렬
  • center : item을 가운데를 기준으로 정렬
  • space-between : 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬
  • space-around : Items을 균등한 여백을 포함하여 정렬

 

align-items

  • flex-start : item을 위쪽을 시작점으로 정렬
  • flex-end : item을 아래쪽을 시작점으로 정렬
  • center : item을 가운데를 기준으로 정렬
  • stretch : Container의 교차 축을 채우기 위해 Items을 늘려 맞춤
  • baseline : Items를 문자 기준선에 맞춰 정렬

 

align-content

  • flex-start : item을 위쪽을 시작점으로 정렬
  • flex-end : item을 아래쪽을 시작점으로 정렬
  • center : item을 가운데를 기준으로 정렬
  • stretch : item을 위쪽을 시작점으로 정렬
  • space-between : 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨
  • space-around : Items를 균등한 여백을 포함하여 정렬

 

flex-item에 적용할 수 있는 속성 값

  • order : Flex Item의 순서를 설정
  • flex : Item의 너비를 설정하는 단축 속성
  • flex-grow : Flex Item의 증가 너비 비율을 설정
  • flex-shrink : Flex Item의 감소 너비 비율을 설정
  • flex-basis : Flex Item의 (공간 배분 전) 기본 너비 설정
  • align-self : 교차 축(cross-axis)에서 Item의 정렬 방법을 설정

 

 

아래는 레이아웃 코드 예시입니다.

 

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Flexbox 레이아웃</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <header>
        <h1>헤더</h1>
    </header>
    <div class="flex-container">
        <aside>
            <h2>사이드바</h2>
        </aside>
        <main>
            <h2>메인</h2>
        </main>
    </div>
    <footer>
        <h3>푸터</h3>
    </footer>
</body>
</html>

 

CSS

body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

.flex-container {
    display: flex;
}

aside {
    background-color: #ddd;
    width: 250px;
    padding: 20px;
}

main {
    flex: 1;
    padding: 20px;
}

footer {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

 

 

flexbox를 이해하기 쉽게 완벽하게 익히고 싶다면 아래 사이트에서 게임을 진행해보세요!

 

https://flexboxfroggy.com/#ko

 

Flexbox Froggy

A game for learning CSS flexbox

flexboxfroggy.com

 

 

 

 

 

 

 

'Front-End' 카테고리의 다른 글

웹사이트 디자인할 때 유용한 툴  (0) 2023.10.20
포트폴리오 만들때 유용한 사이트  (0) 2023.10.20
[HTML] 자주 쓰이는 태그 정리  (0) 2023.08.26
프론트엔드 개발자가 알아두면 유용한 사이트 모음  (0) 2023.07.20

댓글

티스토리툴바