• 회원가입
  • 로그인
  • 구글아이디로 로그인

[flex] CSS - flex 속성(I) ☆ - flex-grow, flex-shrink, flex-basis 속성 일괄 정의 (= flex속성 = 플렉스속성, IE11) ※ 플렉스 아이템용 속성

목차
  1. flex 예제 -  flex-grow, flex-shrink, flex-basis 속성 일괄 정의
  2. flex 정의
  3. flex 구문
  4. flex 예제 - hover 시, 너비 늘이기
  5. 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>

 

결과보기

 

 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
intro CSS - 정의・장점・구문・초기화 + 주석
intro CSS - 발전사 (CSS1 → CSS2.01 → CSS) + 제작관리 단체
intro CSS - 스타일 적용 방법 3가지 ★★★ - (인라인스타일 / 내부스타일 / 외부스타일) CSS적용순서 +…
selector CSS - 선택자 (Selector) 종류 + 선택자에 사용가능한 문자 (= 선택자 이름짓기 주의사항)
selector CSS - ID선택자, class선택자 + CSS우선순위 ★★★ (= 아이디선택자, 클래스선택자, CSS명시…
selector CSS - * 전체선택자 - 모든 요소 선택. (요소선택자군) ※ 아스테리크 (asterisk) 선택자 = …
selector CSS - element 요소선택자 ★ - 지정 요소 선택. (요소선택자군)
selector CSS - element,element 병렬선택자 ★ - 쉼표로 나열된 여러 요소 선택. (= 여러 요소선택…
selector CSS - element element 자손선택자 ★ - 자손요소 (요소선택자)
selector CSS - element>element 자식선택자 ★ - 직접 자식요소만 선택. (요소선택자, IE7)
selector CSS - element+element 인접선택자 ★★ - 바로 뒤 인접형제요소 (요소선택자, IE7) + …
selector CSS - element~element 형제선택자 ★★ - 지정요소 뒤의 모든 특정형제요소 (요소선택자군…
selector CSS - [attribute] 속성선택자 - 특정 속성 보유 요소 (IE7) ※ 여러 속성 보유 선택자
selector CSS - [attribute=value] 속성선택자 - 지정속성값보유요소 선택 (IE7) ※ 특정 (속성/…
1/25
목록
찾아주셔서 감사합니다. Since 2012