8/31 학습

flexbox란?

• flexbox인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델
• flex-direction속성으로 주축의 방향 지정 가능

html

  <div class="flexbox">
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="three">3
      <br>extra
      <br>text
  </div>

css

div {
  border: solid 1px;
}

.flexbox {
  display: flex;
  width: 100px;
}

css

div {
  border: solid 1px;
}

.flexbox {
  display: flex;
  width: 100px;
  flex-direction: row-reverse;
}

• flex-basis : 속성의 크기를 결정. 기본값은 auto로 항목이 크기를 갖는지 확인한다.
• flex-grow : 속성을 지정해 내용물의 크기를(주축 방향으로) flex-basis 이상으로 늘릴 수 있다. 다른 내용물과의 비율 설정 가능. flex-basis에 컨테이너의 남은 공간을 추가로 할당하는 것 같다. flex-basis 가 0px, 각 내용물의 값을 1, 1, 2로 할당하면 1:1:2의 비율로 컨테이너가 채워진다.

html

  <div class="flexbox">
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
  </div>

css

div {
  border: solid 1px;
}

.flexbox {
  display: flex;
  width: 100px;
}

.one {
  /* 기본값: auto 이 경우 사용자가 지정한 값이 있는지 확인 */
  flex-basis: 0px;
  /* 내용물의 크기를 flex-basis 이상으로 늘린다. 컨테이너가 늘어나지는 않는다. */
  flex-grow: 1;
}

.two
{
  flex-basis: 0px;
  flex-grow: 1;
}

.three
{
  flex-basis: 0px;
  flex-grow: 2;
}

• align-items: flex 컨테이너에 지정하는 속성이며, 교차축의 정렬방식을 지정한다. 기본값은 stretch.

css

div {
  border: solid 1px;
}

.flexbox {
  display: flex;
  width: 100px;
  height: 100px;
  /* 주축에 직각인 교차축의 정렬방식 */
  align-items: center;
}

.one {
  flex-basis: 20px;
}

.two
{
  flex-basis: 20px;
}

.three
{
  flex-basis: 20px;
}

• justify-content: 주축을 따라 flex항목들을 정렬

css

div {
  border: solid 1px;
}

.flexbox {
  display: flex;
  width: 100px;
  height: 100px;
  /* 주축의 정렬방식 */
  /* 여유 공간을 flex항목 사이의 공간과 시작선, 끝선과 flex항목 사이의 공간을 동일하게 배분*/
  justify-content: space-evenly;  
}

.one {
  flex-basis: 20px;
}

.two
{
  flex-basis: 20px;
}

.three
{
  flex-basis: 20px;
}

출처
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox