常用布局之CSS3弹性盒子flex布局

最新推荐文章于 2024-05-20 22:08:52 发布
最新推荐文章于 2024-05-20 22:08:52 发布
阅读量1k 收藏 4
点赞数 2
分类专栏： 弹性盒子 flex布局 文章标签： css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52262025/article/details/120472810
版权

一. 什么是弹性盒子布局

CSS3 弹性盒（ Flexible Box 或 flexbox），为了让元素适配不同的屏幕大小或者说页面的大小以及设备类型时确保元素拥有恰当的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 容器通过设置 display：flex 或 inline-flex将其定义为弹性容器，默认弹性容器只有一行。

二.基本样式布局

代码段

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			.flex-container {
				display: flex;
				background-color: gainsboro;
				height: 300px;
				width: 300px;
                /* 默认属性，设置主轴的方向 */
				flex-direction: row;

				/* 默认属性，设置子元素主轴上的排列样式 */
				justify-content: flex-start;

				/* 默认属性，设置侧轴上的排列样式 */
				align-items: flex-start;

				/* 默认属性,指定弹性盒子的子元素换行方式 */
				flex-wrap: nowrap;
				
                /*align-content: flex-start ;用于修改 flex-wrap 属性的行为，当子元素不局                        
                 限于一行排列时,用yu==于控制行之间的对齐方式*/
				
			}

			.flex-item {
				width: 50px;
				height: 50px;
			}

			.one {
				background-color: royalblue;
			}

			.two {
				background-color: yellow;
			}

			.three {
				background-color: #FF266E;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div class="flex-item one">
				item1
			</div>
			<div class="flex-item two">
				item2
			</div>
			<div class="flex-item three">
				item3
			</div>
		</div>
	</body>
</html>

效果图

 

 

 

三.常用属性

父容器属性：flex-direction 

设置父容器的主轴方向。当设置主轴方向的同时也会改变侧轴的方向，主轴和侧轴都是从同一原点发射方向，在确认主轴方向的同时就可以确认侧轴方向

语法：

flex-direction: row | row-reverse | column | column-reverse

 

flex-direction: row-reverse;
flex-direction: column;
flex-direction: row;

 

 

 

flex-direction: column-reverse;

 

 

 

 

 

 

 

 

 

 父容器属性：justify-content

 设置子元素在父容器中主轴方向中的的排列样式

 语法：

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

 

justify-content: flex-start;
justify-content: flex-end;
justify-content: center;

 

 

 

 

justify-content: space-around；
 
justify-content: space-evenly;
justify-content: space-between;
 

 

 

父容器属性：align-items:

设置子元素在父容器中侧轴方向中的的排列样式

 语法：

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

align-items: flex-start;
align-items: center;
align-items: flex-end;
 

 

 

 

父容器属性：flex-wrap: 

设置弹性盒子的子元素换行方式，默认不换行

 语法：

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

 

各个值解析:

  • nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
  • wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
  • wrap-reverse -反转 wrap 排列

为了掩饰效果，现在我们往父容器内增加至七个子元素

flex-wrap: nowrap;
flex-wrap: wrap-reverse;
flex-wrap: wrap;
​​

 

父容器属性：align-content: 

align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行在侧轴上的的排列方式。

 语法：

align-content: flex-start | flex-end | center | space-between | space-around |space-evenly  | stretch

各个值解析:

  • stretch - 默认。各行将会伸展以占用剩余的空间。
  • flex-start - 各行向弹性盒容器的起始位置堆叠。
  • flex-end - 各行向弹性盒容器的结束位置堆叠。
  • center -各行向弹性盒容器的中间位置堆叠。
  • space-between -各行在弹性盒容器中平均分布。
  • space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

 

 

align-content: stretch ;
align-content: flex-end ;
align-content: flex-start ;​​​

 

 

 

 

align-content: center ;
align-content: space-around ;
align-content: space-between ;

 

 

 

align-content:  space-evenly ;

 

 

弹性子元素属性:order

根据子元素属性order值的大小一次排序子元素

语法

order:<integer>
  • <integer>：用整数值来定义排列顺序，数值小的排在前面。可以为负值。
代码段
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			.flex-container {
				margin: 100px;
				display: flex;
				background-color: gainsboro;
				height: 300px;
				width: 300px;
			}

			.flex-item {
				width: 50px;
				height: 50px;
			}

			.one {
				background-color: royalblue;
				order:3;
			}

			.two {
				background-color: yellow;
				order: 2;
			}

			.three {
				order: 1;
				background-color: #FF266E;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div class="flex-item one">
				item1
			</div>
			<div class="flex-item two">
				item2
			</div>
			<div class="flex-item three">
				item3
			</div>
		 
		</div>
	</body>
</html>

效果图

 

 

 

弹性子元素属性:align-self

align-self 属性用于设置弹性元素自身在侧轴方向上的对齐方式。

语法

align-self: auto | flex-start | flex-end | center | baseline | stretch

 

 代码段

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
.flex-container {
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100;
    height: 100px;
    margin: 10px;
}

.item1 {
    align-self: flex-start;
}
.item2 {
    align-self: flex-end;
}

.item3 {
    align-self: center;
}

.item4 {
    align-self: baseline;
}

.item5 {
    align-self: stretch;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item item1">flex-start</div>
  <div class="flex-item item2">flex-end</div>
  <div class="flex-item item3">center</div>
  <div class="flex-item item4">baseline</div>
  <div class="flex-item item5">stretch</div>
</div>

</body>
</html>

 

 效果图

 

 

弹性子元素属性:flex

flex 属性用于指定弹性子元素如何分配空间。

语法

flex: auto | initial | none | inherit |  [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

 

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			.flex-container {
				display: flex;
				background-color: gainsboro;
				height: 300px;
				width: 300px;
			}

			.flex-item {
				width: 50px;
				height: 50px;
			}

			.one {
				 flex: 1;
				background-color: royalblue;
				 
			}

			.two {
				background-color: yellow;
				 
			 flex: 2;
			}

			.three {
				background-color: #FF266E;
				flex: 3;
			 
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div class="flex-item one">
				item1
			</div>
			<div class="flex-item two">
				item2
			</div>
			<div class="flex-item three">
				item3
			</div>
		</div>
	</body>
</html>

 

 

 效果图（通过设置flex值的大小来设置弹性盒子的子元素如何分配空间。）

 

弹性子元素属性:flex-shrink

用于指定弹性子元素是否等比缩放

我们设置父容器的宽度为300px,第一个子元素设置宽度100px,第二个子元素设置300px,让我们看看会是什么样子的效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			.flex-container {
				display: flex;
				background-color: gainsboro;
				height: 300px;
				width: 300px;
			}
			.one {
                width: 100px;
				height: 50px;
				background-color: royalblue;
			}
			.two {
				width: 300px;
				height: 50px;
				background-color: yellow;
			}

			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div class="flex-item one">
				item1
			</div>
			<div class="flex-item two">
				item2
			</div>
			 
		</div>
	</body>
</html>

效果图

 现在我们为子元素增加 flex-shrink: 0;属性我们会发现效果变了

代码段

.one {
                width: 100px;
				height: 50px;
				background-color: royalblue;
				flex-shrink: 0;
			}
			.two {
				width: 300px;
				height: 50px;
				background-color: yellow;
				flex-shrink: 0;
			}

 效果图

 

 事实证明，子元素设置flex-shrink: 0;则会让子元素展现出原始的大小，当设置为1时则会进行等比缩放

我只是个菜鸡，如有发现不对的地方勿喷，请多多指教。如有侵权请联系本人，必删帖。

小菜鸡的日志
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
css3弹性盒子flex实现三栏布局的实现
01-22
弹性盒子本身就是并排的，我们设置宽度即可。 用一个容器container包裹三栏，设置comtainer容器的display属性为flex，左右栏设置宽度为300px，中间栏设置flex:1，这里的1表示宽度比例，具体数值取决于其它盒子的flex...
CSS3弹性盒子flex布局
打代码是一天，不打代码也是一天
04-27 1435
弹性盒子flex布局，弹性盒子，盒子模型
CSS之弹性盒子模型（Flex布局）
fcc627的博客
04-26 2078
文章目录一、Flex布局是什么？二、基本概念三、容器的属性3.1 flex-direction属性3.2 justify-content属性3.3 flex-wrap属性3.4 align-items属性3.5 align-content属性3.6 flex-flow属性四、项目的属性4.1 flex属性4.2 align-self属性4.3 order属性五、相关案例5.1 案例1：flex设置主轴上的子元素排列方式5.2 案例2：flex-wrap子元素是否换行5.3 案例3：flex子项和flex份数
CSS:弹性盒子Flexible Box布局
LiuCJ_20000的博客
02-28 638
​ flex是flexible Box的缩写,意为 ”弹性布局“，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。当我们的父盒子设置为flex布局之后，子元素的 float 、clear 和 vertical-align 属性将会失效。伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局​ **flex布局原理：**通过给父盒子添加 flex 属性，来控制子盒子的位置和排列方式。
CSS弹性盒子布局flex
weixin_42884292的博客
10-17 2986
flex布局： flex布局是继标准流布局、浮动布局、定位布局后的第四种布局方式。这种方式可以非常优雅的实现子元素居中或均匀分布，甚至可以随着窗口缩放自动适应。flex布局在浏览器中存在一定的兼容性（具体参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_box...
css弹性盒子（flex）管理系统布局
11-20
因为经常做后台管理系统，时不时都要去下一些框架，然而有时候仅仅只是需要一个页面框架布局，却需要引入一大堆文件，于是，自己用css弹性盒子（flex）简单做了一个管理系统布局，代码简单，下载即用。不是说人家...
CSS3 Flex 弹性布局实例代码详解
01-19
//任何一个容器都可以指定为Flex布局。 .box{ display: flex; } //行内元素也可以使用Flex布局。 .box{ display: inline-flex; } //注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将...
css flex 弹性布局详解
09-24
主要介绍了css flex 弹性布局详解的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS弹性盒模型flex在布局中的应用详解
01-19
前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法，本文将介绍flex在布局中的应用 元素居中【1】伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items JavaScript Code复制内容到剪贴板 <style&...
CSS3 新特性
niceffking的博客
05-14 712
CSS3新增选择器 　 属性选择器 　 结构选择器 　 伪元素选择器 盒子模型 图片模糊 calc函数 过渡
Web开发——HTML&CSS
最新发布
一切皆是定数的博客
05-20 160
HTML：HyperText Markup Language，超文本标记语言超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。标记语言：由标签构成的语言，HTML标签都是预定义好的。HTML代码直接在浏览器中运行，HTML标签由浏览器解析。CSS：Cascading Style Sheet，层叠样式表，用于控制页面的样式（表现）。以下就是html代码以及css样式搭配之后的显示效果。
css: 动态设置网格线
1111111111
05-14 345
唯一的遗憾是，宽度和高度本来想设置为数字类型，通过input-number输入，然后在css里拼上‘px’，像下面这种写法，会报错，所以只能把px单位放在输入框里。上面的html和下面的css不在同一个vue文件里，虽然变量名不同，一个是formData，一个是designData，所指向的对象是相同的。注意：style里不要写lang="scss" 不然会一直报错。另外还有一个小小的问题，页面缩放的时候，网格线会消失。把网格颜色，宽高和透明度做成可配置项。
CSS常用滤镜效果
不负光阴不负自己，不负被爱不负所爱 ​
05-13 351
CSS 提供了多种滤镜效果，可以通过filter属性应用于 HTML 元素。将图像转换为灰度图像。给图像应用色相旋转。值以度为单位。增加或减少图像的饱和度。增加或减少图像的亮度。增加或减少图像的对比度。反转图像的颜色。给图像应用模糊效果。
css如何实现边框模糊的效果
rolling_kitten的博客
05-14 687
其实并不难，用属性 filter: blur(数字px); 即可。效果如下： 图上的圆形内有色彩的渐变，同样也是用filter: blur(数字px); 实现的，代码如下：、
css左右滚动互不影响
this__valve的博客
05-20 134
滚动条
css去除复选框默认样式
xiaohua0708day的博客
05-17 111
类的样式，包括边框、宽度、高度等。在选中和未选中状态下，我们分别定义了不同的背景颜色，以便在复选框被选中或取消选中时改变其外观。的支持可能有所不同。你可能需要根据实际情况进行调整，以确保在各种浏览器下都能正确显示自定义的复选框样式。属性来覆盖默认的复选框外观。这些属性允许你重置浏览器的默认外观，以便你可以自定义样式。需要注意的是，不同浏览器对。在这个例子中，我们使用了。
CSS学习笔记：空间转换——使用transform属性实现元素在空间内的位移、旋转、缩放等效果
lbcbjtlhmjq的博客
05-20 86
使用perspective属性实现透视效果什么是透视：近大远小，近实远虚说明：perspective的值指的是透视距离，透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
CSS跳动文字
L_Y_J_21的博客
05-10 464
【代码】CSS跳动文字。
css 弹性盒子布局flex
11-05
flex布局是一种新的布局方式，它可以非常优雅地实现子元素的居中或均匀分布，甚至可以随着窗口缩放自动适应。相比于传统的布局方式，flex布局更加灵活，可以更好地适应不同的屏幕尺寸和设备。在小程序中，flex布局是...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小菜鸡的日志

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值