HTML弹性布局基础讲解（一）

最新推荐文章于 2024-04-14 20:53:51 发布

河北颜良

最新推荐文章于 2024-04-14 20:53:51 发布

阅读量622

点赞数

分类专栏：笔记基础文章标签： css html flex

本文链接：https://blog.csdn.net/zhe06/article/details/106752218

版权

笔记同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

基础

11 篇文章 0 订阅

订阅专栏

一，弹性布局

弹性布局，又称“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>

效果：在这里插入图片描述

三，语法

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

 display: flex;

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

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

主轴：在弹性布局中，我们会通过属性规定水平/垂直方向为主轴；
控制项目们的排列方向的一根轴
主轴的方向，
被称为主轴的起点和终点
交叉轴：与主轴垂直的另一方向，称为交叉轴。
永远与主轴垂直相交的一根轴
图解（红色箭头为主轴，蓝色箭头为交叉轴）
在这里插入图片描述

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

flex-direction: row;

在这里插入图片描述

 案例：
<!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>

在这里插入图片描述

交叉轴：
图片来源网络侵权必删（非盈利）
在这里插入图片描述

交叉轴上对齐方式（和主轴用法类似）
align-items：
flex-start 默认值。在交叉轴起点对齐
center 交叉轴中间对齐
flex-end 交叉轴终点对齐
baseline 每个项目中的文本，基线要对齐
stretch 项目在交叉轴方向上没有定义尺寸，项目将充满交叉轴

河北颜良

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML弹性布局基础讲解（一）

一，弹性布局弹性布局，又称“Flex布局”，是W3C在2009年提出的方案。主要解决某个元素中内部子元素的布局方式，为布局提供的非常大的灵活性和操控性。任何一个容器都可以指定为flex布局，包括行内布局。如果是webkit内核，必须加-webkit- 前缀二，基础概念① 容器：需要添加弹性布局的父元素；当一个元素设置了display:flex这个元素内部的子元素就按照弹性布局方式排列这个元素叫做容器注：设置了display：flex的元素本身不是弹性布局，它的子元素是弹性布局② 项
复制链接

扫一扫

专栏目录