CSS - Flexbox

• Flexbox를 이용해 레이아웃을 만들 수 있다. (다음 속성에 대한 이해가 있어야 합니다)
  • 방향: flex-direction
  • 얼마나 늘릴 것인가?: flex-grow
  • 얼마만큼의 크기를 갖는가?: flex-basis
  • 수평 정렬: justify-content
  • 수직 정렬: align-items

<div id="bigcontainer">
  <div id="container">
    <div class="box1">1</div>
    <div class="box1">2</div>
    <div class="box1">3</div>
    <div class="box2">4</div>
    <div class="box2">5</div>
    <div class="box2">6</div>
    <div class="box3">7</div>
  </div>
  <div id="btncontainer">
    <button id="btn">현재 direction: row </button>
    <button id="btn1">
      현재 justify-content: flex-start
    </button>
    <button id="btn2">
      현재 align-items: flex-start
    </button>
  </div>
</div>

<p>flex-direction: flex 박스를 배치할 주축 방향을 설정합니다.</p>
<p>justify-content: 메인축을 기점으로 아이템들사이의 공간 배치를 설정합니다.</p>
<p>align-items: 반대축에 대한 정렬을 설정합니다.</p>

#bigcontainer {
  width: 500px;
  display: flex;
  justify-content: space-around;
}
#container {
  display: flex;
  flex-wrap: wrap;
  background-color: whitesmoke;
  width: 200px; 
  height: 200px;
/*   justify-content: space-between; */
/*   align-items: flex-end; */
/*   align-content: flex-end; */
}

#btncontainer {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

#container > div {
  border: 1px solid black;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background-color: lightyellow;
}

button {
  height: 2rem;
}

let button = document.getElementById('btn');
let button1 = document.getElementById('btn1');
let button2 = document.getElementById('btn2');
let container = document.getElementById('container');
let count = 0;
let count1 = 0;
let count2 = 0;
button.addEventListener('click', change);
button1.addEventListener('click', change1);
button2.addEventListener('click', change2);

function change(){
  if(count === 0){
    container.style.flexDirection = "column";
    button.textContent = '현재 direction: column';
    count = 1;
  }
  else if(count === 1){
    container.style.flexDirection = "row";
    count = 0;
    button.textContent = '현재 direction: row';
  }
}

function change1(){
  if(count1 === 0){
    container.style.justifyContent = "space-between";
    button1.textContent = '현재 justify-content: space-between';
    count1 = 1;
  }
  else if(count1 === 1){
    container.style.justifyContent = "space-around";
    button1.textContent = '현재 justify-content: space-around';
    count1 = 2;
  }
   else if(count1 === 2){
    container.style.justifyContent = "flex-start";
    button1.textContent = '현재 justify-content: flex-start';
    count1 = 3;
  }
   else if(count1 === 3){
    container.style.justifyContent = "flex-end";
    button1.textContent = '현재 justify-content: flex-end';
    count1 = 0;
  }
}

function change2(){
  if(count2 === 0){
    container.style.alignItems = "flex-start";
    button2.textContent = '현재 align-items: flex-start';
    count2 = 1;
  }
  else if(count2 === 1){
    container.style.alignItems = "flex-end";
    button2.textContent = '현재 align-items: flex-end';
    count2 = 2;
  }
   else if(count2 === 2){
    container.style.alignItems = "center";
    button2.textContent = '현재 align-items: center';
    count2 = 0;
  }
}