弹性盒子相关性质

最新推荐文章于 2023-06-27 17:44:30 发布

Hatsune_1

最新推荐文章于 2023-06-27 17:44:30 发布

阅读量278

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/Hatsune_1/article/details/127699839

版权

一、什么是弹性盒子？
1、弹性盒子是CSS3的一种新的布局模式。

2、引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和空白空间的分配

3、操作方便，布局简单，移动端使用广泛PC端浏览器支持情况较差

4、IE11或更低版本中，不支持或部分支持

5、在盒模型中较为灵活

6、弹性盒模型的内容包括：弹性容器、弹性子元素——项目

7、原理：为父元素设置flex属性，控制子元素的位置及排列方式

8、应用场景 : 移动端
二、设置弹性盒子的相关知识

1、display: flex; 将对象作为块级弹性伸缩盒显示

2、display: inline-flex; 将对象作为内联块级弹性伸缩盒显示

3、Flex是什么？

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

**注意：**这是您需要在父容器上设置的唯一属性，它的所有直接子容器将自动变为flex项目。

4、Flex的基础概念

flex容器、项目——弹性子元素

默认在容器中有两根轴线

默认主轴方向——x轴方向，水平向右（左侧为主轴起点，右侧为主轴终点）

默认交叉轴方向——y轴方向，水平向下（上方为交叉轴起点，下方交叉轴终点）

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

注意: 主轴不一定是x轴,还可以是y轴,有一边是主轴,另外一边就是侧轴

附上图片一份：

5、容器属性

a、flex-direction属性：设置主轴的方向，子元素的排列方向

b、flex-direction: row; 默认值，主轴方向为水平方向，起点在左端

c、flex-direction: row-reverse; 主轴方向为水平方向，起点在右端

d、flex-direction: column; 主轴方向为垂直方向，起点在上方

e、flex-direction: column-reverse; 主轴方向垂直方向，起点在下方

6、简单的小例子


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0px;
				margin: 0px;
			}
			#box{
				width: 870px;
				/* height: 468px; */
				border: 1px solid red;
				margin: 50px auto;
				/* 设置容器/父级标签为弹性盒子 */
				display: flex;
				flex-wrap: wrap;
				/* 水平方向贴切 */
				justify-content:space-between;
				/* 垂直方向贴切  需要给父级标签设置高度 子元素
				中间才有间距*/
				/* align-content: space-between; */
				
			}
			
			#box div{
				width: 202px;
				height: 220px;
				background-color: green;
				font-size: 28px;
				color: #fff;
				text-align: center;
				
			}
			/* n是便变量 从0开始的 */
			#box div:nth-of-type(n+5){
				margin-top:20px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
		</div>
	</body>
</html>

生成效果图：