1. Toy模板网首页
  2. > Toy博客

CSS3 Flexbox

9月前 作者：风雨同舟jk 分类：Toy博客 阅读(37) 违法举报

这篇具有很好参考价值的文章主要介绍了CSS3 Flexbox。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Flex 是 Flexible Box 的缩写，意为弹性盒子布局。

  • CSS3中一种新的布局模式：W3C在2009年提出的一种布局方案，一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。其目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

   弹性盒子布局由弹性容器(Flex container) 和 弹性子元素(Flex item) 组成

  • 容器：采用Flex布局的元素(设置了元素的display:flex)，称为Flex容器（flex container），简称”容器”。容器默认存在两根轴，分别为水平的主轴（main axis）和垂直的交叉轴（cross axis），默认水平方向为主轴
  • 项目：Flex容器中的子元素称为 Flex 项目（flex item），简称“项目”。项目的 float、clear和vertical-align属性将失效。

1. Flex容器有如下属性：

  • flex-direction：设置容器的主轴方向，即项目的排列方向

  • flex-wrap：设置当项目超出容器时是否换行

  • flex-flow：flex-direction 和 flex-wrap 两个属性的简写

  • justify-content：设置项目在主轴（横轴）方向上的对齐方式

  • align-items：设置项目在交叉轴（纵轴）方向上的对齐方式

  • align-content：设置容器内多行在交叉轴上的排列方式

    注：这几个属性的可选值都还有两个值，initial 和 inherit。initial 表示将此属性设置为属性的默认值，inherit 表示从父元素继承属性的值，此文对这两个可选值省略不表。

1.1 flex-direction 属性设置容器的主轴方向，其属性可选值如下：

row       默认值，主轴沿水平方向从左到右
row-reverse 主轴沿水平方向从右到左
column 主轴沿垂直方向从上到下
column-reverse 主轴沿垂直方向从下到上 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			
			.row-container,
			.row-reverse-container,
			.column-container,
			.column-reverse-container
			{
				display: flex;
				background-color: aqua;
			}
			
			.row-container{
				flex-direction:row;
			}
			
			.row-reverse-container{
				flex-direction:row-reverse;
			}
			
			.column-container{
				flex-direction:column;
			}
			
			.column-reverse-container
			{
				flex-direction:column-reverse;
			}
			
			.row-container div,
			.row-reverse-container div,
			.column-container div,
			.column-reverse-container div
			{
				width: 80px;
				height: 20px;
				padding: 3px;
				border: 1px solid #CCC;
				margin: 5px;
				background-color: aliceblue;
			} 
		</style>
	</head>
	<body>
		
		<div class="row-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
		
		<div class="row-reverse-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
		
		<div class="column-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
		
		<div class="column-reverse-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
		
	</body>
</html>

CSS3 Flexbox,css3,html5

1.2 flex-wrap：设置当项目超出容器时是否换行，其属性可选值如下：

nowrap 默认值，项目不会换行，但项目宽度会都等比例缩短，达不到设定的宽度
wrap 项目会换行，项目宽度不变
wrap-reverse 项目会换行，但会以相反的顺序，项目宽度不变

        注：主轴是横轴或纵轴都是如此

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			
			.nowrap-container,
			.wrap-container,
			.wrap-reverse-container
			{
				display: flex;
				background-color: aqua;
				flex-direction:row;
			}
			
			.nowrap-container{
				flex-wrap:nowrap;
			}
			
			.wrap-container{
				flex-wrap:wrap;
			}
			
			.wrap-reverse-container{
				flex-wrap:wrap-reverse;
			}
			
			
			.nowrap-container div,
			.wrap-container div,
			.wrap-reverse-container div
			{
				width: 80px;
				height: 20px;
				padding: 3px;
				border: 1px solid #CCC;
				margin: 5px;
				background-color: aliceblue;
			} 
		</style>
	</head>
	<body>
		
		<div class="nowrap-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
		
		<div class="wrap-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
		
		<div class="wrap-reverse-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
		
		
	</body>
</html>

CSS3 Flexbox,css3,html5

1.3 flex-flow：flex-direction 和 flex-wrap 两个属性的简写

                如：flex-flow:column wrap

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			
			.container
			{
				height: 80px;
				display: flex;
				background-color: aqua;
				flex-flow:column wrap;
			}
			
			
			.container div
			{
				width: 80px;
				height: 20px;
				padding: 3px;
				border: 1px solid #CCC;
				margin: 5px;
				background-color: aliceblue;
			} 
		</style>
	</head>
	<body>
		
		<div class="container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
		
	</body>
</html>

 CSS3 Flexbox,css3,html5

