html5

最新推荐文章于 2025-08-01 09:42:51 发布

原创最新推荐文章于 2025-08-01 09:42:51 发布 · 1.4k 阅读

44 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #前端 #html

本文详细解释了CSS3中的flex-flow属性、flex-direction和flex-wrap的组合使用，弹性子元素的order属性排序，以及align-self属性的侧轴对齐方式。还介绍了背景-clip和background-origin属性，以及线性渐变和径向渐变的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。
       flex-flow 属性用于设置或检索弹性盒模型对象的子元素排列方式。
       flex-direction 属性规定灵活项目的方向。
       flex-wrap 属性规定灵活项目是否拆行或拆列。
       flex-flow:flex-direction flex-wrap;复合属性
       flex-direction代表的值有：row|row-reverse|column|column-reverse
       flex-wrap代表值有：nowrap|wrap|wrap-reverse

order弹性子元素，排序，用整数值来定义排列顺序，数值小的排在最前面，
可以为负值，属性设置弹性容器内弹性子元素属性

align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。注：给子元素设置
       align-self: auto | flex-start | flex-end | center | baseline | stretch
       - auto
       如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
       - flex-start
       弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
       - flex-end
       弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
       - center
       弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
       - baseline
       如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
       - stretch
       如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

CSS3中background-clip背景剪裁属性是从指定位置开始绘制。

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
       background-image: linear-gradient(方向或角度, 颜色, 颜色, ...);
       默认从上往下
       to left|top|right|bottom 方向 ||to bottom right
       background-image: linear-gradient(to left,#36964e,#963674);
       设置角度deg
       background-image: linear-gradient(90deg,#36964e,#000);
       repeating-linear-gradient重复的线性渐变
       background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
       径向渐变（Radial Gradients）- 由它们的中心定义
       background-image: radial-gradient(形状大小 at position, 颜色, ..., 颜色);
       形状circle 表示圆形，ellipse 表示椭圆形
       大小farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
       closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
       closest-corner ：指定径向渐变的半径长度为从圆心到离圆心最近的角
       farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.boss {
				width: 400px;
				height: 300px;
				border: 1px solid red;
				display: flex;
				/* flex-flow: column-reverse wrap-reverse; */
			}
			.box1 {
				width: 100px;
				height: 100px;
				background-color: pink;
				/* order: -2; */
				align-self: auto;
			}
			.box2 {
				width: 100px;
				height: 100px;
				background-color: orange;
				align-self: flex-end;
			}
			.box3 {
				width: 100px;
				height: 100px;
				background-color: aqua;
				/* order: -1; */
				align-self: center;
			}
			.boxx1 {
				width: 300px;
				height: 300px;
				border: 30px solid aqua;
				/* border-top: 10px solid red;
				border-left: 20px solid red;
				border-bottom: 30px solid red;
				border-right: 40px solid red; */
				/* border-top-width: 10px;
				border-left-width: 20px;
				border-bottom-width: 30px;
				border-right-width: 40px;
				border-top-style: solid;
				border-left-style: dashed;
				border-bottom-style: dotted;
				border-right-style: double; */
				/* none:没有边框,即忽略所有边框的宽度(默认值)
				·solid:边框为单实线
				·dashed:边框为虚线
				·dotted:边框为点线
				·double:边框为双实线 */
				/* border-top-color: red;
				border-left-color: orange;
				border-bottom-color: pink;
				border-right-color: aqua; */
				/* 圆角 */
				/* border-radius: 10px 20px 30px; */
				/* border-radius: 50%; */
				/* 边框阴影 */
				/* box-shadow: 水平 垂直 大小 颜色; */
				/* 图形边框 */
				/* border-image: url(../../2.png) 15 15 round; */
			}
			.boxx2 {
				width: 200px;
				height: 200px;
				background-image: url(../../2.png);
				/* background-origin: content-box; */
				/* background-clip: content-box; */
				background-attachment: fixed;
				background-size: 100% 100%;
				background-repeat:no-repeat;
				border: 1px solid red;
			}
			.boxx3 {
				width: 200px;
				height: 200px;
				background-image: url(../../2.png);
				/* background-origin: padding-box; */
				/* background-clip: padding-box; */
				background-attachment: scroll;
				background-size: 100% 100%;
				background-repeat:no-repeat;
				border: 1px solid orange;
			}
			.boxx4 {
				width: 200px;
				height: 200px;
				background-image: url(../../2.png);
				/* background-origin: border-box; */
				background-clip: border-box;
				background-size: 100% 100%;
				background-repeat:no-repeat;
				border: 1px solid pink;
			}
			.boxse1 {
				width: 300px;
				height: 200px;
				/* background-image: linear-gradient(to bottom right,#36964e,#963674); */
				/* background-image: linear-gradient(90deg,rgba(255,0,0,0), rgba(255,0,0,1));
				 */
				background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
			}
			.boxse2 {
				width: 300px;
				height: 300px;
				/* background-image: radial-gradient(circle,red 5%, yellow 30%,green); */
				/* background-image: radial-gradient(closest-side at 60% 55%,red, yellow,green); */
				 background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
			}
		</style>
	</head>
	<body style="height: 2000px">
		<!-- flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。
		flex-flow 属性用于设置或检索弹性盒模型对象的子元素排列方式。
		flex-direction 属性规定灵活项目的方向。
		flex-wrap 属性规定灵活项目是否拆行或拆列。
		flex-flow:flex-direction flex-wrap;复合属性
		flex-direction代表的值有：row|row-reverse|column|column-reverse
		flex-wrap代表值有：nowrap|wrap|wrap-reverse
		-->
		<!-- order弹性子元素，排序，用整数值来定义排列顺序，数值小的排在最前面，
		可以 为负值，属性设置弹性容器内弹性子元素属性 -->
		<!-- align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。注：给子元素设置
		 align-self: auto | flex-start | flex-end | center | baseline | stretch
		 - auto
		   如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
		 - flex-start
		   弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
		 - flex-end
		   弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
		 - center
		   弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
		 - baseline
		   如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
		 - stretch
		   如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
		-->
		<div class="boss">
			<div class="box1">11111</div>
			<div class="box2">22222</div>
			<div class="box3">33333</div>
		</div>
		<div class="boxx1"></div>
		<div class="boxx2"></div>
		<div class="boxx3"></div>
		<div class="boxx4"></div>
		<hr >
		<div class="boxse1"></div>
		<hr >
		<div class="boxse2"></div>
		<!-- /* background-Origin属性指定了背景图像的位置区域 */ -->
		<!-- CSS3中background-clip背景剪裁属性是从指定位置开始绘制。 -->
		<!-- background ： [background-color] | [background-image] 
		| [background-position][/background-size] | [background-repeat] 
		| [background-attachment] | [background-clip] | [background-origin], -->
		<!-- 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
		background-image: linear-gradient(方向或角度, 颜色, 颜色, ...);
		默认从上往下
		to left|top|right|bottom  方向  ||to bottom right
		background-image: linear-gradient(to left,#36964e,#963674);
		设置角度deg
		background-image: linear-gradient(90deg,#36964e,#000);
		repeating-linear-gradient重复的线性渐变
		background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
		径向渐变（Radial Gradients）- 由它们的中心定义
		background-image: radial-gradient(形状  大小 at position, 颜色, ..., 颜色);
		形状circle 表示圆形，ellipse 表示椭圆形
		大小farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
		closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
		closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
		farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
		 -->
	</body>
</html>