当前位置： 移动技术网 > IT编程>网页制作>CSS > Flex 使用场景(二）

Flex 使用场景(二）

2020年07月24日  | 移动技术网IT编程  | 我要评论

     Flex 就是 容器 和 轴。容器包括外层的父容器和内层的子容器，轴包括 主轴 和 交叉轴，可以说 flex 布局的全部特性都构建在这两个概念上。

flex 布局涉及到 12 个 CSS 属性（不含 display: flex），其中父容器、子容器各 6 个。

不过常用的属性只有 4 个，父容器、子容器各 2 个

设置了Flex布局后，子元素的float，clear，还有verticle-align属性都不起作用

属性说明：

  • 父容器：
    -- justify-content 属性用于定义如何沿着主轴方向排列子容器。

--- flex-start：起始端对齐
--- flex-end：末尾段对齐
--- center：居中对齐
--- space-around：子容器沿主轴均匀分布，位于首尾两端的子容器到父容器的距离是子容器间距的一半。
--- space-between：子容器沿主轴均匀分布，位于首尾两端的子容器与父容器相切。

---设置换行方式：flex-wrap

  • align-items 属性用于定义如何沿着交叉轴方向分配子容器的间距。

    --- flex-start：起始端对齐
    --- flex-end：末尾段对齐
    --- center：居中对齐
    --- baseline：基线对齐，这里的 baseline 默认是指首行文字，即 first baseline，所有子容器向基线对齐，交叉轴起点到元素基线距离最大的子容器将会与交叉轴起始端相切以确定基线。
    --- stretch：子容器沿交叉轴方向的尺寸拉伸至与父容器一致。

  • 子容器

    • 在主轴上如何伸缩：flex
    • 子容器是有弹性的（flex 即弹性），它们会自动填充剩余空间，子容器的伸缩比例由 flex 属性确定。
    • flex 的值可以是无单位数字（如：1, 2, 3），也可以是有单位数字（如：15px，30px，60px），还可以是 none 关键字。子容器会按照 flex 定义的尺寸比例自动伸缩，如果取值为 none 则不伸缩。

----单独设置子容器如何沿交叉轴排列：align-self

此属性的可选值与父容器 align-items 属性完全一致，如果两者同时设置则以子容器的 align-self 属性为准。

  • 轴

    ---向右：flex-direction: row
    ---向左：flex-direction: row-reverse
    ---向下：flex-direction: column
    ---向上：flex-direction: column-reverse

 

使用场景

（一） 绝对居中

<style type="text/css">
			/*绝对居中*/
			#dv{
				display: flex;
				width: 100%;
				height: 200px;
				/* 主轴 */
				justify-content: center;
				/* 交叉轴 ->单行*/
				align-items: center;
				border: 1px solid black;
			}
			
			#dv div{
				width:100px;
				height: 100px;
				background: coral;
				border: 2px solid dodgerblue;
			}
		</style>
	</head>
	<body>
		<div id="dv">
			<div>one</div>
        </div>

    </body>

 

（二） 图片展示： 图片指定大小，数量不确定

<style type="text/css">
			/*图片展示： 图片指定大小，不指定数量*/
			#dv{
				margin: 0 auto;
				display: flex;
				width: 38%;
				height: 500px;
				/* 主轴 ：起始 */
				justify-content: flex-start;
				/*交叉轴方向行间排列-> 多行*/
				align-content: flex-start;
				/*换行*/
				flex-wrap: wrap;
				border: 1px solid black;
				/*内边距*/
				padding: 10px;
				/*盒子实际大小*/
				box-sizing: border-box;
				background: aliceblue;
			}
			
			#dv div{
				width:80px;
				height: 80px;
				background:url(img/2.png) no-repeat;
				/*确定图片大小*/
				background-size:cover;
				border: 1px solid dodgerblue;
				/*外边距*/
				margin: 5px;
				/*圆形*/
				border-radius: 50%;
				text-align: center;
				line-height: 80px;
			}
		</style>

 

（三）单行左右布局：

     父容器设置为flex，子容器的div不再独占行，d1设置flex：1 占据d2剩下所有空间；且左右div都不需要指定宽度，也不需要浮动；

		<style type="text/css">
			/*单行左右布局*/
			#box{
				display: flex;
				width: 20%;
				padding: 5px;
				border: 3px solid aquamarine;
			}
			
			div.d1{
				padding-left: 30px;
			    flex: 1;
			}
			div{
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div class="d1">热门活动</div>
			<div class="d2">更多</div>
		</div>
	</body>

 

  (四） 三列使用 （中间设置flex：1；两边不设置宽度，三列都可做到自适应）

<style type="text/css">
			/*三列布局*/
			#box{
				display: flex;
				width: 20%;
				padding: 5px;
				border: 3px solid aquamarine;
			}
			/*中间设置flex：1；两边不设置宽度，三列都可做到自适应*/
			div.d2{
				padding-left: 30px;
			    flex: 1;
			}
			div{
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div class="d1">热门活动</div>
			<div class="d2">更多</div>
			<div class="d3"><img src="image/arrow-right.gif"/></div>
		</div>
	</body>

 

本文地址：https://blog.csdn.net/hlx20080808/article/details/107505330

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网