1.4 justify-content：设置项目在主轴（横轴）方向上的对齐方式，其属性可选值如下：

flex-start 默认值，左对齐
flex-end 右对齐
center 居中
space-between 两端对齐，项目之间的间隔是相等的
space-around 每个项目两侧的间隔相等 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			
			.content-start-container,
			.content-end-container,
			.content-center-container,
			.content-space-between-container,
			.content-space-around-container
			{
				display: flex;
				background-color: aqua;
				flex-direction:row;
				margin-top: 10px;
			}
			
			.content-start-container{
				justify-content: flex-start;
			}
			
			.content-end-container{
				justify-content: flex-end;
			}
			
			.content-center-container{
				justify-content: center;
			}
			
			.content-space-between-container{
				justify-content: space-between;
			}
			
			.content-space-around-container{
				justify-content: space-around;
			}
			
			
			.content-start-container div,
			.content-end-container div,
			.content-center-container div,
			.content-space-between-container div,
			.content-space-around-container div
			{
				width: 80px;
				height: 20px;
				padding: 3px;
				border: 1px solid #CCC;
				margin: 5px;
				background-color: aliceblue;
			} 
		</style>
	</head>
	<body>
		
		<div class="content-start-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
		
		<div class="content-end-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
		
		<div class="content-center-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
		
		<div class="content-space-between-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
		
		<div class="content-space-around-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
		
	</body>
</html>

CSS3 Flexbox,css3,html5

1.5 align-items：设置项目在交叉轴（纵轴）方向上的对齐方式，其属性可选值如下：

stretch 默认值，项目将被拉伸以适合容器(当项目不设置高度时)
center 项目于容器中央对齐(当项目高度一致时对齐，项目高度不一致时，项目垂直居中)
flex-start 项目位容器顶部对齐
flex-end 项目于容器的底部对齐
baseline 项目与容器的基线对齐 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			
			.items-stretch-container,
			.items-center-container,
			.items-start-container,
			.items-end-container,
			.items-baseline-container
			{
				display: flex;
				background-color: aqua;
				margin-top: 10px;
				height: 80px;
			}
			
			.items-stretch-container{
				align-items: stretch;
			}
			
			.items-center-container{
				align-items: center;
			}
			
			.items-start-container{
				align-items: flex-start;
			}
			
			.items-end-container{
				align-items: flex-end;
			}
			
			.items-baseline-container{
				align-items: baseline;
			}
			
			
			.items-stretch-container div,
			.items-center-container div,
			.items-start-container div,
			.items-end-container div,
			.items-baseline-container div
			{
				width: 80px;
				padding: 3px;
				border: 1px solid #CCC;
				margin: 5px;
				background-color: aliceblue;
			} 
			
		</style>
	</head>
	<body>
		
		<div class="items-stretch-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
		
		<div class="items-center-container">
			<div style="height: 20px;">1</div>
			<div style="height: 30px;">2</div>
			<div style="height: 40px;">3</div>
			<div style="height: 50px;">4</div>
		</div>
		
		<div class="items-start-container">
			<div style="height: 20px;">1</div>
			<div style="height: 30px;">2</div>
			<div style="height: 40px;">3</div>
			<div style="height: 50px;">4</div>
		</div>
		
		<div class="items-end-container">
			<div style="height: 20px;">1</div>
			<div style="height: 30px;">2</div>
			<div style="height: 40px;">3</div>
			<div style="height: 50px;">4</div>
		</div>
		
		<div class="items-baseline-container">
			<div style="height: 20px;font-size: 20px;">1</div>
			<div style="height: 30px;font-size: 5px;">2</div>
			<div style="height: 40px;font-size: 30px;">3</div>
			<div style="height: 50px;font-size: 10px;">4</div>
		</div>
		
	</body>
</html>

        

CSS3 Flexbox,css3,html5

1.6 align-content：设置项目多跟轴线的对齐方式，其属性可选值如下：

注：容器内必须有多行的项目，该属性才能渲染出效果。

stretch

默认值。元素被拉伸以适应容器。

