flex의 사용법과 속성 소개-HTML 튜토리얼-php.cn

flex의 사용법과 속성 소개

零下一度

풀어 주다： 2017-06-28 09:45:54

원래의

1959명이 탐색했습니다.

X 이 문서에서는 Flex의 사용법과 속성을 소개합니다.

이 적응형 3열 상자

<div class="flex">
  <div style="background-color:red;">红色</div>
  <div style="background-color:blue;">蓝色</div>  
  <div style="background-color:green;">绿色</div></div><style>.flex{ display: flex;}.flex div{border: 1px solid #000; flex:auto; height: 100px;}</style>

로그인 후 복사

빨간색 파란색

녹색

Flex: Flex-Grow Flex-shrink flex-basis|auto|initial|inherit; flex에는 주로

3가지 속성 값이 있습니다.

flex-grow 다른 유연한 프로젝트에 비해 프로젝트가 확장되는 정도를 지정합니다.

red

blue

green

<div class="flex1">
  <div style="background-color:red;">红色</div>
  <div style="background-color:blue;">蓝色</div>  
  <div style="background-color:green;">绿色</div></div><style>.flex1{ display: flex; width:400px;}.flex1 div{border: 1px solid #000; flex:auto; height: 200px;}.flex1 div:nth-child(1){-webkit-flex:1 0 100px;flex:1 0 100px;}.flex1 div:nth-child(2){-webkit-flex:2 0 100px;flex:2 0 100px;}.flex1 div:nth-child(3){-webkit-flex:3 0 100px;flex:3 0 100px;}</style>

로그인 후 복사

위의 예와 같이 상위 컨테이너

의 너비가 하위 요소의 너비의 합보다 클 때 트리거됩니다.

flex가 설정되어 있기 때문입니다. - 기준은 100px

flex의 너비는

400px

이고, 내부 3개의 돔의 전체 길이는

300px로 설정되어 있습니다. 남은 너비는 100입니다.

첫 번째 하위 요소의 확장 크기: (1/(1+2+3))*100, 이는 대략 16px과 같습니다.

두 번째 하위 요소의 확장 크기 : (2 /(1+2+3))*100, 이는 대략 32px과 같습니다. 세 번째 하위 요소의 확장: (3/(1+2+3))*100 , 이는 대략 48px과 같습니다.

각각 flex-shrink 는 다른 유연한 항목에 비해 항목이 축소되는 정도를 지정합니다.

빨간색파란색

녹색

<div class="flex2">
  <div style="background-color:red;">红色</div>
  <div style="background-color:blue;">蓝色</div>  
  <div style="background-color:green;">绿色</div></div><style>.flex2{ display: flex; width:400px;}.flex2 div{border: 1px solid #000; flex:auto; height: 100px;}.flex2 div:nth-child(1){-webkit-flex:0 1 200px;flex:0 1 200px;}.flex2 div:nth-child(2){-webkit-flex:0 2 200px;flex:0 2 200px;}.flex2 div:nth-child(3){-webkit-flex:0 3 200px;flex:0 3 200px;}</style>

로그인 후 복사

위의 예에서와 같이 상위 컨테이너의 너비 가 하위 요소 너비의 합보다 작을 때 트리거됩니다.

왜냐하면

flex-basis가 200px로 설정되었기 때문입니다

flex의 너비는

400px, 내부 3개 돔의 전체 너비 길이는 600px로 설정되어 남은 너비보다 200px 적게 남습니다. ㅋㅋㅋ 200*3 =1200;

따라서 첫 번째 하위 컨테이너의 너비는 200-(200*1/1200)*200입니다. =166px

따라서 두 번째 하위 컨테이너의 너비는 200-(200*2/1200)*200=134px입니다.

따라서 세 번째 하위 컨테이너의 너비는 200-(200*3/1200)*200=100px입니다.

"flex" 속성에서 "flex-basis"가 0이 아닌 경우(auto 값 포함, 이 경우 스케일링 기준 값은 자체 콘텐츠의 너비와 동일함) " flex child"는 컨테이너의 남은 공간을 할당합니다(나머지 공간은 컨테이너 너비에서 각 항목의 flex 기본 값을 뺀 것과 같습니다) "flex" 속성에서 "flex-basis"가 0과 같으면 "flex" children"은 컨테이너의 모든 공간을 할당합니다(각 항목의 플렉스 기준 값이 함께 추가되기 때문에 0과 같으므로 나머지 공간은 컨테이너의 너비에서 각 항목의 플렉스 참조 값을 뺀 것과 같습니다. 즉, , 마이너스 0, 최종 남은 공간 값은 컨테이너의 너비와 같음)이므로 이 기능을 사용하여 각 하위 항목에 대해 "flex:n"을 정의하여 비례적으로 수행할 수 있습니다. 컨테이너의 전체 너비를 균등하게 나눕니다 연두색 = 지원

Red

= 지원 안함

핑크

= 부분적으로 지원

값