css弹性容器效果及属性

最新推荐文章于 2022-09-23 10:43:58 发布

jo伲

最新推荐文章于 2022-09-23 10:43:58 发布

阅读量174

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/m0_63130323/article/details/125456737

版权

什么是Flex ：

2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览的支持，这意味着，现在就能很安全地使用这项功能。

Flex 布局是什么？

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

1.flex-direction
指定容器中弹性元素的排列方式

可选值：

row 默认值，弹性元素在容器中水平排列（左向右）

主轴自左向右

row-reverse 弹性元素在容器中反向水平排列（右向左）

主轴自右向左

column 弹性元素纵向排列（自上向下）

column-reverse 弹性元素纵向排列（自下向上）

2.flex-grow
指定弹性元素的伸展的系数

-当父元素有多余空间时，子元素如何伸展

-父元素的剩余空间会按照比例进行分配

3.flex-shrink
指定弹性元素的收缩系数

-当父元素中的空间不足以容纳所有的子元素值，如何对子元素进行收缩

4.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>
	.box1{
	background-image: url(./douyin/图片排列/西游记/west_01.png);
	height:180px;
	width: 123px;
	margin: 0 auto;
	animation-name: run;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: steps(4);

	}
	.two {
	position: absolute;
	top: 500px;
	left: 200px;
	}
	.two2 {
	position: absolute;
	top: 500px;
	left: 350px;
	}
	.two3 {
	position: absolute;
	top: 500px;
	left: 500px;
	}
	.two4 {
	position: absolute;
	top: 500px;
	left: 650px;
	}
	.box2{
	background-image: url(./douyin/图片排列/西游记/west_02.png);
	height:180px;
	width: 123px;
	margin: 0 auto;
	animation-name: run;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: steps(4);

	}
	.box3{
	background-image: url(./douyin/图片排列/西游记/west_03.png);
	height:180px;
	width: 123px;
	margin: 0 auto;
	animation-name: run;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: steps(4);

	}
	.box4{
	background-image: url(./douyin/图片排列/西游记/west_04.png);
	height:180px;
	width: 123px;
	margin: 0 auto;
	animation-name: run;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: steps(4);

	}
	@keyframes run{
	from{
	background-position: 0 0;
	}
	to{
	background-position: -200px 0;
	}

	}
	</style>
	</head>
	<body>
	<div class="box1 two"></div>
	<div class="box2 two2"></div>
	<div class="box3 two3"></div>
	<div class="box4 two4"></div>
	<body>

	<body background="./douyin/图片排列/西游记/bac.webp" style=" background-repeat:no-repeat ;background-size:100% 100%;
	background-attachment: fixed;">
	</body>

	</body>
	</html>