CSS / Flex / flex-wrap

  • flex-wrap은 아이템들의 가로 크기 합이 콘테이너의 가로 크기를 넘어갈 때 어떻게 처리할지를 정합니다.
  • 기본값은 nowrap로...
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      * {
        box-sizing: border-box;
      }
      .jb-container {
        height: 400px;
        background-color: #01579b;
        display: flex;
        flex-wrap: nowrap;
      }
      .jb-item:nth-child(1) {
        background-color: #ffebee;
      }
      .jb-item:nth-child(2) {
        background-color: #ffcdd2;
      }
      .jb-item:nth-child(3) {
        background-color: #ef9a9a;
      }
      .jb-item:nth-child(4) {
        background-color: #e57373;
      }
    </style>
  </head>
  <body>
    <div class="jb-container">
      <div class="jb-item">Item 1</div>
      <div class="jb-item">Item 2</div>
      <div class="jb-item">Item 3</div>
      <div class="jb-item">Item 4</div>
    </div>
  </body>
</html>

  • 아이템의 가로 크기를 늘려도 한 줄에 나오도록 크기를 조정합니다.
.jb-item {
  width: 30%;
}

  • flex-wrap의 값을 wrap으로 정하면, 아이템을 다음 줄로 넘깁니다.
.jb-container {
  height: 400px;
  background-color: #01579b;
  display: flex;
  flex-wrap: wrap;
}

  • flex-wrap의 값을 wrap-reverse로 정하면, 아이템을 이전 줄로 넘깁니다.
.jb-container {
  height: 400px;
  background-color: #01579b;
  display: flex;
  flex-wrap: wrap-reverse;
}

  • flex-direction의 값이 column일 때 flex-wrap의 값을 wrap으로 정하면, 오른쪽으로 넘깁니다.
.jb-container {
  height: 400px;
  background-color: #01579b;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.jb-item {
  height: 30%;
}

Related Posts

CSS / white-space / 공백 처리 방법 정하는 속성

CSS / white-space / 공백 처리 방법 정하는 속성

개요 white-space는 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 white-space: normal | nowrap | pre | pre-wrap | pre-line | initial | inherit normal, nowrap, pre, pre-wrap, pre-line : 아래 표 참고 initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다.   스페이스와 탭1 줄바꿈2 자동 줄바꿈3 normal 병합 병합 O nowrap 병합 병합 X pre 보존 보존 X pre-wrap 보존 보존 O pre-line 병합 보존 O 연속된 스페이스와 탭의 처리 방법입니다. 병합은 1개의 ...

CSS / list-style-position / 목록의 마커 위치 정하는 속성

CSS / list-style-position / 목록의 마커 위치 정하는 속성

개요 list-style-position으로 ul, ol 등의 목록의 마커(marker)의 위치를 정합니다. 기본값 : outside 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 list-style-position: inside | outside | initial | inherit inside : 문단 안쪽에 놓습니다. outside : 문단 바깥쪽에 놓습니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

CSS / tab-size / 탭 크기 설정하는 속성

CSS / tab-size / 탭 크기 설정하는 속성

HTML은 탭을 연속하여 여러 개 넣어도 하나의 공백으로 인식합니다. 하지만 pre 태그를 이용하면 입력된 그대로 출력할 수 있습니다. 기본적으로 하나의 탭을 8개의 공백으로 인식합니다. 예를 들어 아래처럼 코드를 만들면...(각 줄 앞에 있는 빈 칸은 모두 탭입니다.) <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> pre { font-family: Consolas, monospace; font-size: 24px; } </style> </head> <body> <pre> Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. </pre> </body> </html> 웹브라우저에서는 다음처럼 출력합니다. 탭 크기가 ...

CSS / 도형 만들기 / 마름모

CSS / 도형 만들기 / 마름모

