flex.css can run perfectly in various mobile browsers, even in various PC browsers such as ie10+
flex and data-flex
flex.css has two versions, one is flex.css and the other is data-flex.css, these two versions are actually the same,
The only difference is that one is set using the flex property and the other is set using the data-flex property. react does not support direct layout with flex properties, so data-flex.css is actually born for react
Official address: https://github.com/lzxb/flex.css
npm install:
npm install --save flex.css
Instructions for use:
<!--
Introduce the css file in the dist directory into your page, import
flex.css according to your needs, use the flex attribute to match
data-flex.css use the data-flex attribute to match (React uses) if you use webpack packaging , After npm is installed and ES6 compiler is configured, flex property matching can be used directly: import 'flex.css'; data-flex property matching can be used directly (react use) import 'flex.css/dist/data-flex .css'; --> <!-- flex properties match, simple example of centering child elements: --> < div flex= "main:center cross:center " style= "width:500px; height: 500px; background: #108423 "> < div style= "background: #fff ">See if I'm centered</ div> </ div> <!-- data-flex attribute matching, simple example of centering child elements: --> < div data-flex= "main:center cross:center " style= "width:500px; height: 500px; background: #f1d722 "> < div style= "background: #fff ">See if I am centered</ div> </ div >
flex properties
dir：主轴方向
top：从上到下
right：从右到左
bottom：从下到上
left：从左到右（默认）
main：主轴对齐方式
right：从右到左
left：从左到右（默认）
justify：两端对齐
center：居中对齐
cross：交叉轴对齐方式
top：从上到下（默认）
bottom：从上到下
baseline：基线对齐
center：居中对齐
stretch：高度并排铺满
box：子元素设置
mean：子元素平分空间
first：第一个子元素不要多余空间，其他子元素平分多余空间
last：最后一个子元素不要多余空间，其他子元素平分多余空间
justify：两端第一个元素不要多余空间，其他子元素平分多余空间