목차
- flex-basis 예제 - 아이템 초기 길이
- flex-basis 정의
- flex-basis 구문
- flex-basis 예제 - 3단 레이아웃
flex-basis 예제 - 아이템 초기 길이
<style>
#hz {
width: 300px;
height: 100px;
border: 1px solid silver;
display: -webkit-flex; /* Safari */
display: flex;
}
#hz div {
-webkit-flex-grow: 0; /* Safari 6.1+ */
-webkit-flex-shrink: 0; /* Safari 6.1+ */
-webkit-flex-basis: 50px; /* Safari 6.1+ */
flex-grow: 0;
flex-shrink: 0;
flex-basis: 50px;
}
#hz div:nth-of-type(2) {
-webkit-flex-basis: 100px; /* Safari 6.1+ */
flex-basis: 100px;
color:white;
}
</style>
<div id="hz">
<div style="background-color:red;">50px</div>
<div style="background-color:blue;">100px</div>
<div style="background-color:pink;">50px</div>
<div style="background-color:green;">50px</div>
<div style="background-color:violet;">50px</div>
</div>
결과보기
flex-basis 정의
플렉스 아이템의 초기 길이. (기본값: auto)
(단, flex 단축 속성 사용 시, flex-basic 기본값이 0으로 세팅됨.)
1.
2.
플렉스 아이템 아닌 경우엔 적용 안 됨.
3.
- 기본값: auto
- 상속여부: X
- 애니효과: O
- CSS버전: CSS3
- JS구문: object.style.flexBasis="200px";
4.
IE11 이상 최신브라우저 지원.
일부 구형 브라우저 경우, 브라우저접두어 필요.
5. MDN flex-basis 예제보기
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
flex-basis 구문
selector {flex-basis: number|auto|initial|inherit;}
[속성값]
number
길이 단위. 또는, % (백분율)
0 : 기본축에서 flex-grow, flex-shrink 설정 비율대로 아이템 너비 배분. (flex 단축 속성 사용 시, 기본값)
(∵ 아이템 너비 0이므로 여백이 100%이고, 여백을 비율대로 나눠 배분.)
auto
기본축에서 아이템 차지 공간 제외한 여백을 아이템에 자동으로 골고루 배분.
※ flex-grow, flex-shrink 될 때, 여백을 따라 변동. (기본값)
※ 아이템 길이 값 없는 경우, 그 안의 내용 길이에 의해 결정.
initial
이 속성의 기본값으로 설정.
inherit
부모요소의 속성값 상속.
flex-basis 예제 - 3단 레이아웃
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
* { margin: 0; padding: 0; }
.hz {
width: 100%;
}
.hz .contents {
display: flex;
}
.hz .contents > :nth-child(1), .hz .contents > :nth-child(3) {
flex-basis: 20%;
}
.hz .contents > :nth-child(2) {
flex-basis: 60%;
}
.hz .contents > :nth-child(3) > img {
transform: scaleX(-1);
}
</style>
</head>
<body>
<div class="hz">
<header>홈짱닷컴 (Homzzang.com)</header>
<article class="contents">
<section><img src="https://i.imgur.com/PQNhCln.gif" /></section>
<section>
<div>HTML</div>
<div>CSS</div>
<div>JavaScript</div>
<div>jQuery</div>
</section>
<section><img src="https://i.imgur.com/YrkG5xB.gif" /></section>
</article>
<footer>Since 2012</footer>
</div>
</body>
</html>
결과보기
배르만 님 (230629) https://sir.kr/qa/503426
