CSS3-flex布局笔记

1.布局原理

弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局
注意：当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将生效；又叫伸缩布局=弹性布局=伸缩盒布局=flex布局
在父级中写 display:flex;

2.flex布局父项常见属性

1. flex-direction：设置主轴的方向
   四个属性值 row(默认值从左到右)、row-reverse(从右到左)、column(从上到下)、column-reverse(从下到上)

2. justify-content: 设置主轴上的子元素排列方式(主轴可以是x轴，也可以是y轴，默认主轴是x轴)
   五个属性值：

   flex-start(默认值 从头部开始，如果主轴是x轴，则从左到右)
   

   flex-end(从尾部开始排列)
   

   center(在主轴居中对齐,如果主轴是x轴则水平居中)
   

   space-around（平分剩余空间）
   

   space-between(先两边贴边，再平分剩余空间，非常重要)
   

3. flex-wrap:设置子元素是否换行(flex布局中，默认的子元素是不换行的，如果装不下，会缩小子元素的宽度，放到父元素里面)

    flex-wrap:wrap;

4. align-content:设置侧轴上的子元素的排列方式（多行）

 设置子项在侧轴上的排列方式，并且只能用于子项出现换行的情况（多行），
 在单行下是没有效果的,父级要写 flex-wrap:wrap;

六个属性值：

flex-start(默认值在侧轴的头部开始排列)

flex-end(在侧轴的尾部开始排列)

center(在侧轴中间显示)

space-around(子项在侧轴平分剩余空间)
space-between(子项在侧轴先分布在两头，再平分剩余空间)
stretch(设置子项元素高度平分父元素高度)

5. align-items:设置侧轴上的子元素排列方式（单行）
   常用的是侧轴居中 align-items:center;
   

   四个属性：

   flex-start(默认值 从上到下)
   flex-end(从下到上)
   center(挤在一起居中（垂直居中）)
   stretch(拉伸,但是子盒子不用给高度，拉伸与父盒子一样的宽度)

注：align-content和align-items区别
 1. align-items适应于单行情况下，只有上对齐、下对齐、居中和拉伸
 2. align-content适应于换行(多行)的情况下（单行情况下无效），
    可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值
 3. 总结：单行找align-items ,多行找align-centent

8. flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
   flex-flow:把设置主轴方向和是否换行（换列）简写

flex-flow:column wrap; 相当于同时写了
flex-direction:column;和flex-wrap:wrap;