[html][css] 글자 가운데 정렬 하는법/ flex/

2021.04.18 - [분류 전체보기] - [html][css] flex container 속성/ justify-content 주축의 정렬 방법/ align-content교차 축의 정렬 방법/align-items

[html][css] flex container 속성/ justify-content 주축의 정렬 방법/ align-content교차 축의 정렬 방법/align-item

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
   <div class="item">E</div>
   <div class="item">F</div>
</div>

.container{
  height: 400px;
  border: 2px solid red;
  display:flex;
  flex-wrap: wrap;
  align-items: baseline;

}
.container .item{
  width:100px;
  height: 100px;
  border: 2px solid;  
  font-szie: 30px;
/*  하나의 item도 컨테이너 처럼 flex를 한다.  */
  display: flex;
  justify-content:center;
  align-items:center;
}