CSS

[flex] CSS - flex-wrap 속성(C) ★ - 아이템 줄바꿈 가능 여부. (= flex-wrap속성 = 플렉스랩속성, IE11) ※ 플렉스 컨테이너용 속성

목차
  1. flex-wrap 예제 - wrap 경우, 줄바꿈 O + 아이템 순차 나열
  2. flex-wrap 정의
  3. flex-wrap 구문
  4. flex-wrap 예제 - nowrap 경우, 줄바꿈 X + 아이템 순차 나열
  5. flex-wrap 예제 - wrap-reverse 경우, 줄바꿈 O + 아이템 역순 나열
  6. flex-wrap 관련 주소

 

flex-wrap 예제 - wrap 경우, 아이템 줄바꿈 상태 

 

<style> 

#hz {

  width: 200px;

  height: 200px;

  border: 1px solid silver;

  display: -webkit-flex; /* Safari */

  -webkit-flex-wrap: wrap; /* Safari 6.1+ */

  display: flex;

  flex-wrap: wrap;

}


#hz div {

  width: 50px;

  height: 50px;

}

</style>


<div id="hz">

  <div style="background-color:coral;">A</div>

  <div style="background-color:lightblue;">B</div>

  <div style="background-color:khaki;">C</div>

  <div style="background-color:pink;">D</div>

  <div style="background-color:lightgrey;">E</div>

  <div style="background-color:lightgreen;">F</div>

</div>

 

결과보기

※ 4개는 위에, 2개는 밑에 정렬. (즉, 가로 너비 벗어나면 밑으로 내려감.)

 

flex-wrap 정의

 
플렉스 아이템 줄바꿈 가능 여부 선택.

 


 

1.

  • 요소가 플렉스아이템 아닌 경우, 적용 안 됨.
  • flex-flow 속성 - flex-direction 속성과 flex-wrap 속성을 일괄 지정.

 

2.

  • 기본값: nowrap
  • 상속여부: X
  • 애니효과: X
  • CSS버전: CSS3
  • JS구문: object.style.flexWrap="nowrap";

 

3.

IE 11 이상 주요 최신 브라우저 지원. (단, IE 11 경우, 부분 지원.)

 

4. MDN flex-wrap 예제 보기

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

 

 

flex-wrap 구문

 

selector {flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;}

 


[속성값]

 

nowrap

아이템 줄바꿈 허용 X (※ 필요 시, 아이템 크기 축소해 한 줄에 배치) (기본값)

 

wrap

아이템 줄바꿈 허용 O + 컨테이너 앞단부터  아이템 순차 나열


wrap-reverse

아이템 줄바꿈 허용 O + 컨테이너 끝단 왼편부터 아이템 역순 나열

  • 역순 의미: flex-direction:row 경우, 플렉스 상자 끝 왼쪽부터 채움. /  flex-direction:row 경우, 플렉스 상자 끝 오른쪽부터 채움. / flex-direction:column 경우, 플렉스 상자 왼쪽 상단부터 채움. / flex-direction:column-reverse 경우, 플렉스 상자 오른쪽 하단부터 채움./

 

initial

이 속성의 기본값으로 설정.

 

inherit

부모요소 속성값 상속.

 

 

flex-wrap 예제 - nowrap 경우, 아이템 줄바꿈 상태

 

<style> 

#hz {

  width: 200px;

  height: 200px;

  border: 1px solid silver;

  display: -webkit-flex; /* Safari */

  -webkit-flex-wrap: nowrap; /* Safari 6.1+ */

  display: flex;

  flex-wrap: nowrap;

}


#hz div {

  width: 50px;

  height: 50px;

}

</style>


<div id="hz">

  <div style="background-color:coral;">A</div>

  <div style="background-color:lightblue;">B</div>

  <div style="background-color:khaki;">C</div>

  <div style="background-color:pink;">D</div>

  <div style="background-color:lightgrey;">E</div>

  <div style="background-color:lightgreen;">F</div>

</div>

 

결과보기

※ 6개가 옆으로 나란히 정렬.

 

flex-wrap 예제 - wrap-reverse 경우, 아이템 줄바꿈 상태

 

<style> 

#hz {

  width: 200px;

  height: 200px;

  border: 1px solid silver;

  display: -webkit-flex; /* Safari */

  -webkit-flex-wrap: wrap-reverse; /* Safari 6.1+ */

  display: flex;

  flex-wrap: wrap-reverse;

}


#hz div {

  width: 50px;

  height: 50px;

}

</style>


<div id="hz">

  <div style="background-color:coral;">A</div>

  <div style="background-color:lightblue;">B</div>

  <div style="background-color:khaki;">C</div>

  <div style="background-color:pink;">D</div>

  <div style="background-color:lightgrey;">E</div>

  <div style="background-color:lightgreen;">F</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 자손선택자 ★ - 자손요소 (요소선택자)
1/33
목록
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드 2
제작의뢰
Q&A
커뮤니티 2
웹유틸
회원센터
홈짱 PC버전 로그인