css flex

flex : container(부모 요소)와 items(자식 요소)를 이용하여 요소를 정렬하는 방법이다 

flex로 요소를 정렬하기위해선 부모 요소가 필수적이고 flex를 명시하는 것도 부모 요소에 해야 한다.

flex를 사용함으로써 container(부모요소)와 items(자식 요소)에 사용 가능한 속성이 다르다  

ex)

<style>
.nav-bar{
  display:flex;
  width: 400px;
  height: 200px;
  border: 2px solid red;  
}
.item{
  margin-right: 10px;
  font-weight: bold;
  font-size: 20px;
}
</style>

<ul class="nav-bar">
  <li class="item">home</li>
  <li class="item">about</li>
  <li class="item">information</li>
</ul>

위코드와 같이 li의 부모 요소인 ul태그에 flex를 설정하여 li태그를 수평 정렬했음을 확인할 수 있다 

container(부모 요소)에 사용 가능한 속성
display:flex와 inline-flex

flex와 inline-flex의 차이점
flex와 inline-flex는 itmes(자식요소)가 수평으로 쌓인다는 공통점이 있지만 flex는 container(부모 요소)가 수직으로 쌓이고 inline-flex는 container(부모 요소)가 수평으로 쌓인다.
ex)

<style>
    .flexBox {
      display: flex; /* itmes(자식요소)를 수평정렬시키고 container(부모요소)는 수직정렬 시키는 속성 */
      width: 400px;
      height: 100px;
      border: 2px solid red;
      margin-bottom: 20px;
    /* conteiner의 영역을 표시하는 코드  */
    }

    .inlineFlexBox {
      display: inline-flex;  /* itmes(자식요소)를 수평정렬시키고 container(부모요소)도 수평정렬 시키는 속성 */
      width: 400px;
      height: 100px;
      border: 2px dotted green;
      /* conteiner의 영역을 표시하는 코드  */
    }

    .item {
      width: 100px;
      height: 100px;
      background-color: blue;
      margin-right: 10px;
      /* 각각의 item의 영역을 표시하는 코드 */
    }
  </style>

  <div class="flexBox">
    <div class="item">1</div>
    <div class="item">2</div>
  </div>
  <div class="flexBox">
    <div class="item">1</div>
    <div class="item">2</div>
  </div>
  <div class="inlineFlexBox">
    <div class="item">1</div>
    <div class="item">2</div>
  </div>
  <div class="inlineFlexBox">
    <div class="item">1</div>
    <div class="item">2</div>
  </div>

flex-direction :container(부모요소)안에서 items(자식 요소)가 생성되는 방향을 설정한다.
기본값 : row
속성값 : 
row:  items(자식 요소)가 왼쪽에서 오른쪽 방향으로 생성된다.
row-reverse: items(자식요소)가 오른쪽에서 왼쪽 방향으로 생성된다.
column:  items(자식요소)가 위에서 아래로 생성된다. 
column-reverse: items(자식요소)가 아래에서 위로 생성된다.

flex-wrap : items(자식요소)의 줄 바꿈을 설정
기본값 : norap
속성값 : 
nowrap: 모든 items(자식 요소)를 한 줄에 표시 (itmes의 width값의 총액이 container의 width값을 초과할 때 nowrap이면 원하지 않는 결과가 출력될 수 있다)
wrap: items를 여러줄로 표현한다(items의 너비 값이 container의 너비 값을 초과하면 다음 줄에 items을 출력한다.)
wrap-reverse: wrap과 같은 효과를 가지지만 요소가 container의 아랫쪽 부터 쌓인다

flex-flow: flex-direction과 flex-wrap을 한번에 사용 가능한 단축 속성

justify-content:  주축을 기준으로 container(부모요소)안에서 items(자식 요소)의 정렬 방법을 설정한다
기본값 : flex-start
속성값 :
flex-start: items를 주축의 시작점에 정렬한다.
flex-end: items를 주축의 끝점에 정렬한다.
center: items를 주축의 가운데 정렬한다.
space-around: 주축을 기준으로 items를 균등한 여백을 가 진상태로 정렬시킨다.
space-between: 주축을 기준으로 items의 첫요소를 시작점에, 마지막 요소를 끝점에 정렬시킨 후 나머지 요소들은 균등한 여백을 가 진상태로 정렬시킨다.

