基本概念
- 设置
display: flex;的元素称为 Flex 容器，其中所有的子元素称为 Flex 项目 - 容器存在两根用于定位的轴，分别是水平的 主轴 和垂直的 交叉轴，项目默认沿主轴排列
容器属性（设置在容器上）
- flex-direction：设置主轴的方向，可选值如下
- row（默认）：主轴沿水平方向，起点在左边
- row-reverse：主轴沿水平方向，起点在右边
- column：主轴沿垂直方向，起点在上边
- column-reverse：主轴沿垂直方向，起点在下边
- flex-wrap：定义换行的方式，可选值如下
- nowrap（默认）：不换行
- wrap：换行，第一行在上面
- wrap-reverse：换行，第一行在下面
- justify-content：定义项目在主轴上的对齐方式，可选值如下
- flex-start（默认）：起点对齐
- flex-end：终点对齐
- center：居中对齐
- space-between：两端对齐，项目之间间隔相等
- space-around：两端对齐，项目两侧间隔相等
- align-items：定义项目在交叉轴上的对齐方式，可选值如下
- flex-start：起点对齐
- flex-end：终点对齐
- center：居中对齐
- baseline：项目的第一行文字的基线对齐
- stretch（默认）：如果项目未设置 height 或者设置为 auto，那么项目占满容器的高度
项目属性（设置在项目上）
-
order：定义项目的排列顺序，属性接受一个整数，数值越小排列越前，默认为 0
-
flex-grow：定义项目的放大比例，默认为 0，表示即使存在剩余空间，也不放大
如果所有项目设置为 1，并且还有剩余空间，那么它们将会等分剩余空间
如果一个项目设置为 2，其它项目设置为 1，那么该项目占据的剩余空间将会比其它项目多一倍
-
flex-shrink：定义项目的缩小比例，默认为 1，表示如果空间不足，就会缩小
如果所有项目设置为 1，并且空间不足，那么它们将会等比缩小
如果一个项目设置为 0，其它项目设置为 1，那么该项目不会缩小，而其它项目正常缩小
-
flex-basis：在分配多余空间前，项目占据的主轴空间，默认为 auto，表示项目原来的大小
-
align-self：定义项目的对齐方式，覆盖 align-items 设置，默认为 auto，表示继承父元素设置
弹性盒子样式
| 属性 | 说明 | CSS |
|---|---|---|
| flex | 复合属性，设置或检索弹性盒模型对象的子元素如何分配空间 | 3 |
| flex-flow | 复合属性，设置或检索弹性盒模型对象的子元素排列方式 | 3 |
| align-content | 在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直） | 3 |
| align-items | 定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式 | 3 |
| align-self | 定义flex子项单独在侧轴（纵轴）方向上的对齐方式 | 3 |
| justify-content | 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式 | 3 |
| order | 设置或检索弹性盒模型对象的子元素出现的順序 | 3 |
<!doctype html>
<html>
<head>
<style>
div.main {
width: 330px;
height: 200px;
display: flex;
}
div.item { flex: 1; }
div.item:nth-child(1) { background-color: coral; }
div.item:nth-child(2) { background-color: lightblue; }
div.item:nth-child(3) { background-color: lightgreen; }
</style>
</head>
<body>
<div class="main">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
div.main {
width: 330px;
height: 200px;
display: flex;
align-items: center;
}
div.item { flex: 1; }
div.item:nth-child(1) { background-color: coral; }
div.item:nth-child(2) { background-color: lightblue; }
div.item:nth-child(3) { background-color: lightgreen; }
</style>
</head>
<body>
<div class="main">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
多列样式
| 属性 | 说明 | CSS |
|---|---|---|
| column-fill | 指定如何填充列（仅火狐浏览器支持） | 3 |
| column-gap | 指定列之间的差距 | 3 |
| column-rule | 对于设置所有column-rule-*属性的简写属性 | 3 |
| column-span | 指定元素应该跨越多少列 | 3 |
| columns | 缩写属性设置列宽和列数 | 3 |
<!doctype html>
<html>
<head>
<style>
div.main {
columns:100px 3;
}
</style>
</head>
<body>
<div class="main">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
div.main {
columns:100px 3;
column-gap:40px;
}
div.main h2 {
column-span: all;
}
</style>
</head>
<body>
<div class="main">
<h2>英国维斯米斯特教堂碑文</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
div.main {
columns:100px 3;
column-gap:40px;
column-rule:4px outset #ff00ff;
}
</style>
</head>
<body>
<div class="main">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</div>
</body>
</html>
圆角样式
允许你为元素添加圆角边框
语法：border-radius: 1-4 length|%; 1-4 表示可取1-4个值
顺序：左上角、右上角、右下角、左下角（顺时针方向）
拆分：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius
- 一个值：四个圆角值详情哦那个
- 两个值：第一个值为左上角与右下角，第二个值为右上角与左下角
- 三个值：第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
- 四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角
border-radius: 20px; -- 表示左上角、右上角、右下角、左下角圆角都为 20px
border-radius: 10px 20px; -- 表示左上角、右下角圆角为 10px，右上角、左下角圆角为 20px
border-radius: 10px 20px 5px; -- 表示左上角圆角为 10px，右上角、左下角圆角都为 20px，右下角圆角为 5px
border-radius: 10px 20px 5px 10px; -- 表示左上角圆角为 10px，右上角圆角为 20px，右下角圆角为 5px，左下角圆角为 10px
border-radius: 20%; -- 表示左上角、右上角、右下角、左下角圆角都为 20%
border-radius: 10% 20%; -- 表示左上角、右下角圆角为 10%，右上角、左下角圆角为 20%
border-radius: 10% 20% 5%; -- 表示左上角圆角为 10%，右上角、左下角圆角都为 20%，右下角圆角为 5%
border-radius: 10% 20% 5% 10%; -- 表示左上角圆角为 10%，右上角圆角为 20%，右下角圆角为 5%，左下角圆角为 10%
<!doctype html>
<html>
<head>
<style>
div {
width: 300px;
height: 200px;
}
.border1 {
border-radius: 20px;
}
.border2 {
border-radius: 10px 20px;
}
.border3 {
border-radius: 10px 20px 5px;
}
.border4 {
border-radius: 10px 20px 5px 10px;
}
.border5 {
border-radius: 20%;
}
.border6 {
border-radius: 10% 20%;
}
.border7 {
border-radius: 10% 20% 5%;
}
.border8 {
border-radius: 10% 20% 5% 10%;
}
</style>
</head>
<body>
<div class="border1"></div>
<div class="border2"></div>
<div class="border3"></div>
<div class="border4"></div>
<div class="border5"></div>
<div class="border6"></div>
<div class="border7"></div>
<div class="border8"></div>
</body>
</html>
边界图片样式
设置或检索对象的边框样式使用图像来填充
语法：border-image: source slice width outset repeat;
| 值 | 描述 |
|---|---|
| border-image-source | 用于指定要用于绘制边框的图像的位置 |
| border-image-slice | 图像边界向内偏移 |
| border-image-width | 图像边界的宽度 |
| border-image-outset | 用于指定在边框外部绘制 border-image-area 的量 |
| border-image-repeat | 这个例子演示了如何创建一个border-image 属性的按钮 |
<!doctype html>
<html>
<head>
<style>
div {
width: 300px;
height: 200px;
}
div.main1 {
background-color:lightgrey;
border:30px solid transparent;
border-image: url('https://www.runoob.com/images/border.png');
border-image-slice: 30 30 30 30;
border-image-width: 1 1 1 1;
border-image-outset: 0;
border-image-repeat:stretch;
}
div.main2 {
background-color:lightgrey;
border:30px solid transparent;
border-image: url('https://www.runoob.com/images/border.png');
border-image-slice: 30 30 30 30;
border-image-width: 1 1 1 1;
border-image-outset: 0;
border-image-repeat:repeat;
}
div.main3 {
background-color:lightgrey;
border:30px solid transparent;
border-image: url('https://www.runoob.com/images/border.png');
border-image-slice: 30 30 30 30;
border-image-width: 1 1 1 1;
border-image-outset: 0;
border-image-repeat:round;
}
div.main4 {
background-color:lightgrey;
border:30px solid transparent;
border-image: url('https://www.runoob.com/images/border.png');
border-image-slice: 30 30 30 30;
border-image-width: 1 1 1 1;
border-image-outset: 0;
border-image-repeat:initial;
}
</style>
</head>
<body>
<div class="main1"></div>
<div class="main2"></div>
<div class="main3"></div>
<div class="main4"></div>
</body>
</html>
背景裁切样式
| 属性 | 描述 | CSS |
|---|---|---|
| background-clip | 指定对象的背景图像向外裁剪的区域 | 3 |
| background-origin | S设置或检索对象的背景图像计算 background-position 时的参考原点(位置) | 3 |
| background-size | 检索或设置对象的背景图像的尺寸大小 | 3 |
- background-size 指定背景图像的大小
- background-origin 属性指定了背景图像的位置区域
- background-clip 背景剪裁属性是从指定位置开始绘制
- background-image 可设置多张图片，哪个在前哪个就在上层
- background-position 可对应多个背景图设置位置
- background-repeat 可对应多个背景图设置填充方式
外观样式
| 属性 | 说明 | CSS |
|---|---|---|
| appearance | 定义元素的外观样式 | 3 |
| box-sizing | 允许您为了适应区域以某种方式定义某些元素 | 3 |
| icon | 为元素指定图标（暂无浏览器支持） | 3 |
| nav-down | 指定用户按向下键时向下导航的位置（暂无浏览器支持） | 3 |
| nav-index | 指定导航（tab）顺序（暂无浏览器支持） | 3 |
| nav-left | 指定用户按向左键时向左导航的位置（暂无浏览器支持） | 3 |
| nav-right | 指定用户按向右键时向右导航的位置（暂无浏览器支持） | 3 |
| nav-up | 指定用户按向上键时向上导航的位置（暂无浏览器支持） | 3 |
| outline-offset | 设置轮廓框架在 border 边缘外的偏移（IE 浏览器不支持） | 3 |
| resize | 定义元素是否可以改变大小 | 3 |
<!doctype html>
<html>
<head>
<style>
div.main {
width: 300px;
height: 200px;
padding: 20px;
background-color: pink;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="main"></div>
</body>
</html>
2006
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
