Flex笔记

参考链接：https://www.runoob.com/w3cnote/flex-grammar.html

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;
}