【不同的CSS】一文掌握 Flex 布局(长篇警告)
【不同的CSS】一文掌握 Grid 布局(长篇警告)
若彼岸繁华落尽，谁陪我看落日流年css
[toc]html
写在前面
对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新，实现各类布局的方式已经多得数不胜数了。web
最近利用碎片时间，大概用了半个月的时间整理了一个系列，本系列文章总结了 CSS 中的各类布局，以及实现方式及其经常使用技巧。让你经过该系列文章对 CSS 布局有一个新的认识。浏览器
该系列的导航帖点我进入，里面能够快速跳转到你想了解的文章(建议收藏)markdown
文章概述
因为篇幅较长(请谨慎阅读)，下图涵盖了本篇文章的主要知识点ide
正文开始oop
弹性盒子模型是什么
CSS3新增了弹性盒子模型( Flexible Box或FlexBox)，是一种新的用于在HTML页面实现布局的方式。使得当HTML页面适应不一样尺寸的屏幕和不一样的设备时，元素是可预测地运行。布局
弹性盒子模型实现HTML页面布局是与方向无关的。不相似于块级布局侧重垂直方向，内联布局侧重水平方向。post
弹性盒子模型主要适用于HTML页面的组件以及小规模的布局，而并不适用于大规模的布局，不然会影响 HTML 页面性能。性能
弹性盒子模型相关概念
CSS3新增的弹性盒子模型是一个完整的模块，涉及的样式属性较多。首先，对弹性盒子模型的相关概念完成基本的了解。
- 伸缩容器(flex container) :包裹伸缩项目的父元素。
- 伸缩项目(flex item) :伸缩容器的每一个子元素。
- 轴(axis) :每一个弹性盒子模型拥有两个轴。
- 主轴(main axis) :伸缩项目沿其一次排列的轴被称为主轴。
- 侧轴(cross axis) :垂直于主轴的轴被称为侧轴。
- 方向(direction) :伸缩容器的主轴由主轴起点和主轴终点，侧轴由侧轴起点和侧轴终点描述伸缩项目排列的方向。
- 尺寸(dimension) :根据伸缩容器的主轴和侧轴，伸缩项目的宽度和高度。
- 对应主轴的称为主轴尺寸。
- 对应侧轴的称为侧轴尺寸。
定义弹性盒子模型
CSS3中想要设置为弹性盒子模型的话，须要经过 display 样式属性设置值为 flex 或 inline-flex 便可。
display: fiex; /* 值 flex 使弹性容器成为块级元素。 */
/* 或者 */
display: inline-fiex; /* 值 inline-flex 使弹性容器成为单个不可分的行内级元素。 */
复制代码
以上代码就能够指定某个元素为弹性盒子模型，该元素成为伸缩容器，子元素则成为伸缩项目。
弹性盒子模型也存在浏览器兼容问题，解决方案以下：
/* WebKit引擎的浏览器(Chrome, Safari, Opera) */
display: -webkit-fiex;
/* Trident引擎的浏览器(IE 10+) */
dispaly: -ms-fiex;
/* Gecko引擎的浏览器(Firefox) */
display: -moz-fiex;
/* Presto引擎的浏览器(Opera) */
dispaly: -o-fiex;
复制代码
示例代码以下：定义一个简单的 Flex Box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>定义弹性盒子模型</title>
<link rel="stylesheet" href="./init.css" />
<style> /* 将父级元素设置为弹性盒子模型 * 这样设置的话子级全部元素都为弹性盒子模型 * 默认状况下，全部子元素做为伸缩项目都是沿着主轴水平排列 */ .container { display: flex; } </style>
</head>
<body>
<!-- HTML 结构为父子级结构 -->
<div class="container">
<div class="item1 item">1</div>
<div class="item2 item">2</div>
<div class="item3 item">3</div>
</div>
</body>
</html>
复制代码
这里并无开启浮动之类的关于布局的样式，仅仅将
.container的display设置为flex
执行结果以下所示；
默认状况下，全部子元素做为伸缩项目都是沿着主轴水平排列
伸缩容器的属性
flex-direction 属性
CSS flex-direction 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。
语法结构
flex-direction: row | row-reverse | column | column-reverse;
复制代码
值
-
row： 默认值，flex容器的主轴被定义为与文本方向相同。 主轴起点和主轴终点与内容方向相同(起点在左端)。 -
row-reverse： 表现和row相同，可是置换了主轴起点和主轴终点(起点在右端) -
column：flex容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的先后点相同(起点在上沿) -
column-reverse： 表现和column相同，可是置换了主轴起点和主轴终点明(起点在下沿)
<!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>02 flex-direction属性</title>
<link rel="stylesheet" href="./init.css" />
<style> body { display: flex; } .container { display: flex; margin: 20px; } /* flex-direction 属性 * 做用：建立主轴方向 * 适用于伸缩容器元素 * 值 * row: 设置主轴是水平方向 默认 * row-reverse: 与 row 的方向相反 * column：设置主轴的方向是垂直方向 * column-reverse: 与column 方向相反 */ .row { /* 默认，水平排列 */ flex-direction: row; height: 200px; } .row-reverse { /* 水平排列，反向 */ flex-direction: row-reverse; height: 200px; } .column { /* 垂直排列 */ flex-direction: column; } .column-reverse { /* 垂直排列 反向 */ flex-direction: column-reverse; } </style>
</head>
<body>
<div class="container row">
<div class="item1 item">1</div>
<div class="item2 item">2</div>
<div class="item3 item">3</div>
</div>
<div class="container row-reverse">
<div class="item1 item">1</div>
<div class="item2 item">2</div>
<div class="item3 item">3</div>
</div>
<div class="container column">
<div class="item1 item">1</div>
<div class="item2 item">2</div>
<div class="item3 item">3</div>
</div>
<div class="container column-reverse">
<div class="item1 item">1</div>
<div class="item2 item">2</div>
<div class="item3 item">3</div>
</div>
</body>
</html>
复制代码
执行效果以下
justify-content 属性
CSS justify-content 属性适用于伸缩容器元素，用于设置伸缩项目沿着主轴线的对齐方式。
语法结构
justify-content: center| flex-start| flex-end| space-between| space-around;
复制代码
值
center: 伸缩项目向第一行的中间位置对齐(居中)。flex-start: 伸缩项目向第一行的开始位置对齐(左对齐)。flex-end: 伸缩项目向第一行的结束位置对齐(右对齐)。space-between: 伸缩项目会平均分布在一行中(两端对齐，项目之间的间隔都相等)。space-around: 伸缩项目会平均分布在一行中(两端对齐，项目两侧的间隔相等)。
示例代码
<!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>justify-content 属性</title>
<link rel="stylesheet" href="./init.css" />
<style> .container { display: flex; width: 1080px; margin: 100px auto 0; } .item { height: 100px; width: 240px; line-height: 100px; } /* justify-content属性 * 做用：设置伸缩项目沿着主轴线的对齐方式 * 值 - center: 伸缩项目向第一行的中间位置对齐(居中)。 - flex-start: 伸缩项目向第一行的开始位置对齐(左对齐)。 - flex-end: 伸缩项目向第一行的结束位置对齐(右对齐)。 - space-between: 伸缩项目会平均分布在一行中(两端对齐，项目之间的间隔都相等)。 - space-around: 伸缩项目会平均分布在一行中(两端对齐，项目两侧的间隔相等)。 */ .center { justify-content: center; /* 居中 */ } .start { justify-content: flex-start; /* 左对齐 */ } .end { justify-content: flex-end; /* 右对齐 */ } .between { justify-content: space-between; /* 两端对齐，项目之间的间隔都相等 */ } .around { justify-content: space-around; /* 两端对齐，项目两侧的间隔相等 */ } </style>
</head>
<body>
<div class="container center">
<div class="item1 item">1</div>
<div class="item2 item">2</div>
<div class="item3 item">3</div>
</div>
<div class="container start">
<div class="item1 item">1</div>
<div class="item2 item">2</div>
<div class="item3 item">3</div>
</div>
<div class="container end">
<div class="item1 item">1</div>
<div class="item2 item">2</div>
<div class="item3 item">3</div>
</div>
<div class="container between">
<div class="item1 item">1</div>
<div class="item2 item">2</div>
<div class="item3 item">3</div>
</div>
<div class="container around">
<div class="item1 item">1</div>
<div class="item2 item">2</div>
<div class="item3 item">3</div>
</div>
</body>
</html>
复制代码
执行效果以下
值得注意的是 实现的是伸缩项目相对于伸缩容器的对齐方式，与页面无关
align-items 属性
CSS align-items 属性适用于伸缩容器元素，用于设置伸缩项目所在行沿着侧轴线的对齐方式。
语法结构
align-items: center | flex-start| flex-end| baseline| stretch;
复制代码
值
center: 伸缩项目向侧轴的中间位置对齐。flex-start: 伸缩项目向侧轴的起点位置对齐。flex-end: 伸缩项目向侧轴的终点位置对齐。baseline: 伸缩项目根据伸缩项目的基线对齐。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>align-items 属性</title>
<link rel="stylesheet" href="./init.css" />
<style> body { display: flex; } .container { display: flex; width: 600px; height: 500px; } /* align-items属性 * 做用：设置伸缩项目所在行沿着侧轴线的对齐方式 * 值 - center: 伸缩项目向侧轴的中间位置对齐。 - flex-start: 伸缩项目向侧轴的起点位置对齐。 - flex-end: 伸缩项目向侧轴的终点位置对齐。 - baseline: 伸缩项目根据伸缩项目的基线对齐。 - stretch: 默认值，伸缩项目拉伸填充整个伸缩容器。 */ .center { align-items: center; /* 居中 */ } .start { align-items: flex-start; /* 顶对齐 */ } .end { align-items: flex-end; /* 底对齐 */ } </style>
</head>
<body>
<div class="container center">
<div class="item1 item">1</div>
<div class="item2 item">2</div>
<div class="item3 item">3</div>
</div>
<div class="container start">
<div class="item1 item">1</div>
<div class="item2 item">2</div>
<div class="item3 item">3</div>
</div>
<div class="container end">
<div class="item1 item">1</div>
<div class="item2 item">2</div>
<div class="item3 item">3</div>
</div>
</body>
</html>
复制代码
执行效果以下
配合
justify-content属性，能够作出水平垂直居中
flex-wrap 属性
CSS flex-wrap 属性适用于伸缩容器元素，用于设置伸缩容器的子元素是单行显示仍是多行显示。
语法结构
flex-wrap: nowrap| wrap| wrap-reverse
复制代码
值
nowrap: 设置伸缩项目单行显示。这种方式可能致使溢出伸缩容器wrap: 设置伸缩项目多行显示，第一行在上方。wrap-reverse: 与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>flex-wrap 属性</title>
<link rel="stylesheet" href="./init.css" />
<style> body { display: flex; } .container { display: flex; width: 600px; height: 400px; } .item { width: 200px; } /* flex-wrap属性 * 做用：设置伸缩容器的子元素是单行显示仍是多行显示。 * 值 - nowrap: 设置伸缩项目单行显示。这种方式可能致使溢出伸缩容器 - wrap: 设置伸缩项目多行显示，第一行在上方。 - wrap-reverse: 与 `wrap` 相反，第一行在下方。 */ .nowrap { flex-wrap: nowrap; } .wrap { flex-wrap: wrap; } .wrap-reverse { flex-wrap: wrap-reverse; } </style>
</head>
<body>
<div class="container nowrap">
<div class="item1 item">1</div>
<div class="item2 item">2</div>
<div class="item3 item">3</div>
<div class="item4 item">4</div>
</div>
<div class="container wrap">
<div class="item1 item">1</div>
<div class="item2 item">2</div>
<div class="item3 item">3</div>
<div class="item4 item">4</div>
</div>
<div class="container wrap-reverse">
<div class="item1 item">1</div>
<div class="item2 item">2</div>
<div class="item3 item">3</div>
<div class="item4 item">4</div>
</div>
</body>
</html>
复制代码
执行效果以下
若是设置伸缩容器的宽度小于全部子元素宽度之和的话，子元素并无自动换行也没有溢出。
效果根据伸缩容器的宽度自动调整全部子元素的宽度
align-content 属性
CSS align-content 属性适用于伸缩容器元素，用于设置伸缩行的对齐方式。该属性会更改 flex-wrap 属性的效果。
该属性对单行弹性盒子模型无效。
语法结构
align-content: center| flex-start| flex-end| space-between| space-around| stretch;
复制代码
值
center: 各行向伸缩容器的中间位置对齐。flex-start: 各行向伸缩容器的起点位置对齐。flex-end: 各行向伸缩容器的终点位置对齐。space-between: 各行会平均分布在一行中。space-around: 各行会平均分布在一行中， 两端保留一半的空间。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>align-content 属性</title>
<link rel="stylesheet" href="./init.css" />
<style> body { display: flex; flex-wrap: wrap; } .container { display: flex; width: 600px; height: 500px; flex-wrap: wrap; } .item { width: 200px; } /* align-content属性 * 做用：设置设置伸缩行的对齐方式 * 值 - center: 各行向伸缩容器的中间位置对齐(居中)。 - flex-start: 各行向伸缩容器的起点位置对齐(顶对齐)。 - flex-end: 各行向伸缩容器的终点位置对齐(底对齐)。 - space-between: 各行会平均分布在一行中(两端对齐，项目之间的间隔都相等)。 - space-around: 各行会平均分布在一行中， 两端保留-半的空间(两端对齐，项目两侧的间隔相等)。 - stretch: 默认值，各行将会伸展以占用额外的空间。 * 注意：该属性对单行无效，即：带有 flex-wrap: nowrap */ .center { align-content: center; /* 居中 */ } .start { align-content: flex-start; /* 顶对齐 */ } .end { align-content: flex-end; /* 底对齐 */ } .between { align-content: space-between; /* 两端对齐，项目之间的间隔都相等 */ } .around { align-content: space-around; /* 两端对齐，项目两侧的间隔相等 */ } </style>
</head>
<body>
<div class="container center">
<div class="item1 item">1</div>
<div class="item2 item">2</div>
<div class="item3 item">3</div>
<div class="item4 item">4</div>
</div>
<div class="container start">
<div class="item1 item">1</div>
<div class="item2 item">2</div>
<div class="item3 item">3</div>
<div class="item4 item">4</div>
</div>
<div class="container end">
<div class="item1 item">1</div>
<div class="item2 item">2</div>
<div class="item3 item">3</div>
<div class="item4 item">4</div>
</div>
<div class="container between">
<div class="item1 item">1</div>
<div class="item2 item">2</div>
<div class="item3 item">3</div>
<div class="item4 item">4</div>
</div>
<div class="container around">
<div class="item1 item">1</div>
<div class="item2 item">2</div>
<div class="item3 item">3</div>
<div class="item4 item">4</div>
</div>
</body>
</html>
复制代码
执行效果以下
值得注意的是该属性对单行弹性盒子模型无效，即：带有
flex-wrap: nowrap
flex-flow 属性
CSS flex-flow 属性适用于伸缩容器元素，该属性是 flex-direction 和 flex-wrap 的简写属性，默认值为 row nowrap。
语法结构
flex-flow: <'flex-direction'> || <'flex-wrap'>
复制代码
伸缩项的属性
order 属性
CSS order 属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局。拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局。
语法结构
.item {
order: <integer>
}
复制代码
属性值
<integer>: 表示此可伸缩项目所在的次序组, 默认为0。
注意:
order仅仅对元素的视觉顺序产生做用，并不会影响元素的逻辑顺序。
示例代码
<!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>order 属性</title>
<link rel="stylesheet" href="./init.css" />
<style> body { display: flex; flex-wrap: wrap; } .container { display: flex; width: 800px; height: 300px; align-items: center; } .item { width: 200px;} /* order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 */ .item1 { order: 2; } .item4 { order: -1;} </style>
</head>
<body>
<div class="container">
<div class="item1 item">1</div>
<div class="item2 item">2</div>
<div class="item3 item">3</div>
<div class="item4 item">4</div>
</div>
</body>
</html>
复制代码
执行效果以下
使用这个属性能够很是简单的改变其布局
flex-grow 属性
flex-grow 属性规定在相同的容器中，项目相对于其他弹性项目的增加量，值默认为0
语法结构以下：
.item {
flex-grow: <number>;
}
复制代码
示例代码以下
<!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-grow 属性</title>
<link rel="stylesheet" href="./init.css" />
<style> body { display: flex; flex-wrap: wrap; } .container { display: flex; width: 800px; height: 300px; align-items: center; } .item { width: 200px; } /* flex-grow 属性规定在相同的容器中，项目相对于其他弹性项目的增加量，值默认为0 */ .item2 { flex-grow: 2; } </style>
</head>
<body>
<div class="container">
<div class="item1 item">1</div>
<div class="item2 item">2</div>
<div class="item1 item">1</div>
</div>
</body>
</html>
复制代码
执行效果以下
若是全部伸缩项目的
flex-grow的值都为1，则它们将等分剩余空间若是某个伸缩项目的
flex-grow的值为2，其余为1，则前者占据的剩余空间将比其余项多一倍。
flex-shrink 属性
flex-shrink 属性定义了项目的缩小比例，默认为1，即若是空间不足，该项目将缩小。
语法结构以下：
.item {
flex-shrink: <number>;
}
复制代码
示例代码以下
<!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-shrink 属性</title>
<link rel="stylesheet" href="./init.css" />
<style> body { display: flex; flex-wrap: wrap; } .container { display: flex; width: 500px; height: 300px; align-items: center; } .item { width: 200px; } /* flex-shrink 属性定义了项目的缩小比例，默认为1，即若是空间不足，该项目将缩小。 */ .item2 { flex-shrink: 2; } </style>
</head>
<body>
<div class="container">
<div class="item1 item">1</div>
<div class="item2 item">2</div>
<div class="item1 item">1</div>
</div>
</body>
</html>
复制代码
执行效果以下
若是全部伸缩项目的
flex-shrink的值都为1，当空间不足时，都将等比例缩小若是某个伸缩项目的
flex-shrink的值为0，其余为1，则空间不足时，前者不缩小。
flex-basis 属性
flex-basis 属性定义了在分配多余空间以前，项目在主轴方向上的初始大小。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的原本大小。
语法结构以下：
.item {
flex-basis: <length> | auto;
}
复制代码
它能够设为跟
width或height属性同样的值，例如设置230px，则项目将占据固定空间。
flex 属性
CSS flex 属性是 flex-grow 、flex-shrink 、flex-basis 的简写属性，用于设置伸缩项目如何伸长或缩短以适应伸缩容器中的可用空间。
语法结构
flex: auto | initial | none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
复制代码
none: 元素会根据自身宽高来设置尺寸。它是彻底非弹性的：既不会缩短，也不会伸长来适应 flex 容器。至关于将属性设置为"flex: 0 0 auto"。auto: 元素会根据自身的宽度与高度来肯定尺寸，可是会伸长并吸取 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这至关于将属性设置为 "flex: 1 1 auto".
flex 属性能够指定1个、2个或3个值。
单值语法: 值必须为如下其中之一:
- 一个无单位数(
<number>): 它会被看成<flex-grow>的值。 - 一个有效的宽度(width)值: 它会被看成
<flex-basis>的值。 - 关键字
none，auto或initial.
双值语法: 第一个值必须为一个无单位数，而且它会被看成 <flex-grow> 的值。第二个值必须为如下之一：
- 一个无单位数：它会被看成
<flex-shrink>的值。 - 一个有效的宽度值: 它会被看成
<flex-basis>的值。
三值语法:
- 第一个值必须为一个无单位数，而且它会被看成
<flex-grow>的值。 - 第二个值必须为一个无单位数，而且它会被看成
<flex-shrink>的值。 - 第三个值必须为一个有效的宽度值， 而且它会被看成
<flex-basis>的值。
align-self 属性
CSS align-self 属性适用于伸缩容器元素,于设置伸缩项目自身元素在侧轴的对齐方式。该属性可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性
语法结构
align-self: center| flex-start| flex-end| baseline| stretch;
复制代码
center: 伸缩项目向侧轴的中间位置对齐。flex-start: 伸缩项目向侧轴的起点位置对齐。flex-end: 伸缩项目向侧轴的终点位置对齐。baseline: 伸缩项目根据伸缩项目的基线对齐。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>align-self 属性</title>
<link rel="stylesheet" href="./init.css" />
<style> body { display: flex; flex-wrap: wrap; } .container { display: flex; width: 600px; height: 400px; align-items: center; } .item { width: 200px; } /* align-self 属性 设置单个元素的对齐方式 */ .start { align-self: flex-start; } .center { align-self: center; } .end { align-self: flex-end; } </style>
</head>
<body>
<div class="container">
<div class="item1 item start">1</div>
<div class="item2 item center">2</div>
<div class="item3 item end">3</div>
</div>
</body>
</html>
复制代码
执行效果以下
(完)
PS: 关于 Flex 布局有一个小游戏能够帮助咱们练习 Flexbox Froggy - 一个用来学CSS flexbox的游戏
用到的 CSS 样式
body {
margin: 0;
padding: 20px;
}
.container {
background-color: #fffae8;
margin: 30px auto;
}
.item {
height: 200px;
width: 200px;
line-height: 200px;
text-align: center;
font-size: 80px;
}
.item1 {
background-color: #e6005c;
}
.item2 {
background-color: #777bce;
}
.item3 {
background-color: #c9780c;
}
.item4 {
background-color: #fef3c9;
}
.item5 {
background-color: #ce3b3b;
}
.item6 {
background-color: #e666ff;
}
.item7 {
background-color: #f4ea20;
}
.item8 {
background-color: #b4a4ca;
}
复制代码
相关文章
- 1. 【不同的CSS】一文掌握 Grid 布局(长篇警告)
- 2. 快速掌握flex布局
- 3. CSS篇：Flex布局
- 4. CSS篇 - 弹性布局flex
- 5. 五分钟掌握Flex布局
- 6. CSS-Flex 布局
- 7. Css-flex 布局
- 8. CSS flex布局
- 9. css flex布局
- 10. Flex css 布局
- 更多相关文章...
- • ASP.NET Web Pages - 页面布局 - ASP.NET 教程
- • ASP.NET MVC - 样式和布局 - ASP.NET 教程
- • 再有人问你分布式事务，把这篇扔给他
- • SpringBoot中properties文件不能自动提示解决方法
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Duang!超快Wi-Fi来袭
- 2. 机器学习-补充03 神经网络之**函数(Activation Function)
- 3. git上开源maven项目部署 多module maven项目（多module maven+redis+tomcat+mysql）后台部署流程学习记录
- 4. ecliple-tomcat部署maven项目方式之一
- 5. eclipse新导入的项目经常可以看到“XX cannot be resolved to a type”的报错信息
- 6. Spark RDD的依赖于DAG的工作原理
- 7. VMware安装CentOS-8教程详解
- 8. YDOOK：Java 项目 Spring 项目导入基本四大 jar 包 导入依赖，怎样在 IDEA 的项目结构中导入 jar 包 导入依赖
- 9. 简单方法使得putty（windows10上）可以免密登录树莓派
- 10. idea怎么用本地maven
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 【不同的CSS】一文掌握 Grid 布局(长篇警告)
- 2. 快速掌握flex布局
- 3. CSS篇：Flex布局
- 4. CSS篇 - 弹性布局flex
- 5. 五分钟掌握Flex布局
- 6. CSS-Flex 布局
- 7. Css-flex 布局
- 8. CSS flex布局
- 9. css flex布局
- 10. Flex css 布局