简化flex布局，方便记忆

因为flex属性众多，为方便上手，简化一套基本配置，详情查看教程

1、容器用display: flex || inline-flex;开启弹性布局，后设置如下（根据实际需求，适当调整）

.box {
  flex-flow: row wrap;//尽量采用简写，这里设置为换行，默认水平不换行
  justify-content:space-between;//采用两端对齐，两端留白交给padding
  align-items:center;//交叉轴垂直居中
  align-content:space-between;//多轴也采用两端对齐，留白交给padding，若无多行，该属性自动失效
}

2、项目设置，暂不考虑order和align-self用的比较少，需要可以看上面文档，下面简述，自行设置。

      尽量采用flex简写，如无特殊需求，优先考虑快捷值

.item {
  flex:auto;//等于1 1 auto，按照项目本身大小自动缩放（与容器大小有关）
  flex:none;//等于0 0 auto，项目不缩放，该多大就多大
}

 

一、容器属性

1. flex-direction    定义主轴和方向

   row | row-reverse | column | column-reverse;

2. flex-wrap　　换行

   nowrap | wrap | wrap-reverse;

3. flex-flow    上面的简写

   <flex-direction> || <flex-wrap>;默认值为row nowrap 

4. justify-content     主轴对齐方式，默认

   flex-start | flex-end | center | space-between | space-around;

5. align-items    交叉轴对齐方式

   flex-start | flex-end | center | baseline | stretch;

6. align-content    多行主轴对齐方式，定义后align-items失效，单主轴时无效
   

   flex-start | flex-end | center | space-between | space-around | stretch;

二、项目属性

1. order    排列顺序，数值越小，排列越靠前，默认为0 。 <integer>
2. flex-grow    项目的放大比例，默认为0，即如果存在剩余空间，也不放大。<number>
3. flex-shrink    项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。<number>
4. flex-basis    项目占据的主轴空间，默认值为auto，即项目的本来大小。也可设300px固定值。<length>
5. flex    flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
6. align-self    单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto

   auto | flex-start | flex-end | center | baseline | stretch;

 

转载于:https://www.cnblogs.com/yxrs/p/9371943.html