[CSS] display: flex (justify-content)

justify-content

 

flext 컨테이너 안에 있는 요소에 간격을 지정하는 것!

 

속성

• flex-start : 기본값으로 justify-content가 지정 되지 않은 경우 이것이 기본정렬
• flex-end : flext 컨테이너의 끝에 요소를 정렬한다. 행의 경우 오른쪽 끝, 열의 경우 하단 끝 
• space-between : 요소사이에 추가 공간을 두고 첫 번째 요소와 마지막 요소는 가장 자리로 밀려난다. 예를 들어 첫번째 항목은 컨테이너의 왼쪽에, 마지막 항목은 컨테이너의 오른쪽에 나머지 공간은 다른 요소에 균등하게 배분
• space-around : space-between와 비슷하지만 첫번째 요소와 마지막 요소가 컨테이너의 가장자리에 고정되어 있지 않다. 공간은 flex 컨테이너의 양쪽 끝에 절반의 공간을 두고 모든 항목 주위에 분산 된다.
• space-evenly : flex 컨테이너의 양쪽 끝에 전체 공간을 두고 flex 요소 사이에 공간을 균등하게 분배
• space-center : 모든 flex 요소를 flex 컨테이너 내부 중앙에 정렬!!

 

<style>
  #box-container {
    background: gray;
    display: flex;
    height: 500px;
   

  }
  #box-1 {
    background-color: dodgerblue;
    width: 25%;
    height: 100%;
  }

  #box-2 {
    background-color: orangered;
    width: 25%;
    height: 100%;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

---

justify-content : flex-end

<style>
  #box-container {
    background: gray;
    display: flex;
    height: 500px;
    justify-content: flex-end;
   

  }
  #box-1 {
    background-color: dodgerblue;
    width: 25%;
    height: 100%;
  }

  #box-2 {
    background-color: orangered;
    width: 25%;
    height: 100%;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

---

justify-content : space-between

<style>
  #box-container {
    background: gray;
    height: 500px;
    display:flex;
    justify-content: space-between;
    
   

  }
  #box-1 {
    background-color: dodgerblue;
    width: 25%;
    height: 100%;
  }

  #box-2 {
    background-color: orangered;
    width: 25%;
    height: 100%;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

---

 

justify-content : space-around

<style>
  #box-container {
    background: gray;
    height: 500px;
    display:flex;
    justify-content: space-around;
    
   

  }
  #box-1 {
    background-color: dodgerblue;
    width: 25%;
    height: 100%;
  }

  #box-2 {
    background-color: orangered;
    width: 25%;
    height: 100%;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

---

justify-content : space-evenly

 

<style>
  #box-container {
    background: gray;
    height: 500px;
    display:flex;
    justify-content: space-evenly;
    
   

  }
  #box-1 {
    background-color: dodgerblue;
    width: 25%;
    height: 100%;
  }

  #box-2 {
    background-color: orangered;
    width: 25%;
    height: 100%;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

---

justify-content : center

<style>
  #box-container {
    background: gray;
    height: 500px;
    display:flex;
    justify-content: center;
    
   

  }
  #box-1 {
    background-color: dodgerblue;
    width: 25%;
    height: 100%;
  }

  #box-2 {
    background-color: orangered;
    width: 25%;
    height: 100%;
  }
 
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
 
 
</div>