[CSS] flex

새로운 display 속성

block 요소의 성질을 가지며, 부모의 속성을 통해 자식을 컨트롤한다

 

부모 : flex-container

자식: flex-item

 

flex는 자신의 직계한테만 영향을 미친다

 

---

 

display: flex;

전체

 

display: inline-flex;

콘텐츠만

 

flex-direction

정렬 방향 결정

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

 

justify-content

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

.container {
  display: flex;
  justify-content: flex-start;
  justify-content: flex-end;
	justify-content: center;
  justify-content: space-between;
  justify-content: space-around;
  justify-content: space-evenly; 👈 완전 균등
}

 

colum/reverse vs colum/flex-end

 

reverse

flex-end