목차
- flex 예제 - flex-grow, flex-shrink, flex-basis 속성 일괄 정의
- flex 정의
- flex 구문
- flex 예제 - hover 시, 너비 늘이기
- flex 예제 - flex:1 코드 의미
flex 예제 - flex-grow, flex-shrink, flex-basis 속성 일괄 정의
<style>
#hz {
width: 400px;
height: 300px;
border: 1px solid black;
display: -webkit-flex; /* Safari */
display: flex;
}
#hz div {
-webkit-flex: 1; /* Safari 6.1+ */
-ms-flex: 1; /* IE 10 */
flex: 1;
}
</style>
<div id="hz">
<div style="background:red;">홈짱닷컴</div>
<div style="background:blue;">Homzzang.com</div>
<div style="background:green;">2012</div>
</div>
결과보기
flex 정의
flex-grow, flex-shrnk, flex-basis 속성을 일괄 정의.
1.
아래 속성들의 단축속성.
- flex-grow 속성 : 컨테이너 너비 늘어날 때 아이템 너비 비율 설정. (기본값: 0)
- flex-shrink 속성 : 컨테이너 너비 줄어들 때, 아이템 너비 비율 설정. (기본값: 1)
- flex-basis 속성 : 아이템 초기 너비(길이). (주의: flex-basis 원래 기본값은 auto이나, flex 단축 속성에선 기본값이 0으로 바뀜.)
2.
- 플렉스 아이템에 대해서 유연한 길이 설정.
- 플렉스 아이템이 아니면 flex 효과 안 생김.
3.
- 기본값: 0 1 auto
- 상속여부: X
- 애니효과: O
- CSS버전: CSS3
- JS구문: object.style.flex="1";
4.
- IE11 이상 최신 브라우저 지원.
- IE10 경우, -ms- 접두어 필요.
- 일부 구형브라우저 경우 접두어 추가 시 가능.
5. flex 예제 더 보기
https://developer.mozilla.org/ko/docs/Web/CSS/flex
flex 구문
selector {flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;}
[속성값]
flex-grow
컨테이너 너비가 늘어날 때 아이템 너비 비율 설정.
flex-shrink
컨테이너 너비가 줄어들 때 아이템 너비 비율 설정.
flex-basis
아이템 길이.
가능한 값 : "auto", "inherit", 숫자 다음에 "%", "px", "em"또는 기타 길이 단위
auto
(= 1 1 auto) 의미.
none
(= 0 0 auto) 의미.
initial
이 속성의 기본값으로 설정. 즉, (= 0 0 auto) 의미.
inherit
부모요소 속성값 상속
flex 예제 - hover 시, 너비 늘이기
[예제1] - 브라우저 자동 설정
※ flex 설정 상태에서 각각의 너비를 지정 안 하면, 브라우저가 자동 설정.
<style>
#hz .box {
display: flex;
height: 200px;
}
#hz .box .list {
position: relative;
width: 50%;
background-size: cover;
transition: all .8s cubic-bezier(.215, .610, .355, 1);
}
#hz .box .list:nth-child(1) {
background-color: #ddd;
}
#hz .box .list:nth-child(2) {
background-color: #eee;
}
#hz .box .list:hover {
width: 100%;
}
</style>
<section id="hz">
<div class="box">
<div class="list">1</div>
<div class="list">2</div>
</div>
</section>
결과보기
[예제2] - hover 시, 실제 너비 100% 적용하기
※ 위 코드에 파란색코드가 추가됨.
<style>
#hz .box {
display: flex;
height: 200px;
}
#hz .box .list {
position: relative;
width: 50%;
background-size: cover;
transition: all .8s cubic-bezier(.215, .610, .355, 1);
}
#hz .box .list:nth-child(1) {
background-color: #ddd;
}
#hz .box .list:nth-child(2) {
background-color: #eee;
}
#hz .box .list:hover {
width: 100%;
}
#hz .box:hover .list:not(:hover) {
width: 0%;
overflow:hidden;
}
</style>
<section id="hz">
<div class="box">
<div class="list">1</div>
<div class="list">2</div>
</div>
</section>
결과보기
[예제3] - 사용자 지정 비율로 늘이기
<style>
#hz .box {
display: flex;
height: 200px;
}
#hz .box .list {
position: relative;
width: 50%;
background-size: cover;
transition: all .8s cubic-bezier(.215, .610, .355, 1);
}
#hz .box .list:nth-child(1) {
background-color: #ddd;
}
#hz .box .list:nth-child(2) {
background-color: #eee;
}
#hz .box .list:hover {
width: 65%;
}
#hz .box:hover .list:not(:hover) {
width: 35%;
overflow:hidden;
}
</style>
<section id="hz">
<div class="box">
<div class="list">1</div>
<div class="list">2</div>
</div>
</section>
결과보기
배르만 님 (220906) https://sir.kr/qa/472560
flex 예제 - flex:1 코드 의미
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
[예제1] - flex:1 사용 경우
<style>
.container {
display: flex;
height: 200px; /* 컨테이너의 높이를 지정 */
}
.item {
flex: 1;
border: 1px solid black;
text-align: center;
padding: 20px;
}
</style>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
결과보기
[예제2] - flex-grow: 1; flex-shrink: 1; flex-basis: 0%; 사용 경우
<style>
.container {
display: flex;
height: 200px; /* 컨테이너의 높이를 지정 */
}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
border: 1px solid black;
text-align: center;
padding: 20px;
}
</style>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
결과보기