各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于'flex-start'。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。注：项目没有高度时才会占满整个交叉轴 。有高度时将是高度大小（则项目之间会有间隔）
center 项目在容器内居中排布
flex-start 项目在容器的顶部排列，各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行
flex-end 项目在容器的底部排列，各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行。
space-between 多行项目均匀分布在容器中，其中第一行分布在容器的顶部，最后一行分布在容器的底部
space-around 多行项目均匀分布在容器中，并且每行的间距（包括离容器边缘的间距）都相等 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			
			.align-stretch-container,
			.align-center-container,
			.align-start-container,
			.align-end-container,
			.align-space-between-container,
			.align-space-around-container
			{
				display: flex;
				background-color: aqua;
				margin-top: 10px;
				height: 120px;
				flex-flow: row wrap;
			}
			
			.align-stretch-container{
				align-content: stretch;
			}
			
			.align-center-container{
				align-content: center;
			}
			
			.align-start-container{
				align-content: flex-start;
			}
			
			.align-end-container{
				align-content: flex-end;
			}
			
			.align-space-between-container{
				align-content: space-between;
			}
			
			.align-space-around-container{
				align-content: space-around;
			}
			
			
			.align-stretch-container div,
			.align-center-container div,
			.align-start-container div,
			.align-end-container div,
			.align-space-between-container div,
			.align-space-around-container div
			{
				width: 80px;
				padding: 3px;
				border: 1px solid #CCC;
				margin: 5px;
				background-color: aliceblue;
			} 
			
		</style>
	</head>
	<body>
		
		<div class="align-stretch-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
		</div>
		
		<div class="align-center-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
		</div>
		
		<div class="align-start-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
		</div>
		
		<div class="align-end-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
		</div>
		
		<div class="align-space-between-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
		</div>
		
		<div class="align-space-around-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
		</div>
		
	</body>
</html>

        CSS3 Flexbox,css3,html5

2. Flex容器内项目有如下属性：

  • order：设置项目的排序顺序

  • flex-grow：设置项目相对于其他项目的增长量(如果容器还有多余空间)，也可以说是定义项目的放大比例，默认值为 0(即如果存在多余空间也不放大)

  • flex-shrink：设置项目相对于其他项目的收缩量(如果容器空间不够)，也可以说是定义项目的缩小比例，默认值为 1(一起按比例缩小)

  • flex-basic：设置项目的初始长度

  • flex：属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性，默认值为0 1 auto。后两个属性可选

  • align-self：为某个项目设置不同于其它项目的对齐方式，该属性可以覆盖 align-items 属性的值

   2.1 order：设置项目的排序顺序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			
			.flex-container
			{
				display: flex;
				background-color: aqua;
				margin-top: 10px;
			}
			
			
			.flex-container div
			{
				width: 80px;
				padding: 3px;
				border: 1px solid #CCC;
				margin: 5px;
				background-color: aliceblue;
			} 
			
		</style>
	</head>
	<body>
		
		<div class="flex-container">
			<div style="order: 1;">1</div>
			<div style="order: 4;">2</div>
			<div style="order: 2;">3</div>
			<div style="order: 3;">4</div>
		</div>
		
		
	</body>
</html>

CSS3 Flexbox,css3,html5

  2.2 flex-grow：设置项目相对于其他项目的增长量(如果容器还有多余空间)，也可以说是定义项目的放大比例，默认值为 0(即如果存在多余空间也不放大)，当容器没有多余空间时，该属性失效

CSS3 Flexbox,css3,html5

 当容器有剩余空间时：将所有flex-grow的取值相加得到分母sum，每个属性的数值作为分子，然后乘以剩余空间，即是项目要扩展的空间，再加上项目本来的空间即是项目所占的总空间

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			
			.flex-container
			{
				display: flex;
				background-color: aqua;
				margin-top: 10px;
			}
			
			.flex-container div
			{
				width: 80px;
				padding: 3px;
				border: 1px solid #CCC;
				margin: 5px;
				background-color: aliceblue;
			} 
			
		</style>
	</head>
	<body>
		
		<div class="flex-container">
			<div style="flex-grow: 1;">1</div>
			<div style="flex-grow: 3;">2</div>
			<div style="flex-grow: 2;">3</div>
			<div style="flex-grow: 0;">4</div>
		</div>
		
		
	</body>
</html>

CSS3 Flexbox,css3,html5

 

2.3 flex-shrink：设置项目相对于其他项目的收缩量(如果容器空间不够)，也可以说是定义项目的缩小比例，默认值为 1(一起按比例缩小)，计算公式和 flex-grow 放大公式类似

CSS3 Flexbox,css3,html5

 

2.4 flex-basic：设置项目的初始长度，默认值 auto，即项目本来的长度

CSS3 Flexbox,css3,html5

2.5 flex：属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性

语法格式为：flex: flex-grow flex-shrink flex-basis。

默认值为0 1 auto。后两个属性可选，两个快捷值：auto (1 1 auto) 和 none (0 0 auto)

CSS3 Flexbox,css3,html5

         我们更常用到 flex 属性的用法是只有 flex-grow 一个参数的值，flex:1 或者 flex:2 等等，相当于 flex:1 1 0 或者 flex:2 1 0，表示项目在 flex-basic 为 0 的基础上伸缩。其等效效果为 各项目长度占容器长度 flex:? 的取值的比例。

