详细的css3中的弹性布局介绍_通俗易懂

最新推荐文章于 2024-04-21 07:10:13 发布

牛牛最爱喝兽奶

最新推荐文章于 2024-04-21 07:10:13 发布

阅读量245

点赞数 2

分类专栏：学习html 文章标签： html css css3 html5

本文链接：https://blog.csdn.net/cout_s/article/details/116463753

版权

学习html 专栏收录该内容

5 篇文章 2 订阅

订阅专栏

小牛又是努力的一天哦！我会用心去写每一步！ 在这里插入图片描述

弹性布局你学“废”了吗？

在这里插入图片描述

废话不多说，开干！！！

弹性盒子的概念

弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex块和inline-flex行，将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。
注意: 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

弹性盒子的相关属性

我们可以设置使用属性，让盒display: flex; 子具有弹性布局的属性。
1.flex-direction元素
flex-direction 属性规定灵活项目的方向,分为行和列布局方式。
而项目就是容器成员，称为Flex项目（item），简称”项目”。
flex-direction 可以有不同的属性值：
row： 默认值。灵活的项目将水平显示，如本例中项目从右到左水平展示。
row-reverse： 与 row 相同，但是以相反的顺序。
加粗样式 灵活的项目将垂直显示。
column-reverse： 与 column 相同，但是以相反的顺序。
initial： 设置该属性为它的默认值。
inherit： 从父元素继承该属性。

注意：如果元素不是弹性盒对象的元素，则 flex-direction 属性不起作用。

值	描述
row	默认值。元素将水平显示，正如一个行一样。
row-reverse	与 row 相同，但是以相反的顺序。
column	元素将垂直显示，正如一个列一样。
column	与 column 相同，但是以相反的顺序。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<title>弹性布局</title>
	<style type="text/css">
		*{margin: 0px;padding: 0px;}
   body{display: flex;flex-direction:row;}
	div{background: red;border: 1px solid black;width: 50px;height: 40px;}
	body div:first-child{background: blueviolet;}
	body div:nth-child(2){background:yellow;}
	body div:nth-child(3){background: green;}
	</style>
</head>
<body>
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</body>
</html>

下列是效果图，默认是一行显示所有的子元素
在这里插入图片描述
可以将flex-direction:column,更改为列显示。

2.flex-warp
flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。防止元素的溢出，默认情况下是元素自适应。

值	描述
nowrap	默认值。规定元素不拆行或不拆列。
warp	规定元素在必要的时候拆行或拆列。
warp-reverse	规定元素在必要的时候拆行或拆列，但是以相反的顺序。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<title>弹性布局</title>
	<style type="text/css">
		*{margin: 0px;padding: 0px;}
   body{display: flex;flex-direction:row-reverse;justify-content:flex-end;width: 180px;height: 90px;border: 1px solid black;}
	div{background: red;border: 1px solid black;width: 50px;height: 40px;}
	body div:first-child{background: blueviolet;}
	body div:nth-child(2){background:yellow;}
	body div:nth-child(3){background: green;}
	</style>
</head>
<body>
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</body>
</html>

效果图：
body里宽设置为180px，盒子的宽为50px，显然以正常的大小body盒子是装不下四个小盒子的，所以默认情况下子元素自适应一行显示。
在这里插入图片描述
如果将flex-wrap：wrap；加入css布局中，效果便会是如下显示：会折行显示。

3.flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
4.align-items
align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

值	描述
stretch	默认值。项目被拉伸以适应容器。
center	项目位于容器的中心。
flex-start	项目位于容器的开头。
flex-end	项目位于容器的结尾。
baseline	项目位于容器的基线上。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{padding: 0px;margin: 0px;}
		footer{border: 1px solid black;width: 800px;height: 250px;display: flex; flex-flow:row wrap-reverse;align-items:center;}
		footer div{width: 200px;height: 50px;margin:10px;border: 1px solid black;text-align: center;font-size: 20px;}
	</style>
		
</head>
<body>
	<footer>
		<div>1</div>
	    <div>2</div>
		<div>3</div>
		<div>4</div>
	</footer>
</body>
</html>

在这里插入图片描述

5.justify-content
justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

值	描述
space-between	项目位于各行之间留有空白的容器内。
center	项目位于容器的中心。
flex-start	项目位于容器的开头。
flex-end	项目位于容器的结尾。
space-around	项目位于各行之前、之间、之后都留有空白的容器内。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{padding: 0px;margin: 0px;}
		footer{border: 1px solid black;width: 800px;height: 250px;display: flex; flex-flow:row wrap-reverse;align-items:center;justify-content:flex-end;}
		footer div{width: 200px;height: 50px;margin:10px;border: 1px solid black;text-align: center;font-size: 20px;}
	</style>
		
</head>
<body>
	<footer>
		<div>1</div>
	    <div>2</div>
		<div>3</div>
		<div>4</div>
	</footer>
</body>
</html>

在这里插入图片描述

弹性盒子子元素

值	描述
order	设置弹性盒子的子元素排列顺序。
flex-grow	设置或检索弹性盒子元素的扩展比率。
flex-shrink	指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
flex-basis	用于设置或检索弹性盒伸缩基准值。
flex	设置弹性盒子的子元素如何分配空间。
align-self	在弹性子元素上使用。覆盖容器的 align-items 属性。

1.order元素
<integer>：用整数值来定义排列顺序，数值小的排在前面。可以为负值，默认为0。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<title>弹性布局</title>
	<style type="text/css">
		*{margin: 0px;padding: 0px;}
   body{display: flex;flex-direction:row-reverse;justify-content:flex-end;width: 180px;height: 90px;border: 1px solid black;flex-wrap:wrap;}
	div{background: red;border: 1px solid black;width: 50px;height: 40px;}
	body div:first-child{background: blueviolet;order:1;}
	body div:nth-child(2){background:yellow;order:22;}
	body div:nth-child(3){background: green;order:-11;}
	</style>
</head>
<body>
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</body>
</html>

在这里插入图片描述
2.flex-grow属性
<integer>：一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。
3.flex-shrink
<integer>：一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。
4.flex-basis
<integer>：一个长度单位或者一个百分比，规定元素的初始长度。
auto：默认值。长度等于元素的长度。如果该项目未指定长度，则长度将根据内容决定。
5.flex
flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

牛牛最爱喝兽奶

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
详细的css3中的弹性布局介绍_通俗易懂

小牛又是努力的一天哦！我会用心去写每一步！弹性布局你学“废”了吗？废话不多说，开干！！！弹性盒子的概念弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器
复制链接

扫一扫