本文共 760 字，大约阅读时间需要 2 分钟。

参考链接：

Flex布局：

.box{

  display: flex; }

6个属性：

flex-direction            //排列方向

flex-wrap                  //换行策略 flex-flow                   //前两者的统一用法，值的中间用'||'隔开 justify-content          //对齐方式 align-items               //交叉轴对齐方式 align-content           //多根轴线的对齐方式

6个项目属性：

order                      //排序

flex-grow               //剩余空间放大比例，默认0，不放大 flex-shrink             //空间不足时的缩小比例 flex-basis              // flex                        //flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选 align-self               //允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

//排列方向 

.box {

  flex-direction: row | row-reverse | column | column-reverse;//横、横-反方向、纵、纵-反方向 }

//换行策略

.box{

  flex-wrap: nowrap | wrap | wrap-reverse;//不换行、换行、换行且第一行在下面，默认不换行，即nowrap }

//对齐方式

.box {

  justify-content: flex-start | flex-end | center | space-between | space-around; }

 

//交叉轴对齐方式

.box {

  align-items: flex-start | flex-end | center | baseline | stretch; }

转载地址：http://horki.baihongyu.com/