본문 바로가기
WEB

[css]Flexbox 마스터하기: 2.Flex 컨테이너 설정

aws이까이꺼 2023. 6. 25. 00:16

Flexbox를 사용하기 위해서는 우선 컨테이너에 대한 설정이 필요합니다. Flex 컨테이너는 내부의 요소들을 포함하고 있으며, 그들을 유연하게 배치하기 위한 기준을 제공합니다. Flex 컨테이너를 설정하기 위해 다음과 같은 CSS 속성을 사용할 수 있습니다

[ display ]

Flex 컨테이너를 생성하기 위해 display 속성을 사용합니다. Flex 컨테이너를 생성하기 위해서는 display 속성에 flex 값을 지정해야 합니다. 예를 들어:

.container {
  display: flex;
}

위 코드는 .container 클래스를 가진 요소를 Flex 컨테이너로 설정합니다.

 

[ flex-direction ]

flex-direction 속성은 Flex 컨테이너 안에서 아이템들이 배치되는 방향을 설정합니다. 기본값은 row로, 요소들이 왼쪽에서 오른쪽으로 배치됩니다. 다른 가능한 값으로는 column (위에서 아래로 배치), row-reverse (오른쪽에서 왼쪽으로 배치), column-reverse (아래서 위로 배치) 등이 있습니다. 예를 들어:

.container {
  flex-direction: row;
}

위 코드는 .container 클래스를 가진 Flex 컨테이너에서 요소들을 왼쪽에서 오른쪽으로 배치합니다.

 

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>

<button onclick="changeDirection('row')">row</button>
  <button onclick="changeDirection('row-reverse')">row-reverse</button>
  <button onclick="changeDirection('column')">column</button>
  <button onclick="changeDirection('column-reverse')">column-reverse</button>
</body>
</html>
.container {
  display: flex;
  border: 1px solid #ddd;
  padding: 10px;
}

.item {
  background-color: #f1f1f1;
  border: 1px solid #999;
  padding: 10px;
  margin: 5px;
}
function changeDirection(direction) {
  var container = document.querySelector('.container');
  container.style.flexDirection = direction;
}

[ justify-content ]

justify-content 속성은 Flex 컨테이너 안에서 아이템들의 수평 정렬 방식을 설정합니다. 이 속성은 Flex 컨테이너의 주 축 (flex-direction에 의해 결정됨)을 따라 아이템들을 정렬합니다. 예를 들어:

.container {
  justify-content: flex-start;
}

 코드는 .container 클래스를 가진 Flex 컨테이너에서 요소들을 왼쪽으로 정렬합니다.

 

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>

  <div class="controls">
    <button onclick="changeJustifyContent('flex-start')">flex-start</button>
    <button onclick="changeJustifyContent('flex-end')">flex-end</button>
    <button onclick="changeJustifyContent('center')">center</button>
    <button onclick="changeJustifyContent('space-between')">space-between</button>
    <button onclick="changeJustifyContent('space-around')">space-around</button>
    <button onclick="changeJustifyContent('space-evenly')">space-evenly</button>
  </div>

</body>
</html>

.container {
  display: flex;
  border: 1px solid #ddd;
  padding: 10px;
}

.item {
  background-color: #f1f1f1;
  border: 1px solid #999;
  padding: 10px;
  margin: 5px;
}

.controls {
  margin-top: 10px;
}

function changeJustifyContent(justify) {
  var container = document.querySelector('.container');
  container.style.justifyContent = justify;
}

 

[ align-items ]

align-items 속성은 Flex 컨테이너 안에서 아이템들의 수직 정렬 방식을 설정합니다. 이 속성은 Flex 컨테이너의 교차 축 (flex-direction에 의해 결정됨)을 따라 아이템들을 정렬합니다. 예를 들어:

 

.container {
  align-items: center;
}

 위 코드는 .container 클래스를 가진 Flex 컨테이너에서 요소들을 수직으로 가운데 정렬합니다.

 

<div class="container">
    <div class="item">
      <span class="text">Item 1</span>
    </div>
    <div class="item">
      <span class="text">Item 2 with longer text</span>
    </div>
    <div class="item">
      <span class="text">Item 3</span>
    </div>
  </div>

  <div class="controls">
    <button onclick="changeAlignItems('flex-start')">flex-start</button>
    <button onclick="changeAlignItems('flex-end')">flex-end</button>
    <button onclick="changeAlignItems('center')">center</button>
    <button onclick="changeAlignItems('baseline')">baseline</button>
    <button onclick="changeAlignItems('stretch')">stretch</button>
  </div>
.container {
  display: flex;
  border: 1px solid #ddd;
  padding: 10px;
  height: 150px;
}

