简单弹性布局

最新推荐文章于 2024-07-21 21:06:06 发布
最新推荐文章于 2024-07-21 21:06:06 发布
阅读量188 收藏
点赞数 1
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45726776/article/details/116403184
版权
本文介绍了Flexbox弹性布局的基本概念和关键属性，包括flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content等，帮助理解如何通过弹性布局实现响应式设计，以及各种对齐方式和换行策略。
摘要由CSDN通过智能技术生成

弹性布局Flexbox

弹性布局（flexible box）模块目的是提供一个更加有效的方式来布置对齐和分布在容器之间的各项内容，即便它们的大小是未知或者动态变化的。 弹性布局的主要思想是让容器有能力来改变项目的宽度和高度，以填满可用空间的能力。可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。

1.弹性布局Flexbox 基本概念

用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
在这里插入图片描述

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>弹性布局</title>
	<style type="text/css">
       .body{
       	display: flex;/*设置为弹性布局*/
       	width: 800px;
       	height: 800px;
       	border: 1px solid black;
       	overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/
       }
       .div{
       	width: 150px;
       	height: 150px;
       	background-color: #34cd45;
       	color:white;
       	text-align: center;
       	font-size: 100px;
       	margin: 10px;
       }
      </style>
</head>
<body class="body">
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
<div class="div">4</div>
</body>
</html>

效果如下
在这里插入图片描述

 	display: flex;/*设置为弹性布局*/

display: flex;设置为弹性布局，默认沿主轴排列。

2.弹性布局Flexbox 基本属性

1.flex-direction 属性
设置弹性容器内的项目的方向。（默认横向）
column 值设置垂直堆叠 flex 项目（从上到下）：

.body{
       	display: flex;/*设置为弹性布局*/
       	flex-direction: column;
       	/*column 值设置垂直堆叠 flex 项目（从上到下）：*/
       	width: 800px;
       	height: 800px;
       	border: 1px solid black;
       	overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/
       }

效果如下
在这里插入图片描述
column-reverse 值垂直堆叠 flex 项目（但从下到上）：

.body{
       	display: flex;/*设置为弹性布局*/
       flex-direction: column-reverse;/*column-reverse 值垂直堆叠 flex 项目（但从下到上）*/
       	width: 800px;
       	height: 800px;
       	border: 1px solid black;
       	overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/
       }

效果如下
在这里插入图片描述
row-reverse 值水平堆叠 flex 项目（但从右到左）：

.body{
       	display: flex;/*设置为弹性布局*/
        flex-direction: row-reverse;/*row-reverse 值水平堆叠 flex 项目（但从右到左）*/
       	width: 800px;
       	height: 800px;
       	border: 1px solid black;
       	overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/
       }

row 值水平堆叠 flex 项目（从左到右）<默认效果>：

.body{
       	display: flex;/*设置为弹性布局*/
        flex-direction: row;/*row 值水平堆叠 flex 项目（从左到右）<默认效果>*/
       	width: 800px;
       	height: 800px;
       	border: 1px solid black;
       	overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/
       }

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

2.flex-wrap 属性
以下是未加入flex-wrap 属性的代码和效果图

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>弹性布局</title>
	<style type="text/css">
       .body{
       	display: flex;/*设置为弹性布局*/
       	width: 800px;
       	height: 800px;
       	border: 1px solid black;
       	overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/
       }
       .div{
       	width: 150px;
       	height: 150px;
       	background-color: #34cd45;
       	color:white;
       	text-align: center;
       	font-size: 100px;
       	margin: 10px;
       }
	</style>
</head>
<body class="body">
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
<div class="div">4</div>
<div class="div">5</div>
<div class="div">7</div>
<div class="div">8</div>
<div class="div">9</div>
</body>
</html>

效果图
在这里插入图片描述
以下是加入flex-wrap 属性：
wrap 值规定 flex 项目将在必要时进行换行：

