flex布局基础

最新推荐文章于 2023-03-26 11:28:27 发布

xhsdnn

最新推荐文章于 2023-03-26 11:28:27 发布

阅读量449

点赞数

分类专栏： CSS3 文章标签： flex 布局水平居中垂直居中

本文链接：https://blog.csdn.net/qq_26733915/article/details/56479391

版权

CSS3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

flex布局相对传统布局来说要方便很多，尤其一些布局用传统布局实现起来很麻烦，而用flex就方便很多，但是使用flex布局之后一些float之类的样式就会失效。

以下demo代码都在这里。

使用flex布局首先要有一个容器，将容器样式设置为：

display: flex;

这个容器就叫“flex容器”，里面的子元素叫“flex项目”，之后就可以在这个容器上和项目上使用flex布局。

这里借用mozilla社区中的一张图：
这里写图片描述

一、flex属性简单概述

1. flex-direction

flex-direction是用来确定主轴的方向，参数有四种：row,row-reverse,column,column-reverse.

作用分别是水平从左到右(默认)、水平从右到左、垂直从上到下和垂直从下到上，栗子如下：

flex-direction

查看 flex-direction demo

2. flex-wrap

flex-wrap属性是用来确定换行的方式，参数有三种：nowrap,wrap,wrap-reverse.

作用分别是不换行(默认)、换行首行在上、换行首行在下，栗子如下：
flex-wrap

查看 flex-wrap demo

3. flex-flow

flex-flow是flex-direction和flex-wrap的简写方式，默认值是row nowrap，这个就不多说了，我只举一个栗子：

flex-flow

查看 flex-flow demo

4. justify-content

justify-content用来设置主轴的对齐方式，参数有五种：flex-start,flex-end,center,space-between,space-around.
前四个作用分别是左对齐(默认)、右对齐、居中对齐、两端对齐项目间距都相等。

space-around: 相邻项目的间距相同，两端的项目距两边的距离是项目间距一半。

可能不太好理解，配合栗子就明显了：

justify-content

查看 justify-content demo

5. align-content

align-content设置了有多根轴的布局方式，参数有六种：flex-start,flex-end,center,space-between,space-around,stretch.

如果只有一根轴线align-content是不生效的。

flex-start: 第一行沿侧轴起点开始布局，以后每一行紧跟上一行；
flex-end: 最后一行沿侧轴终点开始布局，之后每一行紧贴；
center: 所有行紧贴到一起，沿侧轴居中；
space-between: 上下两行紧贴侧轴起点和终点，每行间距相等；
space-around: 相邻两行间距相同，两侧间距为行间距的一半；
stretch: 不给高度，平均分配侧轴空间，让所有行刚好占据整个空间；给高度，会用空白填满本应拉伸而占据的空间，如栗子所示。

栗子如下：

align-content

查看 align-content demo

6. align-items

align-items用来定义项目在侧轴上的对其方式，属性的参数有屋种：flex-start,flex-end,center,baseline,stretch.
前四个作用分别是：侧轴起点对齐、侧轴终点对齐、侧轴居中对齐、首行文字基线对齐。

stretch: 为默认值，如果不给高度，高度将为容器高度。

栗子：

align-items

查看 align-items demo

7.order

order用来定义容器里面项目排布的顺序，值小的排在前面(默认是0)。

栗子：

order

查看 order demo

8. flex-grow

flex-grow是用来定义项目的拉伸比例(负值无效)。

flex-grow默认值是0，如果有一个是1其余的都是0，那么值为1的项目将占据整个剩余空间；如果所有项目的值都相同，将平分剩余空间；如果有一个值为2其余为1，那么值为2的项目占据的剩余空间是其他的两倍。

这里做一个简单的说明，所谓剩余空间的算法：就以下面栗子的第三个为例，整个容器宽为400px,里面三个项目的初始高度都给的100px,那么剩余空间大小为100(400-100-100-100)px,所以说flex-grow为2的项目占据的剩余空间为50px，剩下的每个项目占据25px的剩余空间,最终flex-grow为2的宽度为150(100+50)px,剩余项目宽度为125(100+25)px；以此类推，如果有一个项目flex-grow为3，剩余项目的都为1，那么值为3的项目占据的剩余空间将是其他项目的三倍。

栗子：

flex-grow

查看 flex-grow demo

9. flex-shrink

flex-shrink用来设置项目是否缩小。

默认值为1，如果项目过多将等比例缩小；如果flex-shrink为0，那么为0的项目将不缩小，其他项目等比例缩小。

栗子：

flex-shrink

查看 flex-shrink demo

10. flex-basis

flex-basis属性用来设置项目占据主轴空间的大小(负值无效)。

可以使用绝对的px，也可以使用百分比(百分比以容器的大小计算)。

栗子：

flex-basis

查看 flex-basis demo

11. align-self

align-self来控制单个项目的对齐方式，默认为auto(继承align-items)，参数与align-items相同，用法也相同就不过多赘述了直接看栗子。

栗子：

align-self

查看 align-self demo

二、基本布局

这里举两个用flex实现的基本布局的栗子。

1. 水平垂直居中

水平垂直居中

查看水平垂直居中 demo

<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>水平垂直居中</title>
	</head>
	<style>
		* {
			box-sizing: border-box;
			margin:0;
			padding: 0;
		}
		html, body, .container {
			height: 100%;
		}
		.container {
			display: flex;
			align-items: center; /*垂直居中*/
			justify-content: center; /*水平居中*/
		}
		.center {
			background-color: #0271bc;
			width: 200px;
			height: 200px;
		}
	</style>
	<body>
		<div class="container">
			<div class="center"></div>
		</div>
	</body>
</html>

2. 三栏布局

三栏布局

查看三栏布局 demo

<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>三栏布局</title>
	</head>
	<style>
		* {
			box-sizing: border-box;
			margin:0;
			padding: 0;
		}
		html, body, .container {
			height: 100%;
		}
		.container {
			display: flex;
			align-itmes: stretch; /*不设置高度占据整个容器高度*/
		}
		.left, .right {
			width: 200px;
			background-color: #d4d4d4;
		}
		.center {
			background-color: #0271bc;
			flex-grow: 1; /*占据剩余宽度*/
		}
	</style>
	<body>
		<div class="container">
			<div class="left"></div>
			<div class="center"></div>
			<div class="right"></div>
		</div>
	</body>
</html>

有关上述所有代码，可以点击查看。

xhsdnn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex布局基础

flex布局相对传统布局来说要方便很多，尤其一些布局用传统布局实现起来很麻烦，而用flex就方便很多，但是使用flex布局之后一些float之类的样式就会失效。以下demo代码都在这里。使用flex布局首先要有一个容器，将容器样式设置为：display: flex;这个容器就叫“flex容器”，里面的子元素叫“flex项目”，之后就可以在这个容器上和项目上使用flex布局。这里借用mozil
复制链接

扫一扫