CSS flex

flex 선언

.container {
  display: flex
  /* display: inline-flex */
}

 

flex 방향

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

 

 

줄넘김

.container {
  flex-wrap: nowrap;
  /* flex-wrap: wrap; */
  /* flex-wrap: wrap-reverse; */
}

nowrap: 영역 밖으로 삐져나감

wrap: 줄 넘김

wrap-reverse: 위로 줄 넘김

 

 

메인축 방향 정렬

.container {
  justify-content: flex-start;
  /* justify-content: flex-end; */
  /* justify-content: center; */
  /* justify-content: space-between; */
  /* justify-content: space-around; */
  /* justify-content: space-evenly; */
}

 

 

수직축 방향 정렬

.container {
  align-items: stretch;
  /* align-items: flex-start; */
  /* align-items: flex-end; */
  /* align-items: center; */
  /* align-items: baseline; */
}

 

 

여러행 정렬

.container {
  flex-wrap: wrap;
  align-content: stretch;
  /* align-content: flex-start; */
  /* align-content: flex-end; */
  /* align-content: center; */
  /* align-content: space-between; */
  /* align-content: space-around; */
  /* align-content: space-evenly; */
}

 

 

flex 축약

.item {
  flex: 1;
  /* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
  flex: 1 1 auto;
  /* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
  flex: 1 500px;
  /* flex-grow: 1; flex-shrink: 1; flex-basis: 500px; */
}

 

flex 화면 중앙 정렬

.container {
  display: flex; 
  align-items: center; 
  justify-content: center; 
  width: 100%; 
  height: 100vh;
}

.container div {
  width: 100px; 
  height: 100px;
  border: 1px solid #000
}

 

참고:

https://studiomeal.com/archives/197