CSS grid, flex

ksung1889·2021년 3월 22일
0

word-break:break-all;
테이블 만들고 박스 크기에 맞춰 다음줄로 넘길때 사용

화면 가운데 배치하기 위해
1) 전체 테이블을 클래스 하나로 덮어 쓴다.


2) 그 안에 컨테이너로 감싼다.

3) 그 안에다 아이템으로 열거한다.

<div class="outer">
  <div class="container">
    <div class="item">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
    <div class="item">BB</div>
    <div class="item">CC</div>
    <div class="item">DD</div>
    <div class="item">EE</div>
    <div class="item">FF</div>
    <div class="item">GG</div>
    <div class="item">HH</div>
  </div>
</div>

.outer{
display : flex;
justify-content: center;
height : 100vh; // 화면 세로 방향 스크린 다 채우기
align-items: center;
}

height : 100vh; // 화면 세로 방향 스크린 다 채우기

// 화면 가운데 배치

.container{
display : grid;
grid-template-columns : 1fr 2fr 1fr;
grid-auto-rows : minmax(100px, auto);
word-break:break-all;
}

word-break:break-all; :텍스트 다음 줄로 내리기

텍스트 가로방향 가운데 정렬은 text-align : center;
텍스트 세로방향 정렬은 margin과 padding으로 적절히 준다.

.item{
display : flex;
justify-content: center;
align-items: center;
}

아이템도 마찬가지로 위와 같은 방법으로 가운데 배치

profile
Front-Dev

0개의 댓글