flex布局

最新推荐文章于 2022-11-25 21:18:09 发布
最新推荐文章于 2022-11-25 21:18:09 发布
阅读量269 收藏
点赞数 1
分类专栏： web前端知识 文章标签： flex css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ld16631069828/article/details/118854091
版权
本文详细介绍了Flex布局的基础概念、容器属性及项目属性。包括如何通过设置display属性为flex使父容器具备弹性布局特性，以及如何利用flex-direction、flex-wrap等属性控制子元素的排列方式和换行行为。
摘要由CSDN通过智能技术生成

flex布局

我们知道要想让块儿级元素按照从左到右的顺序排列，通常会设置元素的float，而设置float是会元素脱离文档流结构，从而改变父级元素的高度，并且还要考虑左右的清除浮动的影响。

针对块儿级元素的排列方式，所以我们引入了flex布局，flex布局是给父级容器设置display属性为flex,让父级容器具备flex属性，然后来控制容器中的子容器的排列顺序

flex布局分为容器属性和项目属性，容器属性指的是在父级容器中写入的css样式属性，项目属性则是给容器内部子容器的写的css样式属性。

容器属性
  • flex-direction : row(默认) | row-reverse | column | column-reverse

row表示的是将父容器中的子容器按行显示，也是display:flex的默认设置。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>flex布局</title>
		<style type="text/css">
			.container
			{
				width: 200px;
				height: 200px;
				background-color: #7FFFD4;
				display: flex;
				flex-direction: row;
			}
			.list
			{
				width: 50px;
				height: 50px;
				text-align: center;
				line-height: 50px;
			}
			.list:nth-child(1)
			{
				background-color: #0000FF;
			}
			.list:nth-child(2)
			{
				background-color: #A52A2A;
			}
			.list:nth-child(3)
			{
				background-color: #FAEBD7;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="list">1</div>
			<div class="list">2</div>
			<div class="list">3</div>
		</div>
	</body>
</html>

flex-direction:row
效果：
在这里插入图片描述

row-reverse:表示的是横向排列，但是顺序是倒序的，3-2-1

flex-direction:row-reverse
效果：
在这里插入图片描述

column:表示的是子项目按列的形式排列 1-2-3

flex-direction:column
效果：
在这里插入图片描述

column-reverse:表示的是按列排序，顺序倒序3-2-1

flex-direction:column-reverse
效果：
在这里插入图片描述

  • flex-wrap: nowrap | wrap | wrap-reverse

flex-wrap：用来控制项目列表是否换行，默认是nowrap不换行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>flex布局</title>
		<style type="text/css">
			.container {
				width: 200px;
				height: 200px;
				background-color: #7FFFD4;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
			}

			.list {
				width: 50px;
				height: 50px;
				text-align: center;
				line-height: 50px;
			}

			.list:nth-child(1) {
				background-color: #0000FF;
			}

			.list:nth-child(2) {
				background-color: #A52A2A;
			}

			.list:nth-child(3) {
				background-color: #FAEBD7;
			}

			.list:nth-child(4) {
				background-color: blueviolet;
			}

			.list:nth-child(5) {
				background-color: brown;
			}

			.list:nth-child(6) {
				background-color: cadetblue;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="list">1</div>
			<div class="list">2</div>
			<div class="list">3</div>
			<div class="list">4</div>
			<div class="list">5</div>
			<div class="list">6</div>
		</div>
	</body>
</html>

nowrap:不换行，列表会拍成一排，不换行

flex-wrap:nowrap
效果：
在这里插入图片描述

flex-wrap:wrap 表示换行，当列表拍成一排时超出父容器的宽度的其他元素另换一行。

flex-wrap:wrap
效果：
在这里插入图片描述

flex-wrap:wrap-reverse 第一行会布置在底部。

flex-wrap:wrap-reverse
效果：
在这里插入图片描述

  • flex-flow:是这个flex-direction和flex-wrap的结合简写方式，默认是 row nowrap.

flex-flow:row no-wrap 表示横向排列切不换行。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>flex布局</title>
		<style type="text/css">
			.container {
				width: 200px;
				height: 200px;
				background-color: #7FFFD4;
				display: flex;
			    flex-flow:row wrap;
			}

			.list {
				width: 50px;
				height: 50px;
				text-align: center;
				line-height: 50px;
			}

			.list:nth-child(1) {
				background-color: #0000FF;
			}

			.list:nth-child(2) {
				background-color: #A52A2A;
			}

			.list:nth-child(3) {
				background-color: #FAEBD7;
			}

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

flex-flow:row wrap这种写法同，flex-direction:row；flex-wrap:wrap;结合

效果
在这里插入图片描述

  • justify-content :flex-start | flex-end | center | space-between |space-around| space-evenly

用于控制项目在横轴的对齐方式，默认是flex-start为左对齐

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>flex布局</title>
		<style type="text/css">
			.container {
				width: 200px;
				height: 200px;
				background-color: #7FFFD4;
				display: flex;
				justify-content: flex-start;
			}

			.list {
				width: 50px;
				height: 50px;
				text-align: center;
				line-height: 50px;
			}

			.list:nth-child(1) {
				background-color: #0000FF;
			}

			.list:nth-child(2) {
				background-color: #A52A2A;
			}

			.list:nth-child(3) {
				background-color: #FAEBD7;
			}

			.list:nth-child(4) {
				background-color: blueviolet;
			}

			.list:nth-child(5) {
				background-color: brown;
			}

			.list:nth-child(6) {
				background-color: cadetblue;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="list">1</div>
			<div class="list">2</div>
			<div class="list">3</div>
			<div class="list">4</div>
			<div class="list">5</div>
			<div class="list">6</div>
		</div>
	</body>
</html>

justify-content:flex-start 左对齐

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

justify-content:flex-end 右对齐

在这里插入图片描述

justify-content:center表示居中显示

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

justify-content:space-between表示的是左右两端对齐，左右没有间隙，项目列表之间的距离相等

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

space-around是项目之间距离为左右两侧的两倍

justify-content:space-around;
在这里插入图片描述

justify-content:space-evently 项目与与项目以及项目于容器之间的间距相同。

justify-content:space-evently
效果：
在这里插入图片描述

  • align-items : flex-start | flex-end | center | baseline | stretch

用于控制项目在纵轴排列方式，默认是stretch，如果项目没有设置高度，或者高度为auto,则占满整个容器。下面的项目高度设置为auto

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>flex布局</title>
		<style type="text/css">
			.container {
				width: 200px;
				height: 200px;
				background-color: #7FFFD4;
				display: flex;
				align-items: stretch;
			}

			.list {
				width: 50px;
				height: 50px;
				text-align: center;
				line-height: 50px;
			}

			.list:nth-child(1) {
				background-color: #0000FF;
				height: auto;
			}

			.list:nth-child(2) {
				background-color: #A52A2A;
				height: auto;
			}

			.list:nth-child(3) {
				background-color: #FAEBD7;
				height: auto;
			}

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

align-items:stretch

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

align-items:flex-start 纵轴方向上是左对齐

在这里插入图片描述

align-items:flex-end是纵轴方向上是右对齐，则将在左下角排列

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

align-items;center表示在纵轴方向是居中显示.

在这里插入图片描述

align-items:basline按照列表项中的第一个文字为基准排列

在这里插入图片描述

  • align-content : flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认);

align-content用来控制多行项目，如果只有一行不会起作用。
效果与align-items类似。

项目属性

上面介绍完容器属性了，下面介绍的是项目属性，容器属性是加在容器中的，那项目属性就是加在项目列表中的.

1.order

取值：默认是0，用于决定项目排列顺序，数值越小，项目排列越靠前。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>flex布局</title>
		<style type="text/css">
			.container {
				width: 200px;
				height: 200px;
				background-color: #7FFFD4;
				display: flex;
				align-items:baseline;
			}

			.list {
				width: 50px;
				text-align: center;
				height: 50px;
				line-height: 50px;
			}

			.list:nth-child(1) {
				background-color: #0000FF;
				height: auto;
				order: 5;
			}

			.list:nth-child(2) {
				background-color: #A52A2A;
				order: 1;
			}

			.list:nth-child(3) {
				background-color: #FAEBD7;
				order: 2;
			}

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

分别给项目加上order属性并设置不同的值，第一个赋上5，第二个赋上1，第三个赋上2，那么按照越小越大排列顺序就是 2 - 3 - 1

在这里插入图片描述
2.flex-grow

取值：默认是0，用于决定项目剩余空间情况下是是否放大，默认是不放大，注意：即使设置了固定宽度，也不会放大。
分别给三个项目的flex-group设置0,1,2,看一下效果

在这里插入图片描述
3.flex-shrink

取值：默认1，用于决定项目在空间不足（父级容器太小时）时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小（flex-shrink:1）才会一起缩小；注意：即使设置了固定宽度，也会缩小。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>flex布局</title>
		<style type="text/css">
			.container {
				width: 50px;
				height: 50px;
				background-color: #7FFFD4;
				display: flex;
				align-items:baseline;
			}

			.list {
				width: 50px;
				text-align: center;
				height: 50px;
				line-height: 50px;
			}

			.list:nth-child(1) {
				background-color: #0000FF;
				height: auto;
				flex-shrink: 1;
			}

			.list:nth-child(2) {
				background-color: #A52A2A;
				flex-shrink: 1;
			
			}

			.list:nth-child(3) {
				background-color: #FAEBD7;
	
	             flex-shrink: 1;

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

上面我给父级容器设置的宽度为50px，项目列表的flex-shrink都是设置的是1，看一下效果：
在这里插入图片描述

如果其中改变其中一项flex-shrink的值就会发生另一种变化，设置为0不会根据父级元素的缩小发生变化。

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

  • flex-basis

取值：默认是auto,用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身宽度，但如果设置了flex-basis，权重会比width属性高，因此会覆盖width属性。

flex-basis:auto;
width:60px;

.list:nth-child(1) {
				background-color: #0000FF;
				flex-basis: auto;
				width: 60px;
				height: auto;
			}

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

如果设置成这样的形式：
flex-basis:80px;
width:60px；
由于flex-basis要比width的权重高会使用flex-basis的宽度

.list:nth-child(1) {
				background-color: #0000FF;
				flex-basis: 80px;
				width: 60px;
				height: auto;
			}

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

  • flex

取值：默认0 1 auto 是flex-grow ,flex-shrink 与 flex-basis的三个简写，用于项目放大，缩小，与宽度。
该属性有两个快捷值，分别是auto (1 1 auto) 等分放大缩小，与none(0,0，auto)不放大不缩小。

-align-self

取值：auto(默认) | flex-start | flex-end | center | baseline | stretch，表示继承父容器的align-items属性。如果没父元素，则默认stretch。

枫叶在飘呀
关注
专栏目录
携程在线网页制作（flex布局）
qq_49333212的博客
04-01 1404
携程在线网页制作（flex布局） 1.技术选型 方案：单独制作移动端页面 技术：flex布局 2.搭建相关文件夹结构 css images（背景图、精灵图等） upload（产品图） index.html 3.引入 引入视口标签和相关样式 文件夹搭建 html代码完整版 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="
CSS - Flex布局
技术共享，共同进步！
10-24 1146
CSS - Flex布局
移动端 自适应、等比布局（box-flex）
hugejihu9的专栏
10-19 203
文章来自：源码在线https://www.shengli.me/css/83.html 一、具体代码：   html文件 二、效果展示：   平板：       大手机屏幕     小手机屏幕     用box-sizing:border-box和    这样的布局不会遇到百分比的溢出，全贴合边框等问题。        ...
css_flex弹性盒模型/flex布局/flex在线可视化工具
xuchaoxin1375的博客
01-06 2949
文章目录contents:flex 模型说明flex在线可视化工具(visual guide to css3 flexbox)flex-wrap contents: 为什么是 弹性盒子? 一个简单的例子 指定元素的布局为 flexible flex 模型说明 列还是行? 换行 flex-flow 缩写 flex 项的动态尺寸 flex: 缩写与全写 水平和垂直对齐 flex 项排序 flex 嵌套 跨浏览器兼容性 测试你的技能 总结 flex 模型说明 flex 模型说明 当元素表现为 flex 框时
Flex布局
03-29
Flex布局，全称为Flexible Box，是W3C在2009年提出的一种新的网页布局方案，旨在解决传统CSS布局模式在处理复杂和动态内容时的局限性。它特别适用于移动设备上的H5页面和微信小程序等场景，能轻松实现各种复杂的页面...
flex布局实现上下固定中间滑动的布局方式
11-20
【标题】：“flex布局实现上下固定中间滑动的布局方式” 【内容详解】 在现代网页设计中，使用Flex布局能够方便地实现各种复杂的界面布局，其中包括一种常见的需求：上下固定，中间可滑动的布局。这种布局适用于...
详解CSS3伸缩布局盒模型Flex布局
09-22
Flex布局，全称为Flexible Box布局，是CSS3中引入的一种全新的布局模式，旨在解决复杂的网页布局问题，特别是在处理响应式设计和动态内容时。Flex布局允许开发者更灵活地控制元素的大小、位置和顺序，即使元素尺寸...
Flex布局让子项保持自身高度的实现
01-19
在用了Flex布局会发现，当水平排列后，会发现所有子项的高度都变成一样的了。   这是因为Flex 布局会默认： 把所有子项变成水平排列。 默认不自动换行。 让子项与其内容等宽，并把所有子项的高度变为最高子项的...
微信小程序+Flex布局示例源代码
05-06
在这个"微信小程序+Flex布局示例源代码"中，我们将深入探讨Flex布局在微信小程序中的应用。 Flex布局，全称为Flexible Box布局，是CSS3中的一种新的布局模式，旨在解决传统盒模型在处理复杂或响应式布局时的困难。...
flex布局项目——携程在线首页（原生轮播图效果）.zip
04-16
携程在线首页。适合零基础入门的人使用的demo，对布局这块有不错的参考价值！采用的是flex布局使用了原生js实现的tab栏切换等。自己可以通过swiper插件或者TouchSlide插件以及bootstrap框架来替换！可以把这个demo进行更改。
携程在线网页制作（flex布局）（静态页面）
woshi6yi的博客
03-07 1738
对于flex布局的复习
flex布局演示(可线上运行项目)
苦涩精灵的博客
12-22 1064
flex布局演示（项目可线上运行项目） 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale
html移动端flex布局插logo,移动端 css/html (box-flex)自适应、等比布局
weixin_36102776的博客
06-15 322
移动端 css/html (box-flex)自适应、等比布局对于移动端自适应的一种布局方式。.boxcontainer{display: box;display: -moz-box;display: -webkit-box;border: 1px solid red;height: 32px;min-width: 100px;}.boxcontainer>div{box-flex: 1;-...
【flex布局之右对齐】
weixin_43932597的博客
06-04 7276
flex布局之右对齐
flex右对齐_Flex学习
weixin_39550379的博客
11-30 554
1. 容器属性1.1 filex-direction：设置主轴的方向row 默认是水平 row-reverse 水平，从右到左排列 column 垂直 column-reverse 垂直，从下到上排列1.2 flex-wrap: 设置子项目在轴线上如何换行nowrap 不换行，默认 wrap 换行 wrap-reverse 换行，倒着换行，从下往上换1.3 flex-flow：是flex...
flex布局详解
最新发布
end12356789的博客
11-25 336
flex布局详解
使用flex快速布局网页
m0_62877814的博客
10-07 611
flex的便捷之处
Flex布局详解
热门推荐
weixin_44165764的博客
05-13 8万+
传统的布局 基于盒模型 依赖于display属性 + position属性 + float属性 ，但是特殊布局就有些捉襟见肘了，垂直居中 就不容易实现了 一、Flex布局是什么？ flex是Flexible Box的缩写，意为弹性布局，用来为盒模型提供最大的灵活性 //任何一个容器都可以指定为Flex布局 .box{ display:flex; } //行内元素也可以使用Flex布局 .box{ display:inlone-flex; } //Webkit内核的浏览器，必...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值