display布局方式

display:block、inline、inline-block和grid,table和flex等

1、display：block将元素显示为块级元素，可以设置宽高，每一个块级元素都是从新的一行开始。
常见的块级元素:div,img,ul,form,p等
2、display : inline将元素显示为行内元素，不可设置宽高。
3、display：行内块状元素，可以设置宽高在同一行。
display: inline-block可以设置三个盒子在同一行(但小程序中不常用,用flex)
4、grid布局--栅格布局。可看作强大的二维网格结构。
5、flex布局--弹性布局，css3引入。为盒状模型提供极大的灵活性，易于实现水平和垂直居中。
(flex对移动端的兼容性比较高)
共同缺点：兼容性较差，只支持IE9以上。

Grid实现如下布局：

image.png

    



    

      
1
      
2
      
3
      
4
      
5
      
6
    

flex

需要container,item。
块状元素放入到flex盒子中，块状元素的行特性将会消失。
flex-direction: row(水平排列)和column(垂直排列)，row-reverse和column-reverse:不仅元素颠倒，对齐方式也颠倒。

// 主轴和交叉轴(flex-direction定义的为主轴，justify-content为主轴上的对齐，align-items为交叉轴上的对齐)
justify-content(对其方式5种): flex-end和flex-start,center,space-between(平均分布),space-around(等距分布)；
align-items: center,flex-end和flex-start,stretch(没有设置高度),baseline(元素位于容器的底部基线对齐)

flex-wrap:wrap 拆行或拆列，nowrap 不拆行或拆列
注：css中width和height不指定，width100%，height自适应