오늘 배운 내용

Flex

컨텐츠를 정렬하거나 공간을 나눌 수 있는 CSS 속성의 집합

flex-direction

정렬 방향을 결정

.container {
  display: flex;
	flex-direction : row;
}

.container {
	display : flex;
	flex-direction : row-reverse;
}

.container{
	display : flex;
	flex-direction : column;	
}

.container{
	display : flex;
	flex-direction : column-reverse;	
}

flex-item들은 기본적으로 Axis를 기준으로 정렬

justify-content

축을 기준으로 배열의 위치를 조종하거나 아이템 간의 간격을 설정

html

<article>
  <div class="left_side">
    <div class="blue"></div>
    <div class="green"></div>
    <div class="yellow"></div>
  </div>
  <div class="center">
    <div class="blue"></div>
    <div class="yellow"></div>
  </div>
  <div class="right_side">
    <div class="blue"></div>
    <div class="green"></div>
    <div class="yellow"></div>
  </div>
</article>

css

div{
  width:50px;height:50px
}

.blue{background:blue}
.green{background:green}
.yellow{background:yellow}


article{  
  background:black;
  width:350px;
  height:300px;
}


.right_side, .center, .left_side{
  height:300px;
}