javascript计算rem弹性布局 html弹性布局

转载

mob64ca141a683a 2023-10-15 23:02:08

文章标签 javascript计算rem弹性布局 css html flex 默认值 文章分类 JavaScript 前端开发

一，弹性布局

弹性布局，又称“Flex布局”，是W3C在2009年提出的方案。
主要解决某个元素中内部子元素的布局方式，为布局提供的非常大的灵活性和操控性。

任何一个容器都可以指定为flex布局，包括行内布局。如果是webkit内核，必须加-webkit- 前缀

二，基础概念

容器：需要添加弹性布局的父元素；
当一个元素设置了display:flex
这个元素内部的子元素就按照弹性布局方式排列
这个元素叫做容器
注：设置了display：flex的元素本身不是弹性布局，它的子元素是弹性布局
项目：弹性布局容器中的每一个子元素，称为项目；
当一个元素设置了display:flex
这个元素内部的子元素就按照弹性布局方式排列
这些子元素，叫做弹性项目

案例：（运行时记得删除汉字注释）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			#fu{
				width: 800px;   注：这个div块只设置了宽度
				border: 1px solid red;   
				display: flex;   注；只能写在父元素
				justify-content: space-between;   注：定义项目在主轴上的对齐方式--两端对齐
			}
			#z1{width: 200px;height: 200px;background-color: #DCDCDC;}
			#z2{width: 200px;height: 200px;background-color: #0062A9;}
			#z3{width: 200px;height: 200px;background-color: pink;}
		</style>
	</head>
	<body>
		<div id="fu">   父元素
			<div id="z1"></div>  子元素
			<div id="z2"></div> 子元素
			<div id="z3"></div> 子元素
		</div>
	</body>
</html>

效果：

javascript计算rem弹性布局 html弹性布局_默认值

三，语法

display:
flex 经常用于让块级元素变为弹性容器
inline-flex; 经常用于让行内元素变为弹性容器

display: flex;

特点：
1.当元素变为弹性容器之后，这个元素的text-align失效，内部项目不会执行水平对齐
2.弹性项目，可以设置宽高
3.项目的浮动，clear：both都失效
总结：之前所有学习过的对齐方式，对于弹性项目都失效
弹性项目的对齐，取决于主轴、交叉轴

四，弹性布局基本方向（主轴和交叉轴）

主轴：在弹性布局中，我们会通过属性规定水平/垂直方向为主轴；

控制项目们的排列方向的一根轴

主轴的方向，

被称为主轴的起点和终点

交叉轴：与主轴垂直的另一方向，称为交叉轴。

永远与主轴垂直相交的一根轴

图解（红色箭头为主轴，蓝色箭头为交叉轴）

javascript计算rem弹性布局 html弹性布局_html_02

1.主轴方向（4根主轴）
flex-direction:
row; 默认值，主轴为x轴，主轴起点在左侧
row-reverse 主轴为x，主轴起点在右侧
column 主轴为y轴，主轴起点在顶部
column-reverse 主轴为y轴，主轴起点在底部

flex-direction: row;

javascript计算rem弹性布局 html弹性布局_html_03

案例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			#fu{
				width: 800px;
				border: 1px solid red;
				display: flex;
				flex-direction: row-reverse;  主轴为x，主轴起点在右侧
			}
			#z1{width: 200px;height: 200px;background-color: #DCDCDC;}
			#z2{width: 200px;height: 200px;background-color: #0062A9;}
			#z3{width: 200px;height: 200px;background-color: pink;}
		</style>
	</head>
	<body>
		<div id="fu">
			<div id="z1"></div>
			<div id="z2"></div>
			<div id="z3"></div>
		</div>
	</body>
</html>

javascript计算rem弹性布局 html弹性布局_flex_04