🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
[TOC] >参考阮一峰[网址](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html) ## 主轴属性 6个属性在容器上 ``` flex-direction [ row(默认) | row-reverse | column | column-reverse]; flex-wrap [nowrap(默认) | wrap | wrap-reverse(第一行下面)] justify-content [flex-start(默认值)|flex-end| center | space-between (两端对齐) | space-around(每个项目两侧的间隔相等)] align-items [flex-start | flex-end | center | baseline | stretch(默认)] align-content 多轴对齐 [flex-start | flex-end | center | baseline | stretch] ``` **align-items 项目在交叉轴上如何对齐** ![align-items](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071011.png =400x400) > stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。 **align-content 多轴对齐方式** ![](https://img.kancloud.cn/7d/3c/7d3c878f0889b0c57d4427e5a02609c8_620x786.png) ## 项目属性 6个属性在项目上 ``` order 默认为0,排列顺序。数值越小,排列越靠前 flex-grow item的放大比例,默认0(即存在空间也不放大)如item1 为1 ,item2 为2,则item2为item1的两倍宽 flex-shrink 默认为1,item的缩小比例,为0则表示不缩小 flex-basis align-self 定义单个项目的对齐方式 ``` **flex-grow** - flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。 - 如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。 ![](https://img.kancloud.cn/4e/53/4e538ca4bcea1ff1a14eaaa95d4c8b67_700x145.png =400x200) **flex-basis** - `flex-basis`属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为`auto`,即项目的本来大小。 - 它可以设为跟`width`或`height`属性一样的值(比如350px),则**项目将占据固定空间**。 **align-self** `align-self`属性允许单个项目有与其他项目不一样的对齐方式,可覆盖`align-items`属性 ![](https://www.ruanyifeng.com/blogimg/asset/2015/bg2015071016.png =500x300) ## 实例 ### 水平垂直居中显示 ``` display:flex; align-items:center; //水平对齐 justify-content:center; // 居中对齐 ``` ### 行对齐,1一个元素固定,另一个元素填充剩余空间 ``` .parent{ display:flex; flex-direction:row; .item1{ with:20px; flex-grow:0; // 默认为0 } .item2{ flex-grow:1; // 默认为1 } } ```