CSS3弹性盒子

最新推荐文章于 2024-05-25 21:28:45 发布
最新推荐文章于 2024-05-25 21:28:45 发布
阅读量192 收藏 2
点赞数 1
分类专栏： css基础知识 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43866830/article/details/115236234
版权

CSS3弹性盒子

一、背景

  CSS传统布局模式是盒状模型，主要是通过display、float、position属性来实现布局。在2009年，W3C提出了一种新的布局方案，flex布局即弹性盒子，它可以简便、完整、响应式地实现各种页面的布局。使用弹性盒子，也可以对一个容器中的子元素进行排列、对齐和分配空白空间。

二、弹性盒子

  弹性容器（Flex container）包含了一个或多个的弹性子元素（Flex item）。任何一个容器都可以指定为弹性盒子，具体方法如：

display: flex | inline-flex;
/*inline-flex是用来实现行内元素的弹性布局*/
/*如果使用webkit内核的话，则需要加上前缀-webkit-flex*/

示例：
  当不设置为弹性盒子时的效果：
在这里插入图片描述
  设置为弹性盒子后：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		.flexbox{
			background-color: #00FFFF;
			height: 1000px;
			display: flex;
		}
		.flex-item{
			width: 200px;
			height: 200px;
			background-color: #FFC0CB;
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<div class="flexbox">
		<div class="flex-item">test1</div>
		<div class="flex-item">test2</div>
		<div class="flex-item">test3</div>
		<div class="flex-item">test4</div>
	</div>
</body>
</html>

结果：
在这里插入图片描述
  当拖动边框使得边框宽度小于设置的容器宽度时，容器内的元素不会像浮动那样子发生换行，而是会进行大小的调整：
在这里插入图片描述

1.容器常用的属性

flex-direction

  flex-direction指定的是弹性容器中子元素的排列方向（主轴的方向），常见的属性值有：
  row：默认值，表示从左往右排列。
  row-reverse：从右往左排列。
  column：从上往下排列。
  column-reverse：从下往上排列。
具体样例：
  设置为row：

<style type="text/css">
	.flexbox{
		background-color: #00FFFF;
		height: 1000px;
		display: flex;
		flex-direction: row;
	}
	.flex-item{
		width: 200px;
		height: 200px;
		background-color: #FFC0CB;
		border: 1px solid black;
	}
</style>

结果：
在这里插入图片描述
  设置为row-reverse：

<style type="text/css">
	.flexbox{
		background-color: #00FFFF;
		height: 1000px;
		display: flex;
		flex-direction: row-reverse;
	}
	.flex-item{
		width: 200px;
		height: 200px;
		background-color: #FFC0CB;
		border: 1px solid black;
	}
</style>

结果：
在这里插入图片描述
  设置为column，结果：
在这里插入图片描述
  设置为column-reverse，结果：
在这里插入图片描述

flex-wrap

  flex-wrap表示的是容器的换行规则，规定flex容器是单行或者是多行：常用的值有：
  nowrap：默认值，不换行。
  wrap：设置为换行。
  wrap-reverse：设置为逆序的换行。
具体示例如下：
  当值为nowrap时：

	<style type="text/css">
		.flexbox{
			background-color: #00FFFF;
			height: 1000px;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
		}
		.flex-item{
			width: 200px;
			height: 200px;
			background-color: #FFC0CB;
			border: 1px solid black;
		}
	</style>

在这里插入图片描述
  当值为wrap时：
在这里插入图片描述
  当值为wrap-reverse时：
在这里插入图片描述

flex-flow

  flex-flow是容器的方向和换行的简写，默认值是flex-flow: row nowrap;使用和flex-direction、flex-wrap一样，这里来就不作演示了。

justify-content

  justify-content表示的是主轴方向的对齐方式。常见的属性有以下几种：
flex-start：向主轴的起点对齐。
center：居中对齐。
flex-end：向主轴的终点对齐。
space-between：第一个和最后一个元素贴边显示，剩余的空白会自动分配，让每两个元素之间的间距是相等的。
space-around：将剩余空间的空白进行分配，也让每两个元素之间的间距是相等的。
具体示例：
  当值设置为flex-start时：

	<style type="text/css">
		.flexbox{
			background-color: #00FFFF;
			height: 1000px;
			display: flex;
			justify-content: flex-start;
		}
		.flex-item{
			width: 200px;
			height: 200px;
			background-color: #FFC0CB;
			border: 1px solid black;
		}
	</style>

结果：
在这里插入图片描述
  当值设置为center时：
在这里插入图片描述
  当值设置为flex-end时：
在这里插入图片描述
  当值为space-between时：
在这里插入图片描述
  当值为space-around时：
在这里插入图片描述

align-items

  align-items表示的是交叉轴方向（与主轴垂直）的对齐方式，常见的值有：
  stretch：默认值，如果子元素没有设置高度，会按照容器百分百的高度显示。
  baseline：让所有文字在同一基线上显示。
  
具体示例：
  当值stretch时：

	<style type="text/css">
		.flexbox{
			background-color: #00FFFF;
			height: 1000px;
			display: flex;
			justify-content: space-around;
			align-items: stretch;
		}
		.flex-item{
			width: 200px;
			/* height: 200px; */
			background-color: #FFC0CB;
			border: 1px solid black;
		}
	</style>

结果：
在这里插入图片描述
  当值为baseline时：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		.flexbox{
			background-color: #00FFFF;
			height: 1000px;
			display: flex;
			justify-content: space-around;
			align-items: baseline;
		}
		.flex-item{
			width: 200px;
			text-align: center;
			height: 200px;
			background-color: #FFC0CB;
			border: 1px solid black;
		}
		.f30{
			font-size: 30px;
		}
		.f20{
			font-size: 20px;
		}
	</style>
</head>
<body>
	<div class="flexbox">
		<div class="flex-item f30">test1</div>
		<div class="flex-item">test2</div>
		<div class="flex-item f20">test3</div>
		<div class="flex-item">test4</div>
	</div>
</body>
</html>

结果：
在这里插入图片描述
  当值为flex-start时：
在这里插入图片描述
  当值为flex-end、center时，道理同justify-content一样，就不展示啦。

align-content

  align-content表示的是含多轴线的对齐方式，是指将整行元素进行对齐，如果窗口尺寸缩小的话也会相应地进行对齐，常见的值有：
  flex-start：基于起点的对齐方式。
  flex-end：基于终点的对齐方式。
  center：居中的对齐方式。
  space-between：头和尾贴边，中间的元素保持相同间距。
  space-around：元素保持同样间距。
  stretch：默认值。
具体示例：
  当值为flex-start时：

	<style type="text/css">
		.flexbox{
			background-color: #00FFFF;
			height: 1000px;
			display: flex;
			flex-wrap: wrap;
			align-content: flex-start;
		}
		.flex-item{
			width: 200px;
			text-align: center;
			height: 200px;
			background-color: #FFC0CB;
			border: 1px solid black;
		}
	</style>

结果：
在这里插入图片描述
当值为flex-end时：
在这里插入图片描述
当值为center时：
在这里插入图片描述
当值为space-between时：
在这里插入图片描述
当值为space-around时：
在这里插入图片描述

2.子元素常用属性

order

  order设置的是项目的排列顺序，数值越小越靠前，默认是0。具体使用如下：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		.flexbox{
			background-color: #00FFFF;
			height: 1000px;
			display: flex;
		}
		.flex-item{
			width: 200px;
			text-align: center;
			height: 200px;
			background-color: #FFC0CB;
			border: 1px solid black;
		}
		.o1{/*给test1设置order为1*/
			order: 1;
		}
	</style>
</head>
<body>
	<div class="flexbox">
		<div class="flex-item o1">test1</div>
		<div class="flex-item">test2</div>
		<div class="flex-item">test3</div>
		<div class="flex-item">test4</div>
	</div>
</body>
</html>

结果test1的显示就放在了最后：
在这里插入图片描述

flex-grow

  flex-grow定义的是项目的放大比例，默认为0（如果存在剩余空间，也不放大）。即按子元素的比例显示，具体示例：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		.flexbox{
			background-color: #00FFFF;
			height: 1000px;
			display: flex;
		}
		.flex-item{
			width: 200px;
			text-align: center;
			height: 200px;
			background-color: #FFC0CB;
			border: 1px solid black;
		}
		.g1{
			flex-grow: 1;
		}
		.g2{
			flex-grow: 2;
		}
		.g3{
			flex-grow: 3;
		}
	</style>
</head>
<body>
	<div class="flexbox">
		<div class="flex-item g1">test1</div>
		<div class="flex-item g2">test2</div>
		<div class="flex-item g3">test3</div>
		<div class="flex-item">test4</div>
	</div>
</body>
</html>

这里的子元素放大比例为：1：2：3：0，因此显示结果如下，但如果进行窗口的缩放，放大比例会失效：
在这里插入图片描述

flex-shrink

  flex-shrink设置的是项目的缩小比例，默认为1（如果空间不足，改元素会缩小），当值设置为0的时候，对窗口大小进行缩小，值为0的元素会保持原来大小不进行缩放，具体使用如下：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		.flexbox{
			background-color: #00FFFF;
			height: 1000px;
			display: flex;
		}
		.flex-item{
			width: 200px;
			text-align: center;
			height: 200px;
			background-color: #FFC0CB;
			border: 1px solid black;
		}
		.s1{
			flex-shrink: 2;
		}
		.s2{
			flex-shrink: 0;
		}
		.s3{
			flex-shrink: 3;
		}
	</style>
</head>
<body>
	<div class="flexbox">
		<div class="flex-item s1">test1</div>
		<div class="flex-item s2">test2</div>
		<div class="flex-item s3">test3</div>
		<div class="flex-item">test4</div>
	</div>
</body>
</html>

结果（缩放后）：
在这里插入图片描述

flex-basis

  flex-basis表示项目在分配多余的空间之前，占据主轴的空间大小，其实就是项目在缩放之前的尺寸大小，常见的值有：
  auto：默认值，项目本来大小。
  length：项目将占据固定空间。
这里就不作演示了。

flex

  flex用来设置弹性盒子对象的子元素分配空间。其实就是对上面三个属性的缩写，语法为：

flex:none | [flex-grow][flex-shrink][flex-basis];

  该属性有两个快捷值：auto（值为：1 1 auto）和none（值为：0 0 auto）。

align-self

  align-self用来设置单个项目的对齐方式，可覆盖align-items。常见的值有：
  auto：默认值，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
  还有其他的值如stretch、baseline、flex-start、flex-end、center，和align-items同理，这里就不作演示了。

3.注意

  当我们设置了flex布局后，子元素的float、clear和vertical-align属性都将失效。
这一部分的内容到这里就结束啦，有不足的地方也希望大家帮我指出来，蟹蟹！
在这里插入图片描述

这名没人用吧
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
CSS3 弹性盒子
Miratowa_的博客
04-28 444
弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
css3弹性盒子
gercke的博客
08-02 261
css3弹性盒子 1）box-sizing:content-box; 普通的盒子模型，加padding和border时盒子会变大，向外扩展 2） box-sizing:border-box; 盒子模型，加padding和border时，盒子不会变大，向内扩展 父元素 3） justify-content–规定子元素在水平方向位置 属性值： flex-start：居左对其 flex-end...
弹性盒子的布局
jan_ping的博客
02-13 6664
1 弹性盒子(弹性布局) 1.1 弹性布局介绍 Flexbox是flexible box的简称(意思是"灵活的盒子容器")，是CSS3引入的新的布局模式。它决定了 元素如何在页面商排列，使他们能在不同的屏幕尺寸和设备下可预测地展现出来。 它之所以被称为Flexbox，是因为它能够扩展和收缩flex容器内地元素，以最大限度地填充可用空 间。与以前布局方式(如table布局和浮动元素内嵌元素)相比，Flexbox是一个更强大的方式 （1）在不同方向排列元素 （2）重新排列元素的显示顺序 （3）更改元
弹性盒子（display: flex）布局超全讲解|Flex 布局教程
热门推荐
肥晨开发的学习之路
06-16 12万+
弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。
弹性盒子布局，flex布局
最新发布
Queen741740155的博客
05-25 818
弹性盒子布局（Flexbox）是CSS3引入的一种新的布局模式，它提供了一种更加有效的方式来设计、布局和对齐容器中的项目，即使容器的大小动态改变或者项目的数量未知。弹性盒子布局的主要特点是能够轻松地在不同的屏幕大小和设备上实现一致的布局，通过为父容器（弹性容器）设置或来定义。弹性容器内的子元素（弹性项）会自动成为容器的成员，并按照弹性盒子的规则进行布局。：弹性盒子布局可以轻松地适应不同屏幕尺寸和设备，无论是桌面设备还是移动设备。：可以设置主轴的方向（水平或垂直），从而决定弹性项是水平排列还是垂直排列。
flex弹性盒子布局（详细）
互联网小队
09-30 7566
弹性盒模型 1、伸缩容器display Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素 自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。 主轴的开 始位置（与边框的交叉点）叫做 m
Html5+CSS3：第三讲：弹性盒子flex
专科三年的修炼的博客
09-20 458
html5与css3
CSS Flex 弹性盒布局详解
weixin_44196299的博客
08-05 1117
弹性盒布局又称“flex”布局，是在CSS3中的一种新布局方式，可以简洁、方便、响应式地实现各种页面布局，因此自一提出受到了极大地追捧，目前也得到了各大主流浏览器的支持，因此迅速替代了之前的“display+float+position”的布局形式。 一、弹性盒布局简介 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 弹性容器通过设置 display ...
css3弹性盒子flex实现三栏布局的实现
01-22
弹性盒子本身就是并排的，我们设置宽度即可。 用一个容器container包裹三栏，设置comtainer容器的display属性为flex，左右栏设置宽度为300px，中间栏设置flex:1，这里的1表示宽度比例，具体数值取决于其它盒子的flex...
CSS弹性盒子.docx
02-29
CSS弹性盒子，也称为Flexbox，是CSS3中引入的一种强大的布局模式，旨在解决复杂的网页布局问题，特别是在处理响应式设计和不同屏幕尺寸时。它允许开发者更灵活地控制元素的排列、对齐和空间分配，使网页设计更加简洁...
css3弹性盒模型实例介绍
09-25
Css3引入了新的盒模型——弹性盒模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间，使用该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局
详解CSS3弹性伸缩盒
01-18
弹性盒子对于前端web网页布局来说，有着举足轻重的作用，移动端也是如此。掌握了弹性盒子用法，对于目前编写自适应页面很重要。掌握这种布局规则，是一项必备技能。 弹性伸缩盒模型说明 主轴（main axis） 是...
CSS3弹性盒模型开发笔记（三）
09-27
《CSS3弹性盒模型开发笔记（三）》深入解析 CSS3弹性盒模型，也称为Flexbox，是一种用于创建响应式、动态布局的强大工具。它允许开发者更灵活地控制元素的排列、对齐和分布，尤其在处理不同屏幕尺寸和设备上的布局...
CSS3弹性盒Flebox布局介绍和使用教程
Tseng
07-13 360
弹性盒布局（flexbox） 一、弹性盒布局介绍 1)弹性盒也叫伸缩布局盒模型 它是**css3引入的一种新的布局模式——flexbox**布局，即伸缩布局盒模型，用来提供一个更有效的方式制定、调整和分布一个容器里的项目布局。相比之前的布局方式，更便利于开发。 2)主要思想是让容器有能力让其子项目能够改变其宽度、高度（甚至顺序），以最佳的方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大...
html弹性盒子布局,实例讲解CSS3中的box-flex弹性盒属性布局
weixin_36048031的博客
06-30 718
box-flex是css3新添加的盒子模型属性，它的出现打破了我们经常使用的浮动布局，实现垂直等高、水平均分、按比例划分。但是它有一定的局限性，在firefox、chrome这浏览器下需要使用它们的私有属性来定义：firefox(-moz)、chrome(-webkit)。一、box-flex属性box-flex主要让子容器针对父容器的宽度按一定规则进行划分。CSS Code复制内容到剪贴板111...
CSS3中的弹性盒子(Flex Box)和弹性布局
Dimuzero的博客
11-18 1936
CSS3 弹性盒子(Flex Box) 一. 介绍 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 display:flex | inline-flex； 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 弹性容器通过设
CSS3 弹性盒子(Flex Box)
qq_52301431的博客
04-05 1万+
25、CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒子（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 案例，实现水平垂直居中： 正在上传…重新上传取消 绝对定位与负边距实现 #container{ position:relative; } ..
弹性盒布局
weixin_42447364的博客
06-12 1028
flex 弹性盒子 两列布局
弹性盒(flex box)布局属性详解
azkhx的博客
08-15 1768
1)弹性盒也叫伸缩布局盒模型它是**css3引入的一种新的布局模式——flexbox**布局，即伸缩布局盒模型，用来提供一个更有效的方式制定、调整和分布一个容器里的项目布局。相比之前的布局方式，更便利于开发。2)主要思想是让容器有能力让其子项目能够改变其宽度、高度（甚至顺序），以最佳的方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。flex容器会使子项目扩展来填充可用空间，或缩小他们以防止溢出容器。
css3弹性盒子布局
08-25
CSS3弹性盒子布局（Flexbox）是一种用于创建灵活的、响应式的网页布局的技术。它通过定义容器和内部元素之间的关系来实现布局。以下是CSS3弹性盒子布局的一些基本概念和属性： 1. 弹性容器（Flex Container）：使用...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

这名没人用吧

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

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

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

打赏作者

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

抵扣说明：

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

余额充值