css-flex布局

最新推荐文章于 2025-11-14 18:36:51 发布
原创 最新推荐文章于 2025-11-14 18:36:51 发布 · 1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入讲解Flex布局的核心概念，包括主轴与交叉轴控制、排列方向、空间占比调整及元素缩放，同时介绍如何实现元素的对齐、折行与嵌套容器的兼容处理。

div竖排 display:flex

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<div class="flex">
			<div class="flex1">Flex1</div>
			<div class="flex2">Flex2</div>
			<div class="flex3">Flex3</div>
		</div>

		<style type="text/css">
			.flex {
				display: flex;
				height: 100px;
				background-color: aliceblue;
			}

			.flex1 {
				background-color: limegreen;
			}

			.flex2 {
				background-color: greenyellow;
			}

			.flex3 {
				background-color: khaki;
			}
		</style>
	</head>
	<body>
	</body>
</html>

对齐方式： x轴对齐

  1. 所有内容居中对齐： justify-content：center

在这里插入图片描述

.flex {
				justify-content: center;
				display: flex;
				height: 100px;
				background-color: aliceblue;
			}
  1. 所有内容居右： justify-content: flex-end

在这里插入图片描述

.flex {
				justify-content: flex-end;
				display: flex;
				height: 100px;
				background-color: aliceblue;
			}
  1. 两端分散对齐： space-between

在这里插入图片描述

.flex {
				justify-content: space-between;
				display: flex;
				height: 100px;
				background-color: aliceblue;
			}
  1. 平分空间：space-evenly

在这里插入图片描述

.flex {
				justify-content: space-evenly;
				display: flex;
				height: 100px;
				background-color: aliceblue;
			}
  1. 平分空间： space-around (优先两边)
.flex {
				justify-content: space-around;
				display: flex;
				height: 100px;
				background-color: aliceblue;
			}

对齐方式：y轴对齐

  1. 默认stretch 与justify-content:flex-start 或者不添加一致

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<div class="flex">
			<div class="flex1">Flex1</div>
			<div class="flex2">Flex2</div>
			<div class="flex3">Flex3</div>
		</div>

		<style type="text/css">
			.flex {
				align-items: stretch;
				display: flex;
				height: 100px;
				background-color: aliceblue;
			}

			.flex1 {
				background-color: limegreen;
			}

			.flex2 {
				background-color: greenyellow;
			}

			.flex3 {
				background-color: khaki;
			}
		</style>
	</head>
	<body>
	</body>
</html>
  1. 左上角对齐，不占满： align-items: flex-start;

在这里插入图片描述

.flex {
				align-items: flex-start;
				display: flex;
				height: 100px;
				background-color: aliceblue;
			}
  1. 靠左居中： align-items: center;

在这里插入图片描述

  1. 靠左居下：align-items: flex-end;

在这里插入图片描述

  1. 基线对齐：解决鼠标经过后变大但是左右位置不变大：align-items: baseline;

在这里插入图片描述

.flex2 {
				font-size: 24px;
				background-color: greenyellow;
			}
  1. 比如使用 align-items: flex-start;

在这里插入图片描述

  1. 使用 align-items: flex-end;

在这里插入图片描述

子元素交叉对齐： align-self

  1. 前面元素考上对齐，最后一个靠下对齐：

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<div class="flex">
			<div class="flex1">Flex1</div>
			<div class="flex2">Flex2</div>
			<div class="flex3">Flex3</div>
		</div>

		<style type="text/css">
			.flex {
				align-items: flex-start;
				display: flex;
				height: 100px;
				background-color: aliceblue;
			}

			.flex1 {
				background-color: limegreen;
			}

			.flex2 {
				/* font-size: 24px; */
				background-color: greenyellow;
			}

			.flex3 {
				background-color: khaki;
				align-self: flex-end;
			}
		</style>
	</head>
	<body>
	</body>
</html>
  1. 前面元素按照左对齐，最后一个右对齐：

在这里插入图片描述
去掉align-self, 使用margin

.flex3 {
				background-color: khaki;
				/* align-self: flex-end; */
				margin-left: auto;
			}

