연습장

20. Flexbox Layout 플렉스 박스 레이아웃 본문

CSS3

20. Flexbox Layout 플렉스 박스 레이아웃

js0616 2024. 7. 1. 02:29

https://poiemaweb.com/css3-flexbox

 

CSS3 Flexbox Layout | PoiemaWeb

 

poiemaweb.com

 

 

float 가 말그대로 둥둥 떠다니기 때문에 flex 를 배우고 나서는 거의 쓰지않았던거같다. 

 

1. Introduction
CSS3의 새로운 layout 방식이다.
요소의 사이즈가 불명확하거나 동적으로 변화할 때에도 유연한 레이아웃을 실현할 수 있다. 

복잡한 레이아웃이라도 적은 코드로 보다 간단하게 표현할 수 있다.

 

 

Flexbox의 장점

  • 1줄의 코드 추가로 수평 정렬이 가능하다.
  • 요소의 상하좌우 정렬, 순서 변경이 간단하다.
  • 요소가 간격 조절이 간단하다.
  • 서로 다른 height를 갖는 요소의 수평정렬 시, 간단히 상하중앙 정렬이 가능하다.

비교적 최신 브라우저가 아니면 벤더 프리픽스를 사용하여야 하고 IE계열은 IE8,9의 경우 지원하지 않고 IE10,11의 경우도 일부 지원하므로 주의가 필요하다. IE계열에서 Flexbox를 사용하기 위해서는 flexibility.js를 사용하면 편리하다.

 

 

2. Usage
Flexbox 레이아웃은 flex item이라 불리는 복수의 자식 요소와 이들을 내포하는 flex-container 부모 요소로 구성된다.

flexbox를 사용하기 위해서 HTML 부모 요소의 display 속성에 flex를 지정한다.

.flex-container {
    display: flex;
  }

 

부모 요소가 inline 요소인 경우 inline-flex을 지정한다.

.flex-container {
    display: inline-flex;
  }

 

3. Flexbox container 속성

 

3.1 flex-direction
flex-direction 속성은 flex 컨테이너의 주축(main axis) 방향을 설정한다.

flex-direction: row; 

좌에서 우로(ltr) 수평 배치된다. flex-direction 속성의 기본값이다.

 

flex-direction: row-reverse;

우에서 좌로(rtl) 수평 배치된다.

 

flex-direction: column;

위에서 아래로 수직 배치된다.

 

flex-direction: column-reverse;

아래에서 위로 수직 배치된다.

 

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .wrap{
      display: flex;
      gap : 20px

    }
    .container{
      background-color: lightgray;
    }

    .box{
      width: 100px;
      height: 100px;
      border-radius: 15px;
      color: white;
      background-color:  lightskyblue;;
      text-align: center;
      line-height: 100px;
      font-size: 36px;
      font-weight: bold;
      margin: 10px;
      border : 1px solid skyblue;    
    }
    .title{
      padding-left: 10px;
      font-size: 24px;
      font-weight: bold;
    }
    .flex1{
      display: flex;
    }
    .flex2{
      display: flex;
      flex-direction: row-reverse;
    }
    .flex3{
      display: flex;
      flex-direction: column;
    }
    .flex4{
      display: flex;
      flex-direction: column-reverse;
    }

  </style>
</head>
<body>
  <div class="wrap">
    <div class="container">
      <div class="title">기본 배치</div>
      <div class="">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
      </div>
    </div>
    <div class="container">
      <div class="title">flex 사용</div>
      <div class="flex1">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
      </div>
      <div class="title">flex-direction: row-reverse</div>
      <div class="flex2">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
      </div>
    </div>
    <div class="container">
      <div class="title">flex-direction: column;</div>
      <div class="flex3">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
      </div>
    </div>
    <div class="container">
      <div class="title">flex-direction: row-reverse</div>
      <div class="flex4">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
      </div>

    </div>



  </div>
</body>
</html>

 

 

3.2 flex-wrap
flex-wrap 속성은 flex 컨테이너의 width보다 flex item들의 width의 합계가 더 큰 경우, 한줄로 표현할 것인지, 여러줄로 표현할 것인지를 지정한다.

flex-wrap:nowrap;

flex item을 개행하지 않고 1행에 배치한다. flex-wrap 속성의 기본값이다. 축소된다.

하지만 flex item들의 width의 합계가 flex 컨테이너의 width보다 큰 경우 flex 컨테이너를 넘치게 된다. 

overflow: auto;를 지정하면 가로 스크롤이 생기며 컨테이너를 넘치지 않는다.

 

 

 

 