.item {
  background-color: #f1f1f1;
  border: 1px solid #999;
  padding: 10px;
  margin: 5px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text {
  font-size: 14px;
  font-weight: bold;
}

.controls {
  margin-top: 10px;
}

function changeAlignItems(align) {
  var container = document.querySelector('.container');
  container.style.alignItems = align;
}

 

[ gap, flex-wrap ]

gap: 아이템들 사이의 간격을 설정하는 속성입니다. 아이템 사이에 일정한 공간을 주기 위해 사용합니다.
flex-wrap: 아이템들이 한 줄에 배치되지 않고 여러 줄에 걸쳐서 배치되도록 설정하는 속성입니다. 기본값은 nowrap이며, wrap으로 설정하면 여러 줄에 걸쳐서 아이템이 배치됩니다.

 

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
    <div class="item">Item 7</div>
    <div class="item">Item 8</div>
    <div class="item">Item 9</div>
  </div>

  <div class="controls">
    <div class="button-group">
      <h2>Justify Content</h2>
      <button onclick="changeJustifyContent('flex-start')">flex-start</button>
      <button onclick="changeJustifyContent('flex-end')">flex-end</button>
      <button onclick="changeJustifyContent('center')">center</button>
      <button onclick="changeJustifyContent('space-between')">space-between</button>
      <button onclick="changeJustifyContent('space-around')">space-around</button>
      <button onclick="changeJustifyContent('space-evenly')">space-evenly</button>
    </div>
  </div>

  <div class="controls">
    <div class="button-group">
      <h2>Align Items</h2>
      <button onclick="changeAlignItems('flex-start')">flex-start</button>
      <button onclick="changeAlignItems('flex-end')">flex-end</button>
      <button onclick="changeAlignItems('center')">center</button>
      <button onclick="changeAlignItems('baseline')">baseline</button>
      <button onclick="changeAlignItems('stretch')">stretch</button>
    </div>
  </div>

  <div class="controls">
    <button onclick="toggleFlexWrap()">Toggle Wrap</button>
  </div>
.container {
  display: flex;
  flex-wrap: nowrap; /* 기본값은 nowrap */
  justify-content: flex-start; /* 기본값은 flex-start */
  align-items: stretch; /* 기본값은 stretch */
  border: 1px solid #ddd;
  padding: 10px;
  gap: 10px; /* 아이템 사이의 간격 */
}

.item {
  background-color: #f1f1f1;
  border: 1px solid #999;
  padding: 10px;
  flex: 1;
}

.controls {
  margin-top: 10px;
}

function changeJustifyContent(justify) {
  var container = document.querySelector('.container');
  container.style.justifyContent = justify;
}

function changeAlignItems(align) {
  var container = document.querySelector('.container');
  container.style.alignItems = align;
}

function toggleFlexWrap() {
  var container = document.querySelector('.container');
  container.style.flexWrap = container.style.flexWrap === 'wrap' ? 'nowrap' : 'wrap';
}

 

[ align-content ]

아래 코드에서 align-items와 align-content 모두 flex-start로 설정되어 있습니다. 그러나 실제로는 차이점이 있습니다.

align-items: align-items: flex-start;는 Flex 아이템들을 교차축 방향으로 상단에 정렬합니다. 여기서는 Flex 컨테이너의 교차축 상단에 위치합니다.
align-content: align-content: flex-start;는 여러 줄로 나뉘어진 Flex 아이템들을 교차축 방향으로 상단에 정렬합니다. 여기서는 Flex 컨테이너의 교차축 상단에 위치합니다.
위의 예제에서는 단일 줄에 모든 Flex 아이템이 배치되므로 align-items와 align-content의 차이를 명확하게 확인할 수 없습니다. 그러나 여러 줄로 나뉘어진 Flex 아이템들을 가지고 있다면, align-content의 영향을 더 명확하게 확인할 수 있습니다.

따라서, align-items는 단일 줄 내의 Flex 아이템 정렬에 사용되고, align-content는 여러 줄로 나뉘어진 Flex 아이템들의 묶음 정렬에 사용됩니다.

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
  </div>

  <div class="controls">
    <button onclick="changeAlignContent('flex-start')">flex-start</button>
    <button onclick="changeAlignContent('flex-end')">flex-end</button>
    <button onclick="changeAlignContent('center')">center</button>
    <button onclick="changeAlignContent('space-between')">space-between</button>
    <button onclick="changeAlignContent('space-around')">space-around</button>
    <button onclick="changeAlignContent('stretch')">stretch</button>
  </div>
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: flex-start;
  border: 1px solid #ddd;
  height: 300px;
  gap: 10px;
}

.item {
  background-color: #f1f1f1;
  border: 1px solid #999;
  padding: 10px;
}

.controls {
  margin-top: 10px;
}

function changeAlignContent(align) {
  var container = document.querySelector('.container');
  container.style.alignContent = align;
}

=> 어렵다.

 


이렇게 Flex 컨테이너 설정을 통해 요소들을 유연하게 배치할 수 있습니다. 다음으로는 Flex 아이템에 대한 설정에 대해 알아보겠습니다.

 

노트북 SALE, 가격은 Slim 성능은 Flex (~6/30)

"배너 클릭시 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

 

728x90
반응형

'WEB' 카테고리의 다른 글

[css]Flexbox 마스터하기: 4. Flexbox를 활용한 반응형 사진 갤러리 예제  (0) 2023.06.25
[css]Flexbox 마스터하기: 3.Flex 컨테이너 설정  (0) 2023.06.25
[css]Flexbox 마스터하기: 1.소개  (0) 2023.06.24
[html5] input type date 와 input type time  (1) 2023.06.17
ngrok으로 로컬 개발 환경(localhost) https 로 개발테스트 하기  (1) 2023.06.14

'WEB' Related Articles

티스토리툴바