一、flex-direction 设置主轴的方向。
flex-direction： 设置主轴的方向。
默认主轴方向就是 x 轴 ( 默认 flex-direction: row)，水平向右。
默认侧轴方向就是 y 轴，水平向下。
可以设置主轴方向为 y 轴 flex-direction: column
flex-direction 属性决定主轴的方向，元素跟着主轴排列。
flex-direction 属性值 和 说明 如下
row：默认值从左到右
row-reverse： 从右到左
column： 从上到下
column-reverse： 从下到上
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>flex主轴方向</title> <style> div{ /* 给父级添加 flex 属性 */ display: flex; width: 500px; height: 200px; background-color: pink; /* 默认的主轴是 x 轴 */ /* 元素跟着主轴排列的 */ flex-direction: row; /*默认*/ /* flex-direction: row-reverse; */ /* flex-direction: column; */ /* flex-direction: column-reverse; */ } div span{ width: 150px; height: 100px; color:white; background-color: purple; } </style> </head> <body> <div> <span>1</span> <span>2</span> <span>3</span> </div> </body> </html>
二、justify-content 设置主轴上的子元素排列方式。
justify-content: 设置主轴上的子元素排列方式。
- justify-content 属性定义了项目在主轴上的对齐方式。
- 注意：在使用这个属性之前一定要确定好主轴是哪一个。
- justify-content 属性值 和 说明 如下
flex-start：默认值 从头部开始，如果主轴是x轴，则从左到右。
flex-end： 从尾部开始排列
center：在主轴居中对齐（如果主轴是x轴则 水平居中）
space-around：平分剩余空间。
space-between：先两边贴边 再平分剩余空间（重要）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { display: flex; width: 800px; height: 300px; background-color: pink; /* 默认的主轴是 x 轴 row */ flex-direction: row; /* justify-content: 是设置主轴上子元素的排列方式 */ justify-content: flex-start; justify-content: flex-end; /* 子元素居中对齐 */ justify-content: center; /* 平分剩余空间 */ justify-content: space-around; /* 先两边贴边，再分配剩余空间 */ justify-content: space-between; } div span { width: 150px; height: 100px; background-color: purple; } </style> </head> <body> <div> <span>1</span> <span>2</span> <span>3</span> </div> </body> </html>
三、flex-wrap 设置子元素是否换行
flex-wrap: 设置子元素是否换行。
默认情况下，项目都排在一条线（又称 “轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的。
flex 布局中，默认的子元素是不换行的，如果装不开会缩小子元素的宽度，放到父元素里面。
左边：flex-wrap: nowrap; 默认不换行。
右边：flex-wrap: wrap; 换行。
flex-wrap 属性值 和 说明 如下
nowrap：默认值，不换行。
wrap：换行。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { display: flex; width: 600px; height: 400px; background-color: pink; /* flex 布局中，默认的子元素是不换行的，如果装不开会缩小子元素的宽度，放到父元素里面。 */ flex-wrap: wrap; } div span { width: 150px; height: 100px; background-color: purple; color: #fff; margin: 10px; } </style> </head> <body> <div> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> </div> </body> </html>
四、align-items 设置侧轴上的子元素排列方式（单行）
align-items: 设置侧轴上的子元素排列方式（单行）
- 该属性是控制子项在侧轴（默认是 x 轴）上的排列方式，在子项为单项的时候使用。
主轴为 x 轴时
主轴为 y 轴时
align-items 属性值 和 说明 如下
flex-start：默认值 从上到下
flex-end：从下到上
center：挤在一起（垂直居中）
stretch：拉伸
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { display: flex; width: 800px; height: 400px; background-color: pink; /* 默认的主轴是 x 轴 row */ flex-direction: row; /* 设置主轴为 y 轴 column */ /* flex-direction: column; */ justify-content: center; /* 需要一个侧轴居中 */ align-items: center; } div span { width: 150px; height: 100px; background-color: purple; color: #fff; margin: 10px; } </style> </head> <body> <div> <span>1</span> <span>2</span> <span>3</span> </div> </body> </html>
五、align-content 设置侧轴上的子元素排列方式（多行）
- 设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没有效果的。
- align-content 属性值 和 说明 如下
flex-start：默认值 在侧轴的头部开始排列
flex-end：在侧轴的尾部开始排列
center：在侧轴中间显示
space-around：子项在侧轴平分剩余空间
space-between：子项在侧轴先分布在两头，再平分剩余空间
stretch：设置子项元素高度平分父元素高度拉伸
align-content 和 align-items 的区别
align-items 适用于单行情况下，只有上对齐、下对齐、居中和拉伸。
align-content 适用于换行（多行）的情况下（单行情况下失效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
总结就是单行找 align-items ，多行找 align-content。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { display: flex; width: 500px; height: 400px; background-color: pink; /* 换行 */ flex-wrap: wrap; /* 因为有了换行，此时，我们侧轴上控制子元素的对齐方式用 align-content */ /* align-content: flex-start; */ /* align-content: flex-end; */ /* align-content: center; */ /* align-content: space-between; */ align-content: space-around; } div span { width: 120px; height: 120px; background-color: purple; color: #fff; margin: 10px; } </style> </head> <body> <div> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> </div> </body> </html>
六、flex-flow 是 flex-direction 和 flex-wrap 属性的复合写法
flex-flow: column wrap; 等同于 flex-direction: column; flex-wrap: wrap;
两种方法同种效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { display: flex; width: 600px; height: 300px; background-color: pink; /* flex-direction: column; flex-wrap: wrap; */ /* 把设置主轴方向和是否换行（换列）简写 */ flex-flow: column wrap; } div span { width: 150px; height: 100px; background-color: purple; color: #fff; } </style> </head> <body> <div> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> </div> </body> </html>
总结：
flex-direction：设置主轴的方向
justify-content：设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行
align-content：设置侧轴上的子元素的排列方式（多行）
align-items：设置侧轴上的子元素排列方式（单行）
flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
不积跬步无以至千里 不积小流无以成江海