align-content: 교차축을 기준으로 container(부모요소)안에서 items(자식 요소)의 정렬방법을 설정 (요소가 2줄 이상이고 container의 여백이 있을 때 사용 가능)
기본값:  stretch
속성값:
stretch: container안에 교차축의 공백을 채우기 위해 items(자식 요소)의 크기를 늘림 (단 height값이 auto일 경우에만)
flex-start: container(부모요소)안에서 items(자식 요소)를 교차축에 시작점에 정렬시킨다
flex-end: container(부모요소)안에서 items(자식 요소)를 교차축에 끝점에 정렬시킨다
center: container(부모요소)안에서 items(자식 요소)를 교차축에 가운데 정렬시킨다 
space-between: container(부모요소)안에 첫 번째 요소를 교차축의 시작점, 마지막 요소를 교차축의 끝점에 정렬시킨 후 나머지는 균등한 여백을 가 진상태로 정렬시킨다
space-around: container(부모요소)안에 모든 items를 교차축을 기준으로 균등한 여백을 가 진상태로 정렬한다. 

align-items: 교차축에서 자식요소의 정렬 방법을 설정 (요소가 1줄일 때 사용)
기본값:  stretch
속성값:
stretch: container안에 교차축의 공백을 채우기 위해 items(자식 요소)의 크기를 늘림 (단 height값이 auto일 경우에만)
flex-start: container(부모요소)안에서 items(자식 요소)를 교차축에 시작점에 정렬시킨다
flex-end: container(부모요소)안에서 items(자식 요소)를 교차축에 끝점에 정렬시킨다
center: container(부모요소)안에서 items(자식 요소)를 교차축에 가운데 정렬시킨다 

주축이란?
요소가 정렬된 방향을 주축이라한다 ex) 요소가 가로로 정렬되어있으면 가로축이 주축이고 요소가 세로로 정렬되어있으면 세로축이 주축이다
교차축이란?
주축과 교차되는 축을 의미한다 ex) 주축이 가로축일 경우 교차축 = 세로축 주축이 세로축일 경우 교차축 = 가로축  

주축과 교차축의 시작점과 끝점이란? 

주축의 시작점과 끝점 :  
주축의 요소가 정렬되는 방향을 기준으로 첫요소쪽에 있는 선을 시작점 마지막 요소 쪽에 있는 선을 끝점이라 한다.

교차축의 시작점과 끝점 :
주축이 가로축일 경우 윗쪽 선 = 시작점 , 아래쪽 선 = 끝점 
주축이 세로축일 경우 왼쪽 선 = 시작점 , 오른쪽선= 끝점 

items(자식 요소)에 사용 가능한 속성

order: container(부모요소)안에 items(자식 요소)의 배치 순서를 설정한다 (html에 구조와 상관없이 배치 순서를 결정함)
기본값 : 0 
속성값 숫자(숫자가 클수록 뒤에 배치된다.)
ex)

<style>
  .container{
    border: 1px solid;
    display: flex;
    flex-wrap: wrap;
    width: 400px;
    height: 400px;
    
  }
  .box{
    width: 100px; 
    background-color: red;
    display: flex;
    justify-content:center;
    align-items: center;
  }
  .box1{
   order: 3;
  }
  .box2{
  order: 6;
  }
  </style>

  <div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box box2">3</div>
    <div class="box box1">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
  </div>

 위코드에서 content가 1,2,5,6인 요소는 order가 기본값이 0이기 때문에 html구조대로 쌓인다 하지만 box1을 가진 4 box2를 가진 3을 보면
box1은 order가 3이고 box2는 order가 6이기때문에 content가 4인 요소가 3인 요소보다 앞에 배치된다 때문에 order가 0인 1-2-5-6이 배치된 후에 4-3이 배치되므로 
결과적으로 1-2-5-6-4-3이 배치된다

 

flex-grow: container에width값을 flex-grow의 총합으로 나누어 명시한 비율만큼 items(자식 요소)의 증가 너비 비율을 설정한다
기본값:0

flex-shrink: container에width값을 flex-shrink의 총합으로 나누어 명시한 비율만큼 items(자식 요소)의 감소 너비 비율을 설정한다
기본값 1 
숫자가 크면 클수록 더많은 너비가 감소한다.
속성 값이 0이면 효과가 없다.

align-self : 교차축을 기준으로 item하나의 정렬 방법을 설정한다.

기본값: auto

속성값: 
auto: container(부모 요소)의 명시된 align-items 속성 값을 상속받는다
stretch: container안에 교차축의 공백을 채우기위해 items(자식 요소)의 크기를 늘림 (단 height값이 auto일 경우에만)
flex-start: container(부모요소)안에서 item(자식 요소 하나)를 교차축에 시작점에 정렬시킨다
flex-end: container(부모요소)안에서 item(자식 요소 하나)를 교차축에 끝점에 정렬시킨다
center: container(부모요소)안에서 item(자식 요소 하나)를 교차축에 가운데 정렬시킨다