CSS로 마름모를 만들어 보겠습니다. 마름모는 삼각형을 두 개 붙여서 만들 것이므로, 삼각형을 만드는 방법을 먼저 보시는 게 좋습니다. HTML 문서에 다음과 같이 내용이 없는 요소를 하나 넣습니다. <div class="rhombus"></div> 크기를 0으로 한 후, border 속성을 이용하여 삼각형을 만듭니다. position: relative;는 나머지 반쪽의 위치를 잡기 위해 넣은 것입니다. .rhombus { width: 0px; height: 0px; ...

CSS / display 속성의 값을 inline 또는 inline-block으로 했을 때 여백 조정하는 방법

CSS / display 속성의 값을 inline 또는 inline-block으로 했을 때 여백 조정하는 방법

inline 또는 inline-block의 여백 display 속성값으로 inline 또는 inline-block으로 정하면 요소들이 가로로 배열됩니다. 이 때 요소와 요소 사이에 여백이 생깁니다. 예를 들어 다음과 같이 순서 없는 목록을 가로로 배열해보겠습니다.(여백을 파악하기 위해 테두리를 만들었습니다.) <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / Flex / align-content

CSS / Flex / align-content

flex-wrap 속성의 값이 wrap인 경우, 아이템들의 가로폭의 합이 콘테이너의 가로폭을 넘어가면 아이템이 다음 줄로 내려갑니다. 이때 여러 줄이 되어버린 아이템들의 정렬을 어떻게 할지 정하는 속성이 align-content입니다. 기본값은 stretch로, 높이를 꽉 채웁니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / clip / 요소의 특정 부분만 보이게 하는 속성

CSS / clip / 요소의 특정 부분만 보이게 하는 속성

개요 clip 속성으로 요소의 특정 부분만 나오도록 할 수 있습니다. 기본값 : auto 상속 : No 애니메이션 : Yes 버전 : CSS Level 2 문법 clip: auto | shape | initial | inherit auto : 요소의 모든 부분이 나옵니다. shape : 특정 부분이 나오도록 합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 특정 부분만 나오게 할 때는 다음과 같은 코드로 나오는 ...

CSS / list-style-type / 목록 앞의 마커 정하는 속성

CSS / list-style-type / 목록 앞의 마커 정하는 속성

목록은 <ul> 또는 <ol> 태그로 만듭니다. 목록 앞에 붙는 도형이나 문자을 마커(Marker)라고 하는데, 어떤 형식 또는 모양의 마커를 사용할지는 list-style-type으로 정합니다. 속성값은 다음과 같습니다. <ul> : disc, circle, square <ol> : decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha 공통 : none 의미상으로는 <ul>과 <ol>에 사용하는 속성값을 구분하는 게 맞지만, <ul>에 decimal을 사용하거나 <ol>에 ...

CSS / 짧은 밑줄 만들기

CSS / 짧은 밑줄 만들기

짧은 밑줄 만들기 밑줄은 보통 text-decoration이나 border 속성으로 만듭니다. 그런데 그렇게 만든 밑줄은 선택한 요소 전체에 적용됩니다. 즉, 요소가 길면 밑줄도 길게 만들어지고, 요소가 짧으면 밑줄도 짧게 만들어집니다. 요소보다 짧은 밑줄을 만드는 방법은 :after 선택자를 이용하는 것입니다. 요소 뒤에 선을 만들고 위치와 길이를 정해주면 됩니다. 예를 들어 h1 요소에 짧은 밑줄을 만들고 싶다면 다음과 ...

CSS / background-color / 배경색을 정하는 속성

CSS / background-color / 배경색을 정하는 속성

개요 background-color로 배경의 색을 정합니다. 그 색으로 border와 padding을 포함한 영역을 칠합니다. margin 영역은 칠하지 않습니다. 기본값 : transparent 상속 : No 애니메이션 : Yes 버전 : CSS Level 1 문법 background-color: transparent | color | initial | inherit transparent : 배경색이 없습니다. color : 색을 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 1 바깥 여백(margin)은 칠하지 않고, 안쪽 여백(padding)은 칠한다는 것을 ...