.body{
       	display: flex;/*设置为弹性布局*/
       /* flex-direction: row-reverse;column-reverse 值垂直堆叠 flex 项目（但从下到上）*/
        flex-wrap: wrap;
       	width: 800px;
       	height: 800px;
       	border: 1px solid black;
       	overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/
       }

如图
在这里插入图片描述
nowrap 值规定将不对 flex 项目换行（默认）：

.body{
       	display: flex;/*设置为弹性布局*/
       /* flex-direction: row-reverse;column-reverse 值垂直堆叠 flex 项目（但从下到上）*/
        flex-wrap: nowrap;
       	width: 800px;
       	height: 800px;
       	border: 1px solid black;
       	overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/
       }

如图
在这里插入图片描述
wrap-reverse 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序：

.body{
       	display: flex;/*设置为弹性布局*/
       /* flex-direction: row-reverse;column-reverse 值垂直堆叠 flex 项目（但从下到上）*/
        flex-wrap: wrap-reverse;
       	width: 800px;
       	height: 800px;
       	border: 1px solid black;
       	overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/
       }

如图
在这里插入图片描述

3.flex-flow 属性
flex-flow 属性是用于同时设置 flex-direction 和 flex-wrap 属性的简写属性。

 .body{
       	display: flex;/*设置为弹性布局*/
       /* flex-direction: row-reverse;column-reverse 值垂直堆叠 flex 项目（但从下到上）*/
       /* flex-wrap: wrap-reverse;*/
       flex-flow: row wrap;
       	width: 800px;
       	height: 800px;
       	border: 1px solid black;
       	overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/
       }

如图
在这里插入图片描述

4.justify-content 属性
justify-content属性定义了项目在主轴上的对齐方式。
justify-content 属性用于对齐 flex 项目

center 值将 flex 项目在容器的中心对齐：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>弹性布局</title>
	<style type="text/css">
       .body{
       	display: flex;/*设置为弹性布局*/
       /* flex-direction: row-reverse;column-reverse 值垂直堆叠 flex 项目（但从下到上）*/
       /* flex-wrap: wrap-reverse;*/
    /*   flex-flow: row wrap;*/
        justify-content: center;
       	width: 800px;
       	height: 800px;
       	border: 1px solid black;
       	overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/
       }
       .div{
       	width: 150px;
       	height: 150px;
       	background-color: #34cd45;
       	color:white;
       	text-align: center;
       	font-size: 100px;
       	margin: 10px;

       }

	</style>
</head>
<body class="body">
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
<!-- <div class="div">4</div>
<div class="div">5</div>
<div class="div">7</div>
<div class="div">8</div>
<div class="div">9</div> -->
</body>
</html>

如图在这里插入图片描述

flex-start 值将 flex 项目在容器的开头对齐（默认）
flex-end 值将 flex 项目在容器的末端对齐：

.body{
       	display: flex;/*设置为弹性布局*/
       /* flex-direction: row-reverse;column-reverse 值垂直堆叠 flex 项目（但从下到上）*/
       /* flex-wrap: wrap-reverse;*/
    /*   flex-flow: row wrap;*/
        justify-content: flex-end;
       	width: 800px;
       	height: 800px;
       	border: 1px solid black;
       	overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/
       }

如图
在这里插入图片描述
space-around 值显示行之前、之间和之后带有空格的 flex 项目（简单来说就是行内的每个flex项目前后平分这一行的空格）：

.body{
       	display: flex;/*设置为弹性布局*/
       /* flex-direction: row-reverse;column-reverse 值垂直堆叠 flex 项目（但从下到上）*/
       /* flex-wrap: wrap-reverse;*/
    /*   flex-flow: row wrap;*/
        justify-content: space-around;
       	width: 800px;
       	height: 800px;
       	border: 1px solid black;
       	overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/
       }

如图
在这里插入图片描述

space-between 值显示行之间有空格的 flex 项目：

