뇌 채우기 공간

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

카테고리 없음

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

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

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-flex/ flex-flow 주축을 설정 /flex-wrap 줄바꿈 속성

flex container 속성 display  - flex  - inline-flex .container{ border: 2px solid red; display:inline-flex; } .container .item{ width:100px; height: 100px; border: 2px solid; } .container{ border..

sso-feeling.tistory.com

 

justify-content

주축의 정렬 방법을 설정함

flex-start : items를 시작점으로 정렬

flex-end : items를 끝점으로 정렬

center: items를 가운데 정렬

space-between: 시작 item은 시작점에, 마지막 item은 끝점에 정렬되고 나머지는 사이에 고르게 정렬됨

space-around : items를 균등한 여백을 포함하여 정렬

 

.container{
  border: 2px solid red;
  display:flex;
 justify-content:space-around;
}
.container .item{
  width:100px;
  height: 100px;
  border: 2px solid;  
 
}
<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

 

 align-content

교차 축의 정렬 방법을 설정한다.

stretch : container의 교차축을 채우기위해 items를 늘림

flex-start : items를 시작점으로 정렬

flex-end : items를 끝점으로 정렬

center: items를 가운데 정렬

space-between: 시작 item은 시작점에, 마지막 item은 끝점에 정렬되고 나머지는 사이에 고르게 정렬됨

space-around : items를 균등한 여백을 포함하여 정렬

출처 CSS Flex(Flexible Box) 완벽 가이드 | HEROPY

 

CSS Flex(Flexible Box) 완벽 가이드

많은 경우 float, inline-block, table 등의 도움을 받아서 수평 레이아웃을 구성하지만 이는 차선책이며, 우리는 Flex(Flexible Box)라는 명확한 개념(속성들)으로 레이아웃을 쉽게 구성할 수 있습니다. CSS F

heropy.blog

 

 

<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-content: stretch;

}
.container .item{
  width:100px;
  height: auto;
  border: 2px solid;  
 
}

align-items

교차 축에서 items의 정렬방법을 설정한다.

items가 한줄일 경우 많이 사용한다.

stretch : container의 교차축을 채우기위해 items를 늘림

flex-start : items를 시작점으로 정렬

flex-end : items를 끝점으로 정렬

center: items를 가운데 정렬

baseline: items를 문자 기준선에 정렬

 

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