float布局

float（浮动布局）布局主要为了应付傻逼IE浏览器，不要生气！快点码起来！

  1. 在子元素上加上float：left（靠左浮动排列）；和width（确定宽度）。
  2. 在父级元素上加上.clearfix.
    1. .clearfi:after{
    2.  content:'';
    3. display:block;
    4. clear:both;
    5. }

flex布局

  1. Flex container

    1. .container{
    2. flex-direction:row|row-reverse|column|column-reverse;
    3. /*在主轴改变item的流动方向*/
    4. }
    1. .container{
    2.  display:flex;
    3. flex-wrap:wrap|nowrap|wrap-reverse;
    4. /*改变换行*/
    5. }
    1. .container{
    2.  display:flex;
    3. justify-content:flex-start|flex-end|center|space-between|space-around;
    4. /*在主轴方向对齐（默认主轴为横轴除非你使用flex-direction改变了方向）*/
    5. }
    1. .container{
    2.  display:flex;
    3. align-items:flex-start|flex-end|center|;
    4. /*在次轴方向对齐（默认次轴为横纵轴除非你使用flex-direction改变了方向）*/
    5. }
    1. .container{
    2.  display:flex;
    3. align-content:flex-start|flex-end|center|;
    4. /*在次轴方向对齐（默认次轴为横纵轴除非你使用flex-direction改变了方向）*/
    5. }

  2. items的flex样式

    1.                  ![image.png](https://cdn.nlark.com/yuque/0/2020/png/1314543/1588122559722-45ceb758-a20e-4ce9-98eb-3c70eed0a781.png#align=left&display=inline&height=399&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1197&originWidth=1407&size=294367&status=done&style=none&width=469)<br />                                                                        order命令
    1. .container{/*图中第二行，代码示例*/
    2.  display:flex;
    3. }
    4. .items1{
    5.  order:-1;/*items因为order命令排在itmes后面，roder命令后的数字决定item的排列顺序*/
    6. }
    7. .item2{
    8. order:1;
    9. }
    10. .item3{
    11. order:2;
    12. }
    13. .item4{
    14. order:5;
    15. }
    1.                    ![image.png](https://cdn.nlark.com/yuque/0/2020/png/1314543/1588122718726-5c531f5c-238d-41c7-8473-34df676bc339.png#align=left&display=inline&height=241&margin=%5Bobject%20Object%5D&name=image.png&originHeight=724&originWidth=1703&size=219114&status=done&style=none&width=568)<br />                                                 flex-grow 属性定义弹性盒子项（flex item）的拉伸因子
    1. .container{/*图中第二行，代码示例*/
    2.  display:flex;
    3. }
    4. .items1{
    5. flex-grow:1;
    6. }
    7. .item2{
    8. flex-grow:2;
    9. }
    10. .item3{
    11. flex-grow:1;
    12. }

flex-shrink控制如何变窄，一般设置为flex-shrink:0防止变瘦，默认为1可以变瘦。

image.png
 align-self定制align-items**

gird布局

二维布局比flex更强大，但兼容性较差。
详细命令参考阮一峰Grid教程http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html