뇌 채우기 공간

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

WEB/html,CSS

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

자바칩 프라푸치노 2021. 4. 18. 16:22

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

 

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

2021.04.18 - [WEB/html,CSS] - [html][css] flex container 속성 / display : flex, inline-flex/ flex-flow 주축을 설정 /flex-wrap 줄바꿈 속성 [html][css] flex container 속성 / display : flex, inline-fle..

sso-feeling.tistory.com

<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;
}

728x90
저작자표시 비영리 변경금지 (새창열림)

'WEB > html,CSS' 카테고리의 다른 글

[html][css] grid 에 대해서 / display /grid-template-rows/ grid-template-columns/grid-column/gird-template-areas/gap(grid-row-gap)  (0) 2021.04.19
[html][css] flex items속성/order/ flex/flex-grow/flex-shrink/flex-basis/align-self  (0) 2021.04.19
[html][css] flex container 속성 / display : flex, inline-flex/ flex-flow 주축을 설정 /flex-wrap 줄바꿈 속성  (0) 2021.04.18
[html][css] flex / 수평정렬하는 법  (0) 2021.04.18
[html][css] 다단 columns  (0) 2021.04.18
'WEB/html,CSS' Related Articles more