download

git clone https://github.com/lzxb/flex.css.git
Copy the code

npm

npm install flex.css --save
Copy the code

Why do I need flex.css?

In mobile development, not all browsers, WebView, wechat and other versions support standard Flex, but almost all support -webkit-box, so the main function of flex.css is to ensure that every property can support standard Flex or the old version of -webkit-box. Because flex. CSS uses autoprefixer compilation, it can be rolled back to the older version of -WebKit-Box in case the browser does not support the standard Flex layout, ensuring that the layout will look the same on mobile devices. So, a mobile terminal fast layout artifact was born...Copy the code

merits

Concise API, familiar attribute values, no pressure to get started. Use attributes in HTML, layout and CSS separation, clear layout structure makes you easier to maintain, you can change the layout without changing the CSS. In particular, using the Data-Flex layout in React makes it easier to maintain.Copy the code

support

Flex layout is divided into older versions dispaly: Box; Dispaly: Flexbox; , and now the standard version display: Flex; Display :-webkit-box; 4.4 Standard version display: flex; Display :-webkit-box; 7.1 Start Standard version display: flex; CSS flex. CSS is compatible with both the latest version and the previous version, ensuring that if the browser does not support the latest version, it will be rolled back to the earlier version.Copy the code

use

Use flex. CSS to match the flex properties with data-flex. CSS to match the data-flex properties with React. If the ES6 compiler is configured, flex attributes can be matched directly with: import 'flex.css'; Use 'flex.css/dist/data-flex.css'; -->
      

    
       

        Let's see if I'm in the middle
       

  
      



  
      

    
       

        Let's see if I'm in the middle
       

  
      
Copy the code

Flex Properties

-Leonard: Dir, main axis, top to bottom, right to left, top to bottom, left to rightCopy the code
Main: axis alignment right: from right to left left: from left to right (default) center: center alignmentCopy the code
-Howard: Cross axis alignment, top to bottom, bottom to bottom. -Howard: Baseline, baseline, and center alignment. -Howard: Stretch height, side by side.Copy the code
Box sets mean space is divided between the first and the other elements. Last: space is divided between the last and the other elements. The first element at both ends is divided between the other elementsCopy the code

Flex-box property description

The value ranges from 0 to 10. If the value is set to 0, the excess space of the child element does not occupy excess space. Excess space allocation = The sum of the current flex-box value/the sum of the flex-box value of the child elementCopy the code

adviertisement

Shenzhen HTML5 developer Community: 170761660 NodeJS Front-end sharing group: 133240225Copy the code

demo