弹性盒flex
一、弹性盒（伸缩盒）
/* flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变 */
/* 块级弹性盒 */
display: flex;
/* 行内弹性盒 */
display: inline-flex;
二、弹性容器
2.1 flex-direction：指定容器中弹性元素的排列方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>弹性盒flex</title> <style> *{ margin: 0; padding: 0; list-style-type: none; } ul{ width: 800px; border: 10px solid red; /* 将ul设置为弹性容器 */ display: flex; /* flex-direction：指定容器中弹性元素的排列方式 可选值： - row：默认值，弹性元素在容器中水平排列（左向右） - 主轴：自左向右 - row-reverse：弹性元素在容器中反向水平排列（右向左） - 主轴：自右向左 - column：弹性元素纵向排列（自上向下） - column-reverse：弹性元素纵向排列（自下向上） 主轴： 弹性元素的排列方向称为主轴 侧轴： 与主轴垂直方向的称为侧轴 */ flex-direction: row-reverse; } li{ width: 100px; height: 100px; background-color: #fba; font-size: 50px; text-align: center; } li:nth-of-type(2){ background-color: #bfa; } li:nth-of-type(3){ background-color: skyblue; } </style> </head> <body> <!-- flex（弹性盒、伸缩盒） - 是css中的又一种布局手段，它主要用来代替浮动来完成页面布局 - flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变 - 弹性容器 - 要使用弹性盒，必须先将一个元素设置为弹性容器 - 通过display设置弹性容器 display:flex 设置为块级弹性容器 display:inline-flex 设置为行内的弹性容器 - 弹性元素 - 弹性容器的子元素是弹性元素（弹性项） - 弹性元素可以同时是弹性容器 --> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html>
2.2 flex-wrap：设置弹性元素是否在弹性容器中自动换行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>flex-wrap</title> <style> *{ margin: 0; padding: 0; list-style-type: none; } ul{ width: 400px; border: 10px solid red; /* 将ul设置为弹性容器 */ display: flex; /* flex-wrap：设置弹性元素是否在弹性容器中自动换行 - nowrap：默认值，元素不会自动换行 - wrap：元素沿着辅轴方向自动换行 - wrap-reverse：元素沿着辅轴反方向换行 */ /* flex-wrap: wrap; */ flex-wrap: wrap-reverse; } li{ width: 200px; height: 100px; background-color: #fba; font-size: 50px; text-align: center; } li:nth-of-type(2){ background-color: #bfa; } li:nth-of-type(3){ background-color: skyblue; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html>
2.3 flex-flow
/* flex-flow: wrap 和 direction 的简写属性 */
flex-flow: row wrap;
2.4 justify-content：主轴上的元素如何排列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>justify-content</title> <style> *{ margin: 0; padding: 0; list-style-type: none; } ul{ width: 800px; border: 10px solid red; /* 将ul设置为弹性容器 */ display: flex; /* justify-content - 如何分配主轴上的空白空间（主轴上的元素如何排列） - 可选值： flex-start：元素沿着主轴起边排列 flex-end：元素沿着主轴终边排列 center：元素居中排列 space-around：空白分布到元素两侧 space-between：空白均匀分布到元素间 space-evenly：空白分布到元素的单侧 */ justify-content: space-evenly; } li{ width: 100px; height: 100px; background-color: #fba; font-size: 50px; text-align: center; } li:nth-of-type(2){ background-color: #bfa; } li:nth-of-type(3){ background-color: skyblue; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html>
2.5 align-content： 辅轴上的元素如何排列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>align-content</title> <style> *{ margin: 0; padding: 0; list-style-type: none; } ul{ width: 300px; height: 700px; border: 10px solid red; /* 将ul设置为弹性容器 */ display: flex; flex-wrap: wrap; /* align-content - 如何分配辅轴上的空白空间（辅轴上的元素如何排列） - 可选值： flex-start：元素沿着辅轴起边排列 flex-end：元素沿着辅轴终边排列 center：元素居中排列 space-around：辅轴上空白分布到元素两侧 space-between：辅轴上空白均匀分布到元素间 space-evenly：辅轴上空白分布到元素的单侧 */ align-content: space-around; } li{ width: 100px; height: 100px; background-color: #fba; font-size: 50px; text-align: center; } li:nth-of-type(2){ height: 200px; background-color: #bfa; } li:nth-of-type(3){ height: 300px; background-color: skyblue; } li:nth-of-type(4){ background-color: orange;} li:nth-of-type(5){ height: 200px; background-color: yellow; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> </html>
2.6 align-items：元素在辅轴上如何对齐
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>align-items</title> <style> *{ margin: 0; padding: 0; list-style-type: none; } ul{ width: 300px; border: 10px solid red; /* 将ul设置为弹性容器 */ display: flex; flex-wrap: wrap; /* align-items - 元素在辅轴上如何对齐 - 元素间的关系 - 可选值： stretch：默认值，将元素的长度设置为相同的值 flex-start：元素不会拉伸，沿着辅轴起边排列 flex-end：元素沿着辅轴终边排列 center：元素居中排列 baseline：基线对齐 */ align-items: flex-end; } li{ width: 100px; height: 100px; background-color: #fba; font-size: 50px; text-align: center; } li:nth-of-type(2){ height: 200px; background-color: #bfa; } li:nth-of-type(3){ height: 300px; background-color: skyblue; } li:nth-of-type(4){ background-color: orange;} li:nth-of-type(5){ height: 200px; background-color: yellow; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> </html>
三、弹性元素
3.1 flex-grow：指定弹性元素的伸展系数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>flex-grow</title> <style> *{ margin: 0; padding: 0; list-style-type: none; } ul{ width: 800px; border: 10px solid red; /* 将ul设置为弹性容器 */ display: flex; flex-direction: row; } li{ width: 100px; height: 100px; background-color: #fba; font-size: 50px; text-align: center; /* 弹性元素的属性： - flex-grow：指定弹性元素的伸展系数 - 当父元素有多余空间时，子元素如何伸展 父元素的剩余空间，会按照比例进行分配 */ flex-grow: 1; } li:nth-of-type(2){ background-color: #bfa; flex-grow: 2; } li:nth-of-type(3){ background-color: skyblue; flex-grow: 3; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html>
3.2 flex-shrink：指定弹性元素的收缩系数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>flex-shrink</title> <style> *{ margin: 0; padding: 0; list-style-type: none; } ul{ width: 400px; border: 10px solid red; /* 将ul设置为弹性容器 */ display: flex; flex-direction: row; } li{ width: 200px; height: 100px; background-color: #fba; font-size: 50px; text-align: center; /* 弹性元素的属性： - flex-shrink：指定弹性元素的收缩系数 - 当父元素中的空间不足以容纳所有得子元素时，如何对子元素进行收缩 父元素的剩余空间，会按照比例进行分配 */ flex-shrink: 1; } li:nth-of-type(2){ background-color: #bfa; flex-shrink: 2; } li:nth-of-type(3){ background-color: skyblue; flex-shrink: 3; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html>
3.3 align-self
- 跟align-items一样的用法，是辅轴上元素的对齐方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>弹性元素属性align-self</title> <style> *{ margin: 0; padding: 0; list-style-type: none; } ul{ width: 300px; height: 600px; border: 10px solid red; /* 将ul设置为弹性容器 */ display: flex; flex-wrap: wrap; /* align-items - 元素在辅轴上如何对齐 - 元素间的关系 - 可选值： stretch：默认值，将元素的长度设置为相同的值 flex-start：元素不会拉伸，沿着辅轴起边排列 flex-end：元素沿着辅轴终边排列 center：元素居中排列 baseline：基线对齐 */ align-items: flex-end; } li{ width: 100px; height: 100px; background-color: #fba; font-size: 50px; text-align: center; } li:nth-of-type(2){ height: 200px; background-color: #bfa; /* align-self：用来覆盖当前弹性元素上的align-items */ align-self: flex-start; } li:nth-of-type(3){ height: 300px; background-color: skyblue; align-self: stretch; } li:nth-of-type(4){ background-color: orange; align-self: center; } li:nth-of-type(5){ height: 200px; background-color: yellow; align-self: baseline; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> </html>
3.4 flex-basis：元素基础长度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>弹性元素属性flex-basis</title> <style> *{ margin: 0; padding: 0; list-style-type: none; } ul{ width: 800px; border: 10px solid red; display: flex; flex-direction: row-reverse; } li{ width: 100px; height: 100px; background-color: violet; font-size: 30px; text-align: center; line-height: 100px; /* 元素基础长度 flex-basis：指定的是元素在主轴上的基础长度 - 如果主轴是横向的，则该值指定的是元素的宽度 - 如果主轴是纵向的，则该值指定的是元素的高度 默认值是auto，表示参考元素自身的高度或宽度 如果传递了一个具体的数值，则以该值为准 */ flex-basis: 200px; } li:nth-of-type(2){ background-color: #bfa; } li:nth-of-type(3){ background-color: skyblue; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html>
3.5 flex：设置弹性元素的三个属性（增长、缩减、基础长度）
/*
flex: 增长、缩减、基础长度
initial "flex: 0 1 auto;"
auto "flex: 1 1 auto;"
none "flex: 0 0 auto;" 弹性元素没有弹性
*/
flex: auto;
3.6 order：决定弹性元素的排列顺序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>弹性元素属性flex-basis</title> <style> *{ margin: 0; padding: 0; list-style-type: none; } ul{ width: 400px; border: 10px solid red; display: flex; } li{ width: 100px; height: 100px; background-color: violet; font-size: 30px; text-align: center; line-height: 100px; flex-basis: 200px; /* flex: 增长、缩减、基础长度 initial "flex: 0 1 auto;" auto "flex: 1 1 auto;" none "flex: 0 0 auto;" 弹性元素没有弹性 */ flex: initial; } li:nth-of-type(1){ /* order 决定弹性元素的排列顺序 */ order: 2; } li:nth-of-type(2){ background-color: #bfa; order: 3; } li:nth-of-type(3){ background-color: skyblue; order: 1; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html>