排列方式：

  1. 主轴和交叉轴一起使用，然后添加：flex-direction: column;

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<div class="flex">
			<div class="flex1">Flex1</div>
			<div class="flex2">Flex2</div>
			<div class="flex3">Flex3</div>
		</div>

		<style type="text/css">
			.flex {
				justify-content: space-between;
				align-items: flex-start;
				flex-direction: column;
				display: flex;
				height: 100px;
				background-color: aliceblue;
			}

			.flex1 {
				background-color: limegreen;
			}

			.flex2 {
				background-color: greenyellow;
			}

			.flex3 {
				background-color: khaki;
			}
		</style>
	</head>
	<body>
	</body>
</html>
  1. 水平居中对齐

在这里插入图片描述

.flex {
			    justify-content: space-between;   // 去掉后则居中吸顶居中
				align-items: center;
				flex-direction: column;
				display: flex;
				height: 100px;
				background-color: aliceblue;
			}
  1. 垂直居中对齐：

在这里插入图片描述

	.flex {
				justify-content: center;
				align-items: center; // 注释后将变为以下图片
				flex-direction: column;
				display: flex;
				height: 100px;
				background-color: aliceblue;
			}

在这里插入图片描述

  1. 方向靠右：

在这里插入图片描述

.flex {
				/* justify-content: center; */
				/* align-items: center; */
				flex-direction: row-reverse;
				display: flex;
				height: 100px;
				background-color: aliceblue;
			}

开启两个注释后结果：

在这里插入图片描述

  1. 倒叙排列：

在这里插入图片描述

.flex {
				justify-content: center;
				align-items: center;
				flex-direction: column-reverse;
				display: flex;
				height: 100px;
				background-color: aliceblue;
			}

空间占比： 左右1，中间2

在这里插入图片描述

	.flex .flex3{
				flex:1
			}
			.flex2{
				flex:2
			}

flex basis: 主轴尺寸

  1. 每个div宽度一致：

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<div class="flex">
			<div class="flex1">Flex1</div>
			<div class="flex2">Flex2</div>
			<div class="flex3">Flex3</div>
		</div>

		<style type="text/css">
			
			.flex >* {
				flex-basis: 200px;
			}
			
			.flex {
				display: flex;
				height: 100px;
				background-color: aliceblue;
			}

			.flex1 {
				background-color: limegreen;
			}

			.flex2 {
				background-color: greenyellow;
			}

			.flex3 {
				background-color: khaki;
			}
		</style>
	</head>
	<body>
	</body>
</html>

这个时候添加width不在管用，优先级高于width,默认是auto，这个时候我们可以使用min-width来设置

.flex > * {
  flex-basis: 200px;
  min-width: 250px;
}

在这里插入图片描述

高度依旧如此：

在这里插入图片描述

            .flex >* {
				flex-basis: 30px;

			}
			
			.flex {
				flex-direction: column;
				display: flex;
				height: 100px;
				background-color: aliceblue;
			}

缩放：flex-grow

设置两边自动大小，中间auto:

在这里插入图片描述

<style type="text/css">
			
			.flex {
				flex-basis: auto;
				display: flex;
				height: 100px;
				background-color: aliceblue;
			}

			.flex1 {
				background-color: limegreen;
				/* flex-grow: 1; */
			}

			.flex2 {
				flex-grow: 1;
				background-color: greenyellow;
			}

			.flex3 {
				/* flex-grow: 1; */
				background-color: khaki;
			}
		</style>

将1和3的注释起开后：三者各占据1/3

在这里插入图片描述

收缩限制：flex-shrink

flex2随着flex-basis的变大，他的收缩也会变大，因为是flex-shrink = 2

在这里插入图片描述


	.flex1 ,.flex3 {
				flex-basis: 600px;
				flex-shrink: 1;
			}
			.flex2 {
				flex-basis: 600px;
				flex-shrink: 2;
			}
// 添加上面一个演示代码即可

flex属性：

  • 默认值：0 1 auto, 不增长但收缩，收缩比例：1，flex-basis为auto: 取用户自定义宽度或内容宽度。

  • flex值如下：

  • flex: 1 等同：flex:1 1 0,即自动缩放比例1，flex-basis为0.

  • auto 等同 flex: 1 1 auto

  • 指定两个数字： 第一个为flex-grow, 第二个若是数字则为： flex-shrink, 如果是宽度则为flex-basis.

  • 指定三个值分别为：flex-grow, flex-shrink ，flex-basis