.body{
       	display: flex;/*设置为弹性布局*/
       /* flex-direction: row-reverse;column-reverse 值垂直堆叠 flex 项目（但从下到上）*/
       /* flex-wrap: wrap-reverse;*/
    /*   flex-flow: row wrap;*/
        justify-content: space-between;
       	width: 800px;
       	height: 800px;
       	border: 1px solid black;
       	overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/
       }

如图
在这里插入图片描述

5.align-items 属性
align-items 属性用于垂直对齐 flex 项目。
center 值将 flex 项目在容器中间对齐（即垂直居中）：

.body{
       	display: flex;/*设置为弹性布局*/
       /* flex-direction: row-reverse;column-reverse 值垂直堆叠 flex 项目（但从下到上）*/
       /* flex-wrap: wrap-reverse;*/
    /*   flex-flow: row wrap;*/
        justify-content: space-between;
        align-items: center;
       	width: 800px;
       	height: 800px;
       	border: 1px solid black;
       	overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/
       }

如图
在这里插入图片描述
flex-start 值将 flex 项目在容器顶部对齐（左上角对齐）：

.body{
       	display: flex;/*设置为弹性布局*/
       /* flex-direction: row-reverse;column-reverse 值垂直堆叠 flex 项目（但从下到上）*/
       /* flex-wrap: wrap-reverse;*/
    /*   flex-flow: row wrap;*/
        justify-content: space-between;
        align-items: flex-start ;
       	width: 800px;
       	height: 800px;
       	border: 1px solid black;
       	overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/

flex-end 值将弹性项目在容器底部对齐（左下角对齐）：

.body{
       	display: flex;/*设置为弹性布局*/
       /* flex-direction: row-reverse;column-reverse 值垂直堆叠 flex 项目（但从下到上）*/
       /* flex-wrap: wrap-reverse;*/
    /*   flex-flow: row wrap;*/
        justify-content: space-between;
        align-items: flex-end ;
       	width: 800px;
       	height: 800px;
       	border: 1px solid black;
       	overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/

stretch 值拉伸 flex 项目以填充容器（默认）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>弹性布局</title>
	<style type="text/css">
       .body{
       	display: flex;/*设置为弹性布局*/
        align-items: stretch;
       /*	width: 800px;*/
       	height: 800px;
       	border: 1px solid black;
       	overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/
       }
       .div{
       	width: 150px;
      /* 	height: 150px;*/
       	background-color: #34cd45;
       	color:white;
       	text-align: center;
       	font-size: 100px;
       	margin: 10px;

       }

	</style>
</head>
<body class="body">
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
</body>
</html>

注意哦！
flex 项目的weight和height属性要缺一个哦，不然拉伸哦。
如图
在这里插入图片描述
baseline 值使 flex 项目基线对齐：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>弹性布局</title>
	<style type="text/css">
       .body{
       	display: flex;/*设置为弹性布局*/
       	width: 800px;
        align-items: baseline;
       	height: 800px;
       	border: 1px solid black;
       	overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/
       }
       .div{
       	width: 150px;
    	height: 150px;
       	background-color: #34cd45;
       	color:white;
       	text-align: center;
       	font-size: 100px;
       	margin: 10px;
       	font-size: 20px;//文本基线

       }

	</style>
</head>
<body class="body">
<div class="div"><h1>1</h1></div>
<div class="div"><h6>2</h6></div>
<div class="div">3</div>
</body>
</html>

注意哦！该例使用不同的 font-size 来演示项目已按文本基线对齐

文本基线

如图
在这里插入图片描述

6.align-content 属性
align-content 属性用于对齐弹性线。
不同的align-content 属性对比
stretch ：
默认值。元素被拉伸以适应容器。

各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于’flex-start’。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。

center ：
元素位于容器的中心。

各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。（如果剩下的空间是负数，则各行会向两个方向溢出的相等距离。）

flex-start ：
元素位于容器的开头。

各 行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行。

flex-end：
元素位于容器的结尾。

各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行。

space-between：
元素位于各行之间留有空白的容器内。

各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于’flex-start’。在其它情况下，第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等。

space-around ：
元素位于各行之前、之间、之后都留有空白的容器内。

各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于’center’。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。

7.完美的居中
将 justify-content 和 align-items 属性设置为居中，然后 flex 项目将完美居中：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>弹性布局</title>
	<style type="text/css">
       .body{
       	display: flex;/*设置为弹性布局*/
        justify-content: center;
        align-items: center;
       	width: 800px;
     
       	height: 800px;
       	border: 1px solid black;
       	overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/
       }
       .div{
       	width: 150px;
    	height: 150px;
       	background-color: #34cd45;
       	color:white;
       	text-align: center;
       	font-size: 100px;
       	margin: 10px;

       }

	</style>
</head>
<body class="body">
<div class="div"></div>
</body>
</html>

如图
在这里插入图片描述

8.用于弹性项目的属性有：
order
flex-grow
flex-shrink
flex-basis
flex
align-self

知̊魚̊
关注
弹性布局（上）
wuwei_19981001的博客
11-05 1165
弹性布局，弹性布局与浮动布局区别，弹性布局对子元素宽度的影响，父级元素宽度不变，水平布局，app的应用金刚区（导航部分）水平布局用的是justify-content: space-around;交叉轴布局（垂直布局）；拉伸情况注意的情况
弹性布局的简单设置实例
09-15
对弹性布局的简单设置以及实例,其中有主轴的设置, 以及属性值 对弹性布局的简单设置以及实例,其中有主轴的设置, 以及属性值 对弹性布局的简单设置以及实例,其中有主轴的设置, 以及属性值 对弹性布局的简单设置以及...
弹性布局
热门推荐
小瑾沐晚风的博客
10-01 2万+
1.弹性布局简介 弹性布局，又称为“flex布局”，是W3C于2009年推出的一种布局方式，可以简单、快速、响应式的实现各种布局页面，取而代之的是“position+display+float”，现在已经得到了所有主流浏览器的支持。 了解两个基本概念： ①  容器： 需要添加弹性布局的父元素； ②  项目： 弹性布局容器中的每一个子元素，称为项目；  了解两个基本方向： ①  主...
flex弹性布局(详解)
最新发布
msq6678的博客
07-21 4332
Flex弹性盒布局前言布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009 年，W3C 提出了一种新的方案—— Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。一、什么是Flex弹性布局？Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的。
弹性布局制作的简单百度网页
06-30
在创建“简单百度网页”的过程中，我们可以利用弹性布局实现响应式设计，确保网页在不同设备上都能良好展示。例如，我们可以设置一个`header`容器，包含搜索框和logo，通过调整`justify-content`和`align-items`使...
Java Swing SpringLayout弹性布局的实现代码
08-25
Java Swing SpringLayout 弹性布局的实现代码 Java Swing 是一个功能强大的 GUI 库，提供了多种布局管理器来组织组件的排列方式。其中，SpringLayout 是一种特殊的布局管理器，允许开发者以灵活的方式组织组件的...
10分钟理解CSS3 FlexBox弹性布局
09-22
CSS3中的FlexBox是一种强大的布局模型，它可以让开发者更简单高效地设计出具有弹性、适应不同屏幕尺寸的Web布局。在FlexBox模型中，所有的元素都位于一个flex container（弹性容器）内，该容器能够控制其子元素...
弹性布局-flex布局.zip
05-18
Flex布局，全称为“Flexible Box”或“弹性盒布局”，是CSS3中一种用于处理容器内元素布局的模型。它旨在提供一个更加灵活、响应式的布局方式，尤其适用于多设备环境，如手机、平板电脑等移动设备。在传统布局模式下...
快速掌握CSS3 FlexBox弹性布局
"这篇文章主要介绍了如何在10分钟内...CSS3 FlexBox弹性布局提供了强大的灵活性和控制力，使得创建响应式、动态布局变得更为简单。通过理解并熟练掌握这些核心概念和属性，开发者能够更高效地构建各种复杂的页面布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值