flex.css: 이동단 flex 레이아웃

flex.css 빠른 레이아웃
flex란 무엇인가.css
css3 flex 레이아웃은 많은 사람들이 이미 들은 적이 있고 심지어 개발에서 사용한 적이 있다고 믿습니다. flex.css는 flex 레이아웃에 대한 봉인된 것으로 간결한 속성 설정을 통해 모바일 브라우저의 각종 브라우저를 완벽하게 실행할 수 있으며 i10+의 각종 PC 브라우저에서도 실행할 수 있다.이것은 천연적으로 페이지 레이아웃과 css를 분리하여 css가 요소의 디스플레이 효과에 전념하도록 할 수 있다. 나는 성명식 레이아웃이라고 부른다.
왜 flex가 필요해요.css
인용 flex.css github 주소에 대한 설명:모바일 개발에서 모든 브라우저, 웹뷰, 위챗 등 각종 버전이 표준 flex를 지원하는 것은 아니지만 기본적으로 -webkit-box를 지원하기 때문에 flex.css의 주요 역할은 모든 속성이 표준 flex나 구 버전의 -webkit-box를 지원할 수 있도록 하는 것이다. flex.css는 autoprefixer 컴파일을 사용하기 때문에 브라우저에서 표준 flex.flex 레이아웃의 경우 구 버전인 웹키트박스로 스크롤하여 모바일 기기에서 같은 레이아웃 효과를 나타낼 수 있도록 합니다.그래서 이동단이 빠르게 배치되는 신기가 탄생했다.
npm 설치

npm install flex.css --save
or
yarn add flex.css

flex 및 데이터-flex
flex.css는 두 가지 버전이 있는데 하나는 flex입니다.css, 하나는 데이터-flex.css, 이 두 버전은 사실 같다. 유일한 차이점은 하나는 flex 속성 설정을 사용하고 하나는 데이터-flex 속성 설정을 사용한다.react는 flex 속성의 직접 레이아웃을 지원하지 않기 때문에 데이터-flex.css는 실제로react를 위해 탄생한 것이다.웹 패키지 패키지를 사용하고 npm을 설치한 후 ES6 컴파일러를 설정하면 flex 속성 일치를 직접 사용할 수 있습니다.
사용
끌어들이다

import 'flex.css';
or
import 'flex.css/dist/data-flex.css';

*html 파일에 4다음과 같이 요소에 속성을 직접 추가합니다.

flex 속성 전체

dir：    
  top：    
  right：    
  bottom：    
  left：    （  ）

main：      
  right：    
  left：    （  ）
  justify：    
  center：    

cross：       
  top：    （  ）
  bottom：    
  baseline：    
  center：    
  stretch：      

box：     
  mean：       
  first：            ，           
  last：             ，           
  justify：             ，           

flex-box 속성 설명: 수치 범위(0-10), 하위 요소의 여분의 공간을 어떻게 분배하는지 단독으로 설정하고 0으로 설정하면 하위 요소는 여분의 여분의 공간을 차지하지 않습니다. 여분의 공간 분배 = 현재 flex-box 값/하위 요소의 flex-box 값을 합치면

         ，        

  
1
  
2
  
3

참고 문장

flex.css: 이동단자 flex 레이아웃 신기