Flex 布局

最新推荐文章于 2022-08-13 10:43:14 发布

iGma_e

最新推荐文章于 2022-08-13 10:43:14 发布

阅读量70

点赞数

分类专栏： Web前端开发文章标签： html5 css html

本文链接：https://blog.csdn.net/Mr_peng13/article/details/120689903

版权

Web前端开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、准备工作

创建项目

创建文件

index.html 文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Flex布局</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<div class="box">
			<div class="item blue">box1</div>
			<div class="item yellow">box2</div>
			<div class="item aqua">box3</div>
		</div>
	</body>
</html>

index.css 文件

*
{
	margin: 0;
	padding: 0;
}

.box
{
	width: 350px;
	height: 350px;
	margin: auto;
	background-color: red;
}

.item
{
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
}

.blue
{
	background-color: blue;
}

.yellow
{
	background-color: yellow;
}

.aqua
{
	background-color: aqua;
}

当前效果

说明：
1. 红色盒子是 350 * 350px 的父级元素。
2. 三个小盒子的尺寸为 100 * 100px
3. 默认情况下，三个小盒子在父级标签内是纵向排列的，这也是所有块级标签的排序方式。
4. 一些需求会要求我们把一个父级标签内的所有子级标签横向排列，这时可以采用 Flex 布局。

二、启动 flex 布局

什么是 Flex 布局
1. Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
2. 任何一个容器都可以指定为 Flex 布局。
3. 行内元素也可以使用 Flex 布局。
4. 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
块级元素启动 Flex 布局
```
.box
{
	display: flex;
}
```
行级元素启动 Flex 布局
```
.box
{
	display: inline-flex;
}
```

修改项目代码，启动 Flex 布局

index.css

.box
{
	width: 350px;
	height: 350px;
	margin: auto;
	background-color: red;
	display: flex;
}

页面

三、Flex 布局六大属性

属性：
1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content
flex-direction
1. flex-direction 属性决定主轴的方向（即项目的排列方向）
```
.box
{
	flex-direction: row | row-reverse | column | column-reverse;
}
```
2. 属性值：
  1. row（默认值）：主轴为水平方向，起点在左端。
  2. row-reverse：主轴为水平方向，起点在右端。
  3. column：主轴为垂直方向，起点在上沿。
  4. column-reverse：主轴为垂直方向，起点在下沿。
flex-wrap
1. 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap 属性定义，如果一条轴线排不下，如何换行。
```
.box
{
	flex-wrap: nowrap | wrap | wrap-reverse;
}
```
2. 属性值：
  1. nowrap（默认）：不换行。
  2. wrap：换行，第一行在上方。
  3. wrap-reverse：换行，第一行在下方。
flex-flow
1. flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap。
2. 属性值
```
.box
{
	flex-flow: <flex-direction> || <flex-wrap>;
}
```
justify-content
1. justify-content 属性定义了项目在主轴上的对齐方式。
```
.box
{
	justify-content: flex-start | flex-end | center | space-between | space-around;
}
```
2. 属性值：
  1. flex-start（默认值）：左对齐
  2. flex-end：右对齐
  3. center：居中
  4. space-between：两端对齐，项目之间的间隔都相等。
  5. space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items
1. align-items 属性定义项目在交叉轴上如何对齐。
```
.box
{
	align-items: flex-start | flex-end | center | baseline | stretch;
}
```
2. 属性值：
  1. flex-start：交叉轴的起点对齐。
  2. flex-end：交叉轴的终点对齐。
  3. center：交叉轴的中点对齐。
  4. baseline: 项目的第一行文字的基线对齐。
  5. stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content
1. align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
```
.box
{
	align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
```
2. 属性值：
  1. flex-start：与交叉轴的起点对齐。
  2. flex-end：与交叉轴的终点对齐。
  3. center：与交叉轴的中点对齐。
  4. space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  5. space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  6. stretch（默认值）：轴线占满整个交叉轴。

iGma_e

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Flex 布局

一、准备工作创建项目创建文件index.html 文件<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Flex布局</title> <link rel="stylesheet" type="text/css" href="css/index.css"/> </head> <body>
复制链接

扫一扫