[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를 문자 기준선에 정렬
