伸缩布局flex
一、伸缩布局的起源
1、之前我们想要适应不同的浏览器，一般采用的是设置宽度、高度为父级元素的百分比，但是有时候百分比的计算是相当复杂的，加上有时候还有规定的宽度要设置，所以，伸缩布局的出现是我们所急需的。
例：将一个section三等分，其中放入3个div
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>伸缩布局</title> <style> /* 原始的模式 */ /* section{ width: 1000px; height: 200px; } div{ float:left; width:33.33%; height:20px; background-color: red;; } div:nth-child(2){ background-color: blue; } div:last-child{ background-color:green; } */ /* 采用伸缩布局 */ section { display: flex; width: 1000px; } div { flex: 1; height: 20px; background-color: red; } div:nth-child(2) { background-color: blue; } div:last-child { background-color: green; } </style> </head> <body> <section> <div></div> <div></div> <div></div> </section> </body> </html>
二、伸缩布局的使用
1、可以添加具体宽度
div:nth-child(2) {
width: 20px;
background-color: blue;
}
2、可以设置最小宽度，这样当屏幕缩小到小于最小宽度时，就会出现滚动条
min-width:500px;
3、伸缩布局的排列方式：主轴、方向
flex-direction: row;
/* 默认的：横向排列 */
flex-direction: column;
/* 纵向排列 */
flex-direction: row-reverse;
/* 横向逆序 */
flex-direction: column-reverse;
/* 纵向逆序 */
4、主轴的对齐方式
/* justify-content一行的情况 */
/* 从左到右，默认的顺序 */
/* justify-content: flex-start; */
/* 从右到左的，逆序 */
/* justify-content: flex-end; */
/* 子元素在父元素的中间显示 */
/* justify-content: center; */
/* 均分，贴边 */
/* justify-content: space-around; */
/* 均分，不贴边 */
/* justify-content: space-between; */
/* 纵向逆序 */
/* align-content 多行的情况（）
值同，默认是strentch
必须在父元素例配置{display:flex;flex-direction:row;flex-wrap:wrap;}
*/
5、order:控制子元素的裴烈顺序：默认是0，越小的值越排在前面,可以是负数
6、flex-wrap是否换行：no;默认收缩显示wrap;换行wrap-reverse;以相反的顺序换行
7、aligin-items侧主轴的对齐方式：stretch;子元素高度拉伸（默认）center;居中felx-start;在开头；flex-end;在底边
8、flex-flow:排列方向 是否换行的综合接卸形式
