关于伸缩布局

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; /*变现的意思就是 垂直排列 换行*/