CSS基础—flex弹性布局

一、了解flex布局

1.1 什么是flex布局

flex布局又叫弹性布局，顾名思义弹性布局可以使盒子变得有弹性可以伸缩，这样说不容易理解，直接进入实例来了解flex布局

1.2 弹性布局的使用场景

简单来说，弹性布局可以使盒子变得有弹性，可以让盒子可以进行伸缩，
想让一个盒子内的元素水平排列，并且均匀分布就可以使用flex布局
flex布局也可以使元素竖直排列，分布方式可以自己随意选择，来看看flex布局的属性，来更清楚他的作用

1.3 flex布局怎么使用

flex是display的一个属性，可以使用在任意一个盒子上，而盒子内部的元素就会根据flex布局来排列

        <div class="box">
               ...
        </div>

给父元素一个display：flex；那这个盒子就是弹性布局

     .box{
         display:flex;
     }

接下来来看看flex的属性都有什么作用

二、flex布局的属性

2.1 flex-direction

flex-direction是指定弹性盒子内部元素的排列方向
属性值为：column | row | column-reverse | row-reverse

   row                     从左向右   默认值  
   row-reverse             从右向左
   column                  从上向下
   column-reverse          从下向上

2.2 flex-wrap

flex-wrap是当一行放不下这么多元素时选择是否换行
有三个属性： nowrap 不换行（默认） wrap 换行 wrap-reverse 第一行在下方

2.3 justify-content

justify-content是指定在排列方向上元素的分布情况
属性为：flex-start | flex-end | center | space-between | space-around

用一张图来演示这些属性的区别

 flex-start               盒子起始位置对齐  
 flex-end                 盒子结束位置对齐  
 center                   盒子居中对齐  
 space-between            元素均匀间隔分布  
 space-around             元素均匀间隔分布两端有间隔一半的间隙

2.4 align-items

align-items的作用是当你横向排列时，元素竖直方向的对齐方式

属性为：flex-start | flex-end | center | stretch | baseline

2.5 flex-grow || flex-shrink || flex-basis

flex-grow 是用在子盒子的属性，是子盒子占父盒子的比例，和其他子盒子相比，例如：每个子盒子都是flex-grow:1,那就所有盒子的比例相同，

flex-shrink是当盒子被缩放的时候，如果flex-shrink：0，则不进行缩放，其他属性按比例缩放

flex-basis属性定义了再分配多余空间之前项目占据的主轴空间

2.6 flex

flex属性是 2.5 三个属性的简写

    flex：flex-grow  || flex-shrink || flex-basis
    flex: 0 1 auto

2.7 align-self

align-self属性允许单个元素与其他元素有不一样的对齐方式，可覆盖align-items的属性，默认值为auto

align-self的属性比align-items多一个auto 默认值

当你想让一个元素单独排序的时候，可以给元素加上align-self属性，可以覆盖父元素的align-items属性

2.8 align-content

align-content当元素不止一行的时候使用，比如使用了flex-wrap：wrap，换行了之后可以使用
举个经典案例骰子的

html

    <div class="box">
        <div class="column">
             <span class="item"></span>
             <span class="item"></span>
             <span class="item"></span>
       </div>
       <div class="column">
             <span class="item"></span>
             <span class="item"></span>
             <span class="item"></span>
       </div>
    </div>

.box{
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
 }
 .column{
     display:flex;
     justify-content: space-between;
 }

用法就是当一个弹性盒子里有两个或多个一行放不下的元素的时候，就可以使用align-content来规定子盒子之间的排列方式

三、flex布局的具体用例

3.1 网格布局

最简单的网格布局，就是平均分布

    html    
    <div class="Grid">
        <div class="Grid-cell"></div>
        <div class="Grid-cell"></div>
        <div class="Grid-cell"></div>
    </div>
    
    css
    .Grid{
        display:flex;
    }
    .Grid-cell{
        flex:1
    }

只要给子元素加上flex：1；就会平均分配父盒子的空间

3.2 百分比布局

和网格布局基本一致，就是设定好某一个或多个子元素的大小，其余部分被一个子元素占满

    html    
    <div class="Grid">
        <div class="Grid-cell Grid-cell-1"></div>
        <div class="Grid-cell Grid-cell-2"></div>
        <div class="Grid-cell"></div>
    </div>
    
    css
    .Grid{
        display:flex;
    }
    .Grid-cell{
        flex:1
    }
    .Grid-cell-1{
        flex: 0 0 50%
    }.Grid-cell-1{
        flex: 0 0 33.3333%
    }

原理就是：给每个子元素都加上了flex：1，使其平均分配，但当你再给某个子元素加上他的固定大小flex：0 0 33.3333%，33.3333%那他就会固定占满三分之一，其余空间被另一个元素占满

3.3 输入框的布局

输入框的布局也可以使用flex布局，举个简单的例子

当一个输入框有前面的图标中间的输入框和后面的提交三部分时，使用flex布局很合适，给中间的子元素加上属性flex：1；其余的不加，中间就会占满去掉前后剩余的空间，可以看情况使用

3.4 悬挂式布局

就是当一个盒子里有时候需要加入一张图片或，某个元素时，但是不一定会加的情况，也可以使用，直接看图

当有图片时自动将文本挤过去也可以使用flex布局，给文本的元素上加上flex：1；当你插入一个图片元素时，他会自动占满剩余部分的全部

3.5 底栏的固定

很多时候无论是大布局，还是小盒子里的小布局，都会有一个需求，就是我想让他一直在底部，不管上面的内容满没满，就乖乖待在底部，这时候你使用定位又可能会造成一些麻烦，flex布局就可以派上用场，也需要视情况而定，

当你想要一个内容固定在底部，很常见，可以使用flex布局，给中间元素加上flex：1；占满剩余内容，再给上flex-derection:column;让他上下排列，就可以使最下面的元素一直在底部了

本章完