Document

一、***********水平垂直居中方案:
1.给父元素设置border通过margin挤压
2.通过给父容器设置padding挤压给父容器设置为边框盒子
3.子绝父相给子元素配合属性设置为 margin auto
4.子绝父相给子元素设置配合属性 top 50% left 50% margin-left:-width/2margin-top : -height/2
5.给父元素设置display:flex justify-content:center align-items:center
6.给父元素设置display:flex给子元素设置margin:auto
设置给弹性容器(父元素)的属性:
  1.display :flex开启弹性盒
  2.flex-direction设置主轴排列方向水平或者垂直
    row默认主轴是水平方向
    column设置主轴为垂直方向
    row-reverse 将水平方向主轴进行反转将起点和终点进行交换
    column-reverse 将垂直方向主轴进行反转将起点和终点进行交换
  3.flex-wrap设置弹性元素是否换行显示
    wrap换行nowrap不换行wrap-reverse换行反转
  4.flex-flow:flex-direction flex-wrap 这两个属性得简写
  5.justify-content设置主轴弹性元素得对齐方式
    flex-start flex-end center strecth space-around space-evenly space-between
  6.align-items设置交叉轴元素得对齐方式
    flex-start flex-end center strecth(拉伸平铺占满父容器高度 取消height设置) baseline(基线对齐·文字对齐)
  7.align-content
    设置多行弹性元素对齐方式
      flex-start flex-end center strecth space-around space-evenly space-between
二、弹性元素属性
  1.order属性更改弹性元素排列顺序值越大越靠后值越小越靠前
    .div1{order: 3} .div2{order:2} .div3{order:1} .div3>.div2>.div1
  2.flex-grow属性默认值是0表示父容器剩余的空间是否进行放大默认是不放大
  3.flex-shrink属性默认值是1表示父容器无法容纳所有弹性元素是否会进行等比例压缩会等比例压缩
  4.flex-basis属性默认值auto 给弹性元素设置宽度优先级高于width
  5.flex属性是flex-grow、 flex-shrink、 flex-basis属性简写
    flex:0 1 400px;表示意思就是不进行放大、等比例压缩、宽度设置为400px
    flex :number :
      设置给一个弹性元素:长示将父容器剩余宽度设置给弹性元素
      .parent{
         width: 250px;
         }
      .div1{
        width : 50px;
        flex : 1;}
       .div2{
        width : 50px;
        flex :2
       }
       .div3{width : 50px}
6.align-self表示是自身在交叉轴得对齐方式