flex-wrap: wrap; 
flex item들의 width의 합계가 flex 컨테이너의 width보다 큰 경우, flex item을 복수행에 배치한다. 기본적으로 좌에서 우로, 위에서 아래로 배치된다.

 

flex-wrap: wrap-reverse;
flex-wrap: wrap;과 동일하나 아래에서 위로 배치된다.

 

 

 

3.3 flex-flow
flex-flow 속성은 flex-direction 속성과 flex-wrap 속성을 설정하기 위한 shorthand이다. 기본값은 row nowrap이다.

 

.flex-container {
    flex-flow: <flex-direction> || <flex-wrap>;
  }

 

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

 

 

3.4 justify-content
flex container의 main axis를 기준으로 flex item을 수평 정렬한다.

justify-content: flex-start; 왼쪽 / 기본값

justify-content: flex-end; 오른쪽

justify-content: center; 중앙

justify-content: space-between; 양끝 나머지 균등
justify-content: space-around; 모두 균등

justify-content: space-evenly; 양끝 빈공간까지 균등

 

 

 

3.5 align-items
flex item을 flex container의 수직 방향(cross axis)으로 정렬한다. align-items 속성은 모든 flex item에 적용된다.

 

justify-content 가 text-align 처럼 수평이라면 align-items 는 line-height 처럼 수직 정렬에 사용한다. 

 

 

align-items: stretch;  꽉찬 높이를 갖는다. 

align-items: flex-start; 위쪽 정렬
align-items: flex-end; 아래쪽 정렬
align-items: center; 중앙 정렬



3.6 align-content
flex container의 cross axis를 기준으로 flex item을 수직 정렬한다.

참고로 justify-content 속성은 flex container의 main axis를 기준으로 flex item을 수평 정렬한다.

align-content: stretch;  균등하게 분배 / 기본값
align-content: flex-start; 위쪽
align-content: flex-end; 아래쪽
align-content: center; 중앙

align-content: space-between; 위아래 채우고 균등

align-content: space-around;  공간 균등

 

4. Flexbox item 속성 [ 자식요소 ]
float, clear, vertical-align 속성은 flex item에 영향을 주지 않는다.

 

 

4.1 order
flex item의 배치 순서를 지정한다. 

HTML 코드를 변경하지 않고 order 속성값을 지정하는 것으로 간단히 재배치할 수 있다. 

기본 배치 순서는 flex container에 추가된 순서이다. 기본값은 0이다.

 

    .flex1 div:first-child{
      color: black;
      order: 1
    }

    .flex1 div:last-child{
      color: gray;
      order: -1;
    }

 

1234 순서의 html div 에 각각 order 1 과 -1 을 주었다.

 

-1 인 4가 제일 앞 

0 인 2와 3이 그다음

1 인 1이 제일 마지막에 나온다.

 

 

4.2 flex-grow
flex item의 너비에 대한 확대 인자(flex grow factor)를 지정한다. 

기본값은 0이고 음수값은 무효하다.

 

1은 1

2와 3 은 기본값인 0 

4 는 2를 주었다. 

 

부모의 width 값에 맞게 길이가 확대 인자만큼 늘어나는거 같다. 

 

 

 

4.3 flex-shrink
flex item의 너비에 대한 축소 인자(flex shrink factor)를 지정한다. 

기본값은 1이고 음수값은 무효하다. 0을 지정하면 축소가 해제되어 원래의 너비를 유지한다.

반대로 작아진다고 생각하면된다.

 

4.4 flex-basis
flex item의 너비 기본값을 px, % 등의 단위로 지정한다. 기본값은 auto이다.

 

4.5 flex
flex-grow, flex-shrink, flex-basis 속성의 shorthand이다. 기본값은 0 1 auto이다.
W3C에서는 이 속성을 사용하는 것 보다 개별적으로 기술하는 것을 추천하고 있다.

 

4.6 align-self
align-items (부모) 속성보다 우선하여 개별 flex item을 정렬한다. 기본값은 auto이다.

 

 
    .flex1{
      display: flex;
      align-items: flex-end;
     
    }

    .flex1 div:nth-child(2){
      align-self: flex-start;

    }
 

 

 

'CSS3' 카테고리의 다른 글

22. Typographyimage 요소 아래에 패딩된 여분의 공간 제거하기  (0) 2024.07.01
21. Horizontal & Vertical Centering 수평/수직 중앙 정렬  (0) 2024.07.01
19. Responsive Web Design 반응형 레이아웃  (1) 2024.06.30
18. Layout 레이아웃 float  (0) 2024.06.30
17. Web Font 웹디자인 타이포그래피(Typography)  (0) 2024.06.29
'CSS3' Related Articles more