Layout with Flex Container

display: flex

display: flex 는 부모의 박스요소에 적용시켜, 자식 박스의 방향과 크기를 설정할 수 있는 방법이다.  

기본값으로는 자식 element가 왼쪽에서 오른쪽으로 차례대로 이어진다. 

(.css)
.flex-container {
  display: flex;  //부모에서 선언
  background-color: blue
}

.flex-container > div {
  background-color: lightgreen;
  margin: 1px;
  padding: 15px;
  font-size: 15px;
}

(.html)
<div class="flex-container"> //부모
  <div>Element 1</div> //자식1
  <div>Element 2</div> //자식2
  <div>Element 3</div> //자식3
</div>

기본 display: flex의 결과

 

회색부분은 flex container, 즉 부모박스의 영역이고, 초록색 박스들은 flex item, 자식박스의 영역이다. 자식 박스에 어떠한 속성도 부여하지 않았다면 그대로 부모 박스의 영향을 받게 된다. 

Parent Element (Container)	Child Elements (Items)
display 속성에 flex를 적용한다	flex 속성에 값을 적용하여 사용한다. (값설정을 안할시 기본값)