CSS3의 신축성 카트리지 레이아웃

CSS3의 탄력성 박스 레이아웃(Flexible Box Layout) 기준은 이미 후보 추천 단계에 들어섰고 대부분의 브라우저들도 이 기준을 지원하기 시작했다. 여기서 이 기준을 소개한다.
최신 Chrome에서 아래 예.을 살펴보면 부모 요소가 가로로 세 부분으로 나누어져 있고 마우스가 어느 부분 위로 이동하면 각 부분의 폭이 자동으로 조정됩니다.

<!DOCTYPE html>

<html><head>

<style>

.flex {

  width: 420px;

  height: 250px;

  border: 1px solid #555;

  display: -webkit-flex;

  -webkit-flex-direction: row;

}

.flex > div:nth-child(1) { 

  -webkit-flex: 1 1 auto;

  background : #009246;

}

.flex > div:nth-child(2) {

  -webkit-flex: 2 1 auto;

  background : #F1F2F1; 

}

.flex > div:nth-child(3) {

  -webkit-flex: 3 1 auto;

  background : #CE2B37; 

}

.flex > div {

  -webkit-transition: width 0.7s ease-out;

  width: 60px;

}

.flex > div:hover {

  width: 240px;

}

</style>

</head><body>

<div class="flex">

  <div>one</div>

  <div>two</div>

  <div>three</div>

</div>

</body></html>

위의 예에서 먼저 부모 요소의 디스플레이: flex를 설정했습니다.flex-direction: row; ,우리가 가로로 신축성 있는 레이아웃을 사용하는 것을 나타낸다.display도 inline-flex로 설정할 수 있는데 이때 부모 요소는 inline-block의 요소와 유사하다.
다음에 우리는 세 개의 서브 요소 분석에 대해 flex 속성을 설정했다.flex 속성은 세 가지 값으로 구성되어 있는데 그것이 바로 flex-grow, flex-shrink와 flex-basis이다.flex-grow는 공간이 남으면 자동으로 증가하는 몫을 나타내고, flex-shrink는 공간이 부족할 때 자동으로 수축되는 몫을 나타낸다.flex-basis는 초기 크기를 나타낸다.빈틈을 조정할 때 먼저 부모 원소의 크기와 각 원소의 초기 크기의 합을 계산하여 양자의 차이를 얻은 다음에 각 하위 원소의 몫에 따라 그것들의 크기를 증가하거나 감소시킨다.
flex-grow와 flex-shrink의 기본값은 1입니다.flex-basis의 초기값은 0이다.flex-basic가 auto로 설정되면, 이 요소의 width나height에서 값을 얻을 수 있습니다.
위의 방법에 따라 처음에는 나머지 폭이 420-60이기 때문에×3=240이고 세 개의 서브 요소의 분배 몫은 1:2:3이기 때문에 각각 40, 80과 120으로 나뉜다.따라서 이 세 자의 실제 폭은 각각 100px, 140px와 180px이다.이와 유사하게 우리는 정지 상태에서 각 부분의 너비 변화를 계산해 낼 수 있다. 아래 표와 같다.

총 너비
남은 너비
왼쪽 열 너비
가운데 열 너비
오른쪽 열 너비
초기 상태
420
240
60 + 40 = 100
60 + 80 = 140
60 + 120 = 180
왼쪽 난간에 멈추다.
420
60
240 + 10 = 250
60 + 20 = 80
60 + 30 = 90
허들
420
60
60 + 10 = 70
240 + 20 = 260
60 + 30 = 90
오른쪽 난간에 멈추다.
420
60
60 + 10 = 70
60 + 20 = 80
240 + 30 = 270
이 표준은 비교적 큰 변화를 거쳤기 때문에, 비록 주류 브라우저들이 모두 그것을 지원하지만, 아마도 호환되지 않을 것이다.지금까지 최신 표준을 지원하는 브라우저는 크롬 21+와 Firefox 22+뿐이며, 이 중 Firefox에는 특별한 접두사가 필요 없다.상세한 상황은 아래의 참고 자료를 볼 수 있다.
참고 자료: [1] W3C - CSS Flexible Box Layout Module [2] Using CSS flexible boxes - MDN [3] Flexbox playground and code generator [4] Can I use Flexible Box Layout Module? [5] 크로스 브라우저 탄력성 레이아웃 진급 강좌 | 오펑 개발자 커뮤니티 [6] 유연한 상자 모형(Flexible Box Model) 빠른 시작 [7] CSS box-flex 속성, 신축성 상자 모형 소개 [8] CSS3 탄성 카트리지 모형과 흐름 레이아웃 - leecan블로그 [9] “Old” Flexbox and “New” Flexbox | CSS-Tricks [9]

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

초보자를 위한 간단한 카드 호버 애니메이션

html과 css만 사용하여 만든 매우 간단한 카드 호버 애니메이션을 살펴보겠습니다. css 속성을 알고 있다면 이해할 수 있지만 완전히 초보자라면 css의 기초를 배우는 것이 좋습니다. 1단계: 마크업 즉, HTM...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

CSS3의 신축성 카트리지 레이아웃

좋은 웹페이지 즐겨찾기