折行

如果元素有固定宽度，且超过容器宽度，若不可以收缩可以使用flex-wrap让其折行，使得每个元素都不超过容器的高度，但无法使用grid的单独控制行、列占比，亦不能自由定位元素到特定的位置

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<div class="flex">
			<div class="flex1">Flex1</div>
			<div class="flex2">Flex2</div>
			<div class="flex3">Flex3</div>
			<div class="flex4">Flex4</div>
			<div class="flex5">Flex5</div>

		</div>

		<style type="text/css">
			.flex {
				height: 100px;
				display: flex;
				flex-wrap: wrap;
			}
			.flex>* {
				flex-shrink: 0;
				flex-basis: 300px;

			}
			.flex1 {
				background-color: limegreen;
			}

			.flex2 {
				background-color: greenyellow;
			}

			.flex3 {
				background-color: khaki;
			}

			.flex4 {
				background-color: blueviolet;
			}

			.flex5 {
				background-color: cyan;
			}
		</style>
	</head>
	<body>
	</body>
</html>

这里我们依旧可以添加align-content 与justify-content 来控制主轴与交叉轴位置（两者属性基本一致）

比如我们设置中间空格：

在这里插入图片描述

其他属性align-content依旧 可以使用

.flex {
				align-content: space-between;
				justify-content: ;
				height: 100px;
				display: flex;
				flex-wrap: wrap;
			}

嵌套flex容器兼容问题

在以上代码基础上flex4中增加p标签出现以下问题

<div class="flex4">Flex4
				<p>这是个很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长文本</p>
</div>

在这里插入图片描述

