Flex 布局

参考 www.cnblogs.com/qcloud1001/…

练习题：阮一峰的骰子图 www.ruanyifeng.com/blog/2015/0…

一. 写在前面

• 平常使用flex 布局的时候就下面标准3行，这样一个 div 内部的元素就水平垂直在中间了，很方便

  // 那这三行都代表什么意思呢？
  display: flex;
  justify-content: center;
  align-items: center;   // 单行 沿交叉轴中点对齐
  

二. 看了几篇文章后的个人理解

弹性容器和 弹性元素

• 一个元素声明了 {display: flex;} 那就是弹性容器了，其内部的子元素都叫做弹性元素

主轴和交叉轴

• 弹性元素在弹性容器中如何排列呢？这个时候就需要两个坐标（也就是我们的主轴和交叉轴）

1. 弹性元素都是沿着主轴排列的

2. 弹性元素单行排列不下了怎么办？

   • flex-wrap: nowrap（默认） | wrap | wrap-reverse ；不换号|换行|反向折行

3. 不换行时，多个弹性元素总宽度有可能大于弹性容器宽度，也有可能不够 这个时候怎么排列？

   • flex-shrink ： 缩小比例 （弹性元素总宽度 > 弹性容器宽度）
     • 默认值： flex-shrink: 1; -------- 表示等比例缩小
   • flex-grow: 放大比例（弹性元素总宽度 < 弹性容器宽度）
     • 默认值： flex-grow: 0; --------表示不放大
   • ** 注**： 这两属性互斥

4. 主轴 对齐

   • justify-content

5. 交叉轴对齐

   • 单行对齐
   • align-item：stretch； 默认值
   • 多行排列
   • align-content

   align-items: stretch | flex-start | flex-end | center（单行对齐） | baseline
   align-content: stretch | flex-start | flex-end | center(多行对齐) |
   space-between | space-around
   

三. 补充所有属性

• 容器属性

  • flex-flow 复合属性
    • flex-flow = flex-drection + flex-wrap
    • eg: flex-flow: row nowrap;
  • flex-direction 主轴的方向
    • row(默认)；column；row-reverse; column-reverse;
  • flex-wrap 是否换行
    • nowrap | wrap | wrap-reverse
  • justify-content 主轴对齐方式
  • align-items 交叉轴 单行对齐方式
  • align-content 交叉轴 多行对齐方式

• 元素属性

  • order 排序

  • flex-grow 放大比例

  • flex-shrink 缩小比例

  • flex-basis 元素在主轴上的初始尺寸

    • flex-basis: 0; 根据内容撑开， 优先级 比 width 高
    • width:0; 没有宽度

  • flex

    • flex = flex-grow + flex-shrink + flex-basis

    • eg:

      • flex: 1; = flex: 1 1 0%;
        

  • align-self 单独对某个元素设置交叉轴对齐方式 这个是元素属性，切记