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

CSS3 Flexbox

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

这篇具有很好参考价值的文章主要介绍了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模板网！

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

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

相关文章

  • HTML5CSS3提高

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

    2024年02月14日
    浏览(49)

  • html5和css3的新特性

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

    2024年02月11日
    浏览(41)
  • h5(html5)+css3前端笔记二

    h5(html5)+css3前端笔记二

    一、表格标签 表格的主要作用： 表格主要用于 显示、展示数据 ，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。 1. table/table 用来定义表格的标签

    2024年02月14日
    浏览(60)
  • HTML5+CSS3实现小米商城 （完整版）

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

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

    2024年02月04日
    浏览(47)
  • 响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 第1章 HTML5+CSS3初体验 项目1-1 三栏布局页面

    响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 第1章 HTML5+CSS3初体验 项目1-1 三栏布局页面

    三栏布局是一种常用的网页布局结构。 除了头部区域、底部区域外，中间的区域（主体区域）划分成了三个栏目，分别是左侧边栏、内容区域和右侧边栏，这三个栏目就构成了三栏布局。当浏览器的宽度发声变化时，页面中左侧边栏和右侧边栏的宽度固定不变，而内容区域的

    2024年01月17日
    浏览(81)
  • 响应式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日
    浏览(47)

  • 响应式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日
    浏览(46)
  • 携程网移动端首页制作（html5+css3）

    携程网移动端首页制作（html5+css3）

    主要是自己做记录，记录做的过程以及遇到的一些问题 1.首先引入normal.css（Normalize.css: Make browsers render all elements more consistently.）。其中搜索符号使用图标，阿里图标（iconfont-阿里巴巴矢量图标库）：打开网址搜索需要的图标，添加到自己的项目中，点击“download code” ，下载

    2024年02月05日
    浏览(42)
  • HTML5+CSS3实现小米官网（完整版）

    HTML5+CSS3实现小米官网（完整版）

    小米官网其实是一个结构非常简单的网页，相比与小米商城，难度降低了很多很多。我也写过一次小米商城，可以移步到我的主页。本篇文章简单分析一下小米官网的静态结构，文章末尾附源代码和素材。 先展示一下页面的效果吧！ 1. 头部导航栏 头部导航栏可以用 fixed 定位

    2024年02月13日
    浏览(73)

  • 【前端基础篇】HTML5 + CSS3 入门知识

    万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改（这是一项推荐标准、外语原文：W3C Recommendation） HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。 HTML5的设计目的是为了在移动设备上支持多媒体。 HTML5 简

    2024年02月09日
    浏览(76)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包