解决办法：
原因是min-widht：auto, 在flex4中添加min-widht：0

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<div class="flex">
			<div class="flex1">Flex1</div>
			<div class="flex2">Flex2</div>
			<div class="flex3">Flex3</div>
			<div class="flex4">Flex4
				<p>这是个很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长文本</p>
			</div>
			<div class="flex5">Flex5</div>

		</div>

		<style type="text/css">
			.flex {
				align-content: space-between;
				justify-content: ;
				height: 100px;
				display: flex;
				flex-wrap: wrap;
			}
			.flex>* {
				flex: 1;
			}
			.flex1 {
				background-color: limegreen;
			}

			.flex2 {
				background-color: greenyellow;
			}

			.flex3 {
				background-color: khaki;
			}

			.flex4 {
				display: flex;
				flex: 1;
				min-width: 0;
				background-color: blueviolet;
			}
			.flex4 > p{
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.flex5 {
				background-color: cyan;
			}
		</style>
	</head>
	<body>
	</body>
</html>

总结

  • 开启flex布局使用display: flex属性
  • flex有主轴和交叉轴，分别使用justify-content和align-items控制
  • 支持按行和列进行排列，使用flex-direction，另支持row-reverse和column-reverse反向排列
  • flex属性：flex-grow、flex-shrink、flex-basis调整空间占比和缩放
  • flex-wrap设置折行
前端学习（271）：网格布局grid-template
歌谣的博客
12-31 561
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...
1.7 css-flex布局
chenjiajiak的博客
05-23 846
（块级元素的flex-container）
CSS弹性布局
m0_73829856的博客
07-22 1266
【代码】CSS弹性布局。
如何设计好盒子的嵌套结构：打造清晰高效的前端布局体系
最新发布
2401_85080888的博客
11-14 951
盒子嵌套的第一步，是用语义化HTML标签明确每个盒子的角色，这不仅让代码更易读，也能提升SEO和可访问性。原则具体要求语义优先用正确的HTML标签定义盒子角色，提升可读性与可访问性布局清晰结合Flex、Grid和定位规则，分层设计布局结构，实现灵活响应样式可控用BEM、扁平选择器规范样式，利用继承减少冗余，避免样式冲突性能优化保持嵌套层级扁平，避免无意义冗余，提升渲染效率掌握这些原则，你就能在复杂的前端布局中，设计出语义清晰、维护简单、性能优异。
一篇文章理解CSS垂直布局方法
superherooooss的博客
10-31 1086
在 2024 年的 CSS 原生属性中允许使用进行垂直居中。
CSS---flex布局
是吃货不是贝爷的博客
09-04 2123
主要记录flex布局的要点以及实例。
css——flex弹性布局之竖向布局和横向布局
热门推荐
qq_42683219的博客
02-15 2万+
竖向布局 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; } ...
css3-flex布局图解
01-03
CSS3 Flex布局是一种全新的布局方式，主要为了解决传统布局方法在不同设备上的适应性问题。Flex布局允许容器内的项目能够更好地排列和对齐，而不需要关心项目的大小和顺序。它提供了一种更加有效的方式来布局、对齐...
CSS -- flex布局【超详教程】
qq_48802092的博客
07-27 1038
flex布局可以简便、完整、响应式地实现各种页面布局，任何一个容器都可以指定为Flex布局。
CSS- flex布局原理及其案例
zzxhahaha的博客
01-15 600
提示：简单的学习掌握FLEX布局** 文章目录前言一、flex设置主轴方向1：说明：2：代码3:实例展示二、主轴排序方式1：说明2.代码3. 实例展示三，换行1：说明2:代码3:实例展示四, 侧轴排序方式1:说明2：代码3:结果五：份数1：说明2：代码3 案例展示 前言 Flex布局原理就是： 给父盒子添加flex属性， 来控制子盒子的位置排 列方式从而实现flex布局 当我们为父盒子设为 flex 布局以后， 子元素的 float、 clear 和 vertical-align 属性将失效。
CSS的flex布局.ppt
06-12
网页布局（layout）是CSS的一个重点应用。... 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
flex布局
lv_suri的博客
07-13 2247
Flex布局弹性盒子布局基本概念：首先将元素设置为display:flex; 元素会变为一个flex容器容器内部的元素为flex元素或者叫flex项目（flex-item）之前学过：Display:none 设置元素隐藏Display：block；可以转换成块元素Display：inline; 设置成行内元素Main axis:主轴Cross axis：交叉轴默认：Flex项目在flex容器中延主轴排列Flex项目高度适应flex容器高度（同行内元素）设置flex容器：Flex-direction: 设
css之Flex布局（一）
CruellyJohn的博客
08-09 793
flexBox布局 使用flexBox布局前需要给容器添加样式display:flex; ... &amp;amp;amp;lt;style&amp;amp;amp;gt; .contain{ display:flex; } &amp;amp;amp;lt;/style&amp;amp;amp;gt; &amp;amp;amp;lt;div class=&amp;amp;quot;contain&amp;amp;
弹性布局 flex
青蛙king的博客
09-11 2215
目录 一、Flex布局是什么？ 二、基本概念 三、容器的属性 1、flex-direction 2、flex-wrap 3、flex-flow 4、justify-content 5、align-items 6、align-content 四、项目的属性 1、order ​2、flex-grow ​3、flex-shrink 4、flex-basis 5、fle...
Flex流布局方案-flex竖向流布局
Leon4055的博客
10-31 768
【代码】Flex流布局方案-flex竖向流布局。
Flex布局
qq_71906769的博客
04-12 1173
align-contents：space-between第一行元素都会分布在垂直方向最开始的位置，最后一行元素都会分布在垂直方向结束的位置。但是space-between的第一个元素和最后一个元素靠在容器的开始和最右边位置，然后在均匀分配空间到其他小盒子的左右边距上。align-contents: flex-start，所有元素都会分布在垂直方向最开始的位置。align-contents: flex-end，所有元素都会分布在垂直方向结束的位置。flex的排版方向分为水平方向和垂直方向。
display:flex; 布局
weixin_34252686的博客
07-26 463
给父元素添加 display:flex; display:-webkit-flex; flex-direction: row | row-reverse | column | column-reverse; 属性决定主轴的方向（即项目的排列方向） row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在...
CSS-Flex布局技术深入解析与实践
CSS Flex布局，全称为Flexible Box Layout，是一种用于在不同屏幕尺寸和不同显示设备上提供一致的空间分布和对齐方式的布局模型。它是CSS3的一部分，旨在提供一种更加有效的方式来布置、对齐和分配容器内项目之间的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值