disflex:flex; //伸缩布局模式
min-width: 300px; /*指定响应式 最小的宽度 就是到300px后网页就不在缩小了*/
max-width:500px; //最大的宽度
flex-direction: row; //设置横向排列 column设置竖向排列
关于justifycontent属性的介绍如下：
/*justify-content: flex-start; 让子元素从父容器的开头开始排序*/
/*justify-content: flex-end; 让子元素从父容器的结尾的地方开始排序 但是盒子顺序不变*/
/*justify-content: center; 让子元素在父容器中居中对齐*/
/*justify-content: space-between;左右的盒子贴近父盒子 中间的平均分布空白间距*/
justify-content: flex-end; /*相当于给盒子添加了一个左右的margin的外边距*/ 水平对齐
关于align-items垂直对齐介绍如下：
/*align-items: flex-start; 沿着顶部对齐 上对齐*/
/*align-items: flex-end; 底对齐*/
/* align-items: center; 垂直居中对齐*/
align-items: stretch; /*让子元素高度拉伸适用父容器（子元素不给高度的条件下）*/
关于一行子盒子是否换行的问题如下
/*flex-wrap: nowrap; 默认的第一个不换行 同一行上进行显示*/
/*flex-wrap: wrap; 子盒子超出边框会自动换行*/
flex-wrap: wrap-reverse; /*子盒子进行翻转*/
/*多行子盒子换行*/
/* flex-flow: row wrap; 要让多行盒子 实现换行的功能 这句话必须写
align-content: center; */
/* flex-direction: column; */
/* 上面两句话相当于下面的一句话 */
flex-flow: row wrap; /*变现的意思就是 垂直排列 换行*/