CSS3 Flexbox,css3,html5

 CSS3 Flexbox,css3,html5

 2.6 align-self：为某个项目设置不同于其它项目的对齐方式，该属性可以覆盖 align-items 属性的值。

默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

CSS3 Flexbox,css3,html5文章来源地址https://www.toymoban.com/news/detail-604229.html

到了这里，关于CSS3 Flexbox的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • CSS3与HTML5

    CSS3与HTML5

    box-sizing content-box：默认，宽高包不含边框和内边距 border-box：也叫怪异盒子，宽高包含边框和内边距 动画：移动translate，旋转、transform等等 走马灯：利用动画实现animation：from… to… 隐藏元素： visibility：hidden 占位 display：none 不占位 画页面前重置浏览器自带样式 快格式化上

    2024年02月07日
    浏览(44)
  • HTML5和CSS3笔记

    HTML5和CSS3笔记

    1.1：页面结构： 1.2：标签类型： 1.2.1：块标签：  1.2.2：行内标签： 1.2.3：行内块标签： 1.2.4：块标签与行内标签的转换： （可以设置在不在同一行和隐藏） 1.3：表单与表格标签：   表单：    表格：   1.4：H5标签： 1.4.1：语义标签：   1.4.2：多媒体标签： （音频audio和视

    2024年03月24日
    浏览(51)

  • 响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 例3-5 CSS3 动画

    上述代码中： 第10行代码定义animation属性实现动画效果； 第10~17行代码定义rotate动画让图片从0%到100%顺时针旋转360度； 第18~20行代码通过animation动画实现当鼠标指针悬停在图片上时让图片不停的旋转。 CSS3 动画 CSS3可以创建动画，它可以取代许多网页动画图像、Flash动画和Ja

    2024年02月02日
    浏览(49)
  • 响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 例3-1 CSS3过渡

    响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 例3-1 CSS3过渡

    上述代码中： 第8-16行代码定义.box的样式，设置透明度为1，transition的值为3s； 第18~20行代码定义元素的透明度为0，表示当鼠标指针悬停在.box元素上时元素隐藏，当鼠标离开盒子时元素显示。 在CSS3之前，由于没有过渡属性transition，当修饰CSS样式时，CSS样式属性值就会瞬间变

    2024年01月21日
    浏览(49)
  • 响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 例3-3 CSS3 旋转缩放

    响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 例3-3 CSS3 旋转缩放

    上述代码中： 第13行代码改变了div盒子变形原点 默认旋转 修改变形原点为左下角（transform-origin: left bottom 0px;） 元素的变形都有一个原点，元素围绕着这个点进行变形或者旋转，默认的起始位置就是元素的中心位置。CSS3变形使用transform-origin属性指定元素变形基于的原点。

    2024年01月16日
    浏览(58)

  • HTML5CSS3提高

    HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器 才支持，如果不考虑兼容性问题，可以大量使用这些新特性。 以前布局，我们基本用 div 来做。div 对于搜索引擎来说，

    2024年02月14日
    浏览(52)
  • 尚硅谷html5+css3（3）布局

    尚硅谷html5+css3（3）布局

    1.文档流normal flow -网页是一个多层结构 -通过CSS可以分别为每一层设置样式 -用户只能看到最顶层 -最底层：文档流（我们所创建的元素默认都是从文档流中进行排列） 2.盒子模型   1.盒子模型-边框 2.盒子模型-内边距 3.盒子模型-外边距 4.盒子模型-水平方向的布局 5.盒子模型

    2024年04月09日
    浏览(63)

  • html5和css3的新特性

    标签         !-- 高亮 mark --         !-- 摘要概述 --         details             summary                 咖啡             /summary             ul                 li拿铁/li                 li美式/li             /ul         /details           

    2024年02月11日
    浏览(42)
  • 纯CSS3的单选框、复选框、开关按钮UI库-自由分享jQuery、html5、css3的插件库

    纯CSS3的单选框、复选框、开关按钮UI库-自由分享jQuery、html5、css3的插件库

    纯CSS3的单选框、复选框、开关按钮UI库-自由分享jQuery、html5、css3的插件库-遇见你与你分享

    2024年01月19日
    浏览(51)
  • HTML5+CSS3实现小米商城 （完整版）

    HTML5+CSS3实现小米商城 （完整版）

    对于小米商城，也是自己初学前端的一个小作品吧，这个网页大概写了有三四天吧，总体感受就是写着还行，只要有耐心，就一定能成功。 毕竟第一次做，代码写的可能比较乱，命名可能也不是太规范，以后多加改正。 基本还原了原网页，并且只用到了CSS3和HTML5。 链接：

    2024年02月04日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包