布局方法

完成自动换行的方块列表布局，如下图1所示：

图1

可以自动换行，并且响应式的布局。

HTML:

   

Hello Users

   

       

•                

  Amy

          

    

CSS：

.users{ width:100%; max-width:1200px; margin:40px auto; padding:0 20px; box-sizing: border-box;}

ul{ display: flex; flex-wrap: wrap; list-style-type: none; padding:0;}

li{ flex-grow:1; flex-basis: 200px; text-align: center; border:1px solid #222; padding:30px; margin:10px;}

其中最关键的几个css属性：

max-width:1200px    最大宽度是1200px，再大不可以，可以再小一点。

box-sizing: border-box    给div设置这个属性，会将你设置的width值，包括它的padding和border（默认是0），更好的去完成响应式。

弹性盒布局中的flex-wrap：wrap     规定子元素超出部分折行排列。子元素都在容器内部，不会超出父元素。

felx-basis：200px        规定弹性盒项目的基本宽度。

垂直水平居中：

一般常用的是绝对定位，相对定位；还有transform（其实次昂挡雨margin一半），transform：translateX（-50%）与margin性质一样。