justify-content

CSS

justify-content로 flex-direction으로 정한 방향으로의 정렬을 정합니다. 예를 들어 flex-direction의 값이 row라면 가로 방향의 정렬을 정합니다.
기본값은 flex-start로 시작점부터 아이템을 배치합니다.

<!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;
        justify-content: flex-start;
      }
      .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 Item 2</div>
      <div class="jb-item">Item 3 Item 3 Item 3</div>
    </div>
  </body>
</html>

justify-content의 값을 flex-end로 정하면 플렉스가 끝나는 지점에 배치합니다.

.jb-container {
  height: 400px;
  background-color: #01579b;
  display: flex;
  justify-content: flex-end;
}

justify-content의 값을 center로 정하면 가운데에 배치합니다.

.jb-container {
  height: 400px;
  background-color: #01579b;
  display: flex;
  justify-content: center;
}

justify-content의 값을 space-between으로 정하면 빈 공간을 균등하게 나누어 아이템 사이에 간격을 만듭니다.

.jb-container {
  height: 400px;
  background-color: #01579b;
  display: flex;
  justify-content: space-between;
}

justify-content의 값을 space-around로 정하면 양 옆의 간격을 균등하게 만듭니다.
아이템 사이의 간격은 양끝 간격의 두 배가 됩니다.

.jb-container {
  height: 400px;
  background-color: #01579b;
  display: flex;
  justify-content: space-around;
}

justify-content의 값을 space-evenly로 정하면 양끝과 아이템 사이의 간격을 동일하게 만듭니다.

.jb-container {
  height: 400px;
  background-color: #01579b;
  display: flex;
  justify-content: space-evenly;
}

flex-direction의 값을 row-reverse로 정하면 플렉스 시작점이 오른쪽이 됩니다.

.jb-container {
  height: 400px;
  background-color: #01579b;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
}

flex-direction의 값을 column으로 정하면 플렉스 시작점이 위쪽이 됩니다.

.jb-container {
  height: 400px;
  background-color: #01579b;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

flex-direction의 값을 column-reverse로 정하면 플렉스 시작점이 아래쪽이 됩니다.

.jb-container {
  height: 400px;
  background-color: #01579b;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
}

CSS / font-style / 글자 모양 정하는 속성

개요 font-style은 글자 모양을 정하는 속성으로, 기울임 여부를 정합니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 font-style: normal | italic | oblique | initial | inherit normal : 보통 모양입니다. italic : 기울임꼴입니다. oblique : 기울임꼴입니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. italic은 필기체 느낌으로 기울이고, oblique는 보통 모양을 그대로 기울입니다. 아래의 이미지에서 두번째 줄이 italic, 세번째 ...

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 / 유튜브 동영상 반응형으로 삽입하는 방법

유튜브 영상을 블로그나 홈페이지에 넣을 때 보통 iframe을 사용한다. 코드는 유튜브 영상 공유에서 를 클릭하여 구할 수 있다. 아래와 같은 코드인데, 고정폭이다. 즉 웹브라우저의 가로폭이 커지든 작아지든 가로폭이 일정하다. <iframe width="560" height="315" src="https://www.youtube.com/embed/ybhXVSAdIRE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 이를 반응형으로 만들고 싶다면 아래처럼 한다. 16:9 크기의 div로 감싸고, iframe에 style을 추가하여 ...

CSS / columns / 다단으로 만들기

columns columns는 다단으로 만드는 속성입니다. 단의 최소 가로 크기와 단의 최대 개수가 속성의 값입니다. 기본값은 auto로, 값을 입력하지 않으면 auto로 처리합니다. IE는 버전 10 이상을 지원합니다. 예제 1 문단을 3단으로 만듭니다. 단의 최소 가로 크기가 설정되지 않았으므로 균등한 크기로 단이 만들어집니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .jb { columns : 3; } </style> </head> <body> <p class="jb">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ...

CSS / border-style / 테두리 모양을 정하는 속성

CSS / 동영상을 배경으로 사용하는 방법

동영상을 배경으로 사용하면 좀 더 다이나믹하고 화려하게 웹페이지를 꾸밀 수 있습니다. 단, 네트워크 속도가 느리거나 컴퓨터 사양이 좋지 않거나 구 버전의 웹브라우저를 사용하면 문제가 생길 수 있으니, 신중히 결정하는 것이 좋습니다. 예제로 사용한 동영상 예제에서 사용한 동영상은 Pixabay에서 구했습니다. 상업적으로 사용 가능하고, 출처 표시를 하지 않아도 됩니다. https://pixabay.com/videos/network-loop-energy-technology-12716/ 전체 코드와 결과 다음은 간단하게 만든 예제의 ...

CSS / list-style-image / 목록의 마커로 이미지 사용하기

개요 list-style-image로 이미지를 ul, ol 등의 목록의 마커(marker)로 사용할 수 있습니다. 기본값 : none 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 list-style-image: none | url | initial | inherit none : 이미지가 없습니다. url : 사용할 이미지의 URL을 입력합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 이미지는 원본 크기 그대로 나옵니다. 따라서 글자 크기에 ...

CSS / IE에서 표의 셀 안의 이미지 크기 설정하는 방법

표의 셀 안에 200x200 크기의 이미지를 넣고, 셀의 가로 크기를 100px로 정해도, 이미지는 200x200 크기로 나옵니다. 셀의 크기에 맞게 이미지가 줄어들게 하는 방법은 두가지가 있습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { ...

CSS / 도형 만들기 / 마름모

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

CSS / 표(table) 꾸미기 / 정렬하기

표와 관련된 정렬 표와 관련된 정렬에는 표 정렬, 셀 안의 내용 가로 정렬, 셀 안의 내용 세로 정렬이 있습니다. 기본 모양은 표 : 왼쪽 정렬 제목 셀(th) 안의 내용 가로 정렬 : 가운데 정렬 내용 셀(td) 안의 내용 세로 정렬 : 왼쪽 정렬 셀 안의 내용 세로 정렬 : 가운데 정렬 입니다. <!doctype html> <html lang="ko"> <head> ...

CODING FACTORY

CSS / Flex / justify-content

Related Posts