목차
- align-content 예제 - 줄바꿈 시, 교차축 기준 라인 정렬
- align-content 정의
- align-content 구문
align-content 예제 - 줄바꿈 시, 교차축 기준 라인 정렬
<style>
#hz {
margin:0 auto;
width: 200px;
height: 300px;
border: 1px solid silver;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: center;
align-content: center;
}
#hz div {
width: 200px;
height: 70px;
line-height:70px;
text-align:center;
color:white;
letter-spacing:2px;
}
#hz .red {background:red;}
#hz .blue {background:blue;}
#hz .green {background:green;}
</style>
<div id="hz">
<div class="red">홈짱닷컴</div>
<div class="blue">Homzzang.com</div>
<div class="green">웹기초 강의</div>
</div>
결과보기
align-content 정의
flex-wrap 속성의 속성값이 nowrap 아닌 경우 (즉, 최소 2줄 이상인 경우),
교차축 (= 반대축)의 콘텐츠 정렬 방법을 설정.
1.
- align-items 속성과 유사하나, 플렉스 항목을 정렬하는 대신, 줄바꿈 된 플렉스 선을 정렬.
- align-content 속성 적용하려면 여러 줄의 항목이 있어야 함.
2. cf.
justify-content: 기본축에서 아이템 정렬 방법 지정.
3.
- 기본값: stretch
- 상속여부: X
- 애니효과: X
- CSS버전: CSS3
- JS구문: object.style.alignContent="center"
4.
IE11 이상 주요 최신 브라우저 지원.
5. MDN align-content 예제 보기
https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
align-content 구문
selector {align-content: 속성값;}
[속성값]
stretch
선이 늘어나 나머지 공간 차지. 결과보기
center
선이 플렉스 상자의 세로 중앙 부분에서 감싸짐. 결과보기
flex-start
선이 플렉스 상자의 세로 시작 부분에서 감싸짐. 결과보기
flex-end
선이 플렉스 상자의 세로 끝 부분에서 감싸짐. 결과보기
space-between
선이 플렉스 상자의 세로 양쪽 끝으로 균등 배분. 결과보기
space-around
선이 플렉스 상자의 양쪽 끝으로 균등 배분되면서, 양쪽 끝에 절반 정도의 공간 생김. 결과보기
initial
이 속성의 기본값으로 설정
inherit
부모 요소의 속성값 상속
