移动端开发必备模块-flex布局

最新推荐文章于 2022-08-03 20:18:54 发布

Knock_BUG

最新推荐文章于 2022-08-03 20:18:54 发布

阅读量284

点赞数

分类专栏：知识点文章标签： css3 html5 flex

本文链接：https://blog.csdn.net/Knock_BUG/article/details/106057339

版权

知识点专栏收录该内容

7 篇文章 0 订阅

订阅专栏

需求背景

为解决 移动端 开发中

特殊布局
盒子内元素 垂直居中

的疑难问题，引入弹性盒布局模型，目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间

一、Flex布局是什么

Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。父级元素设定flex布局后，子元素 的float、clear、vertical-align属性将会全部失效。
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素称为 Flex 项目（flex item），简称”项目”。

总结原理：
通过给父级盒子添加flex元素，来控制子盒子的位置和排列方式

二、父级常见属性

1. flex-direction属性主轴方向
2. justify-content属性主轴上子元素排列方式
3. flex-wrap属性子元素是否换行
4. align-content属性侧轴上子元素排列方式（多行）
5. align-items属性侧轴上子元素排列方式（单行）
6. flex-flow属性复合属性，相当同时设置1、3

2.1 flex-direction属性

默认主轴方向是x轴方向，水平向右
默认侧轴方向是y轴方向，水平向左

属性值	说明
row	水平，从左到右，默认值
row-reverse	水平，从右到左
column	垂直，从上到下
column-reverse	垂直，从下到上

2.2 justify-content属性主轴上子元素排列方式

首先确定好主轴方向是哪一个

属性值	说明
flex-start	从头部开始，若主轴是x轴，从左到右，默认值
flex-end	从尾部开始排列
center	在主轴居中对齐，若主轴是x轴，则水平居中
space-around	每一个子盒子平分剩余空间
space-between	先两边贴边，在平分剩余空间

注意！
水平方向上，
justify-content:flex-end是贴着右边布局，顺序不反转，1234 =>>1234”
flex-direction:row-reverse是反转顺序，1234 =>> 4321

2.3 flex-wrap属性子元素是否换行

属性值	说明
nowrap	不换行，可能会缩小子盒子宽或者高属性，默认值
wrap	换行
wrap-reverse	换行，子盒子顺序会相反

2.4 align-content属性侧轴上子元素排列方式（多行）

多行与否看的是wrap 的值

属性值	说明
flex-start	在侧轴上从头部开始，默认值
flex-end	在侧轴上从尾部开始
center	在侧轴中间显示
space-around	子元素在侧轴均分剩下元素
space-between	子元素在侧轴先分布在两头，在均分剩下元素
stretch	拉伸

2.5 align-items属性侧轴上子元素排列方式（单行）

属性值	说明
flex-start	从头部开始，当x轴是主轴时，从上到下，默认值
flex-end	从尾部开始，当x轴是主轴时，从下到上
center	垂直居中
stretch	拉伸，x轴为主轴时候不要设置高度，y轴为主轴时候不要设置宽度

2.6 flex-flow属性复合属性，相当同时设置1、3

三、子集常见元素

3.1 flex属性

flex属性定义子项目分配剩余空间，用flex来表示占多少份数。

3.2 常见分配方式整理

常见分配方式1，顶部导航栏式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			section{
				display: flex;
				width: 60%;
				height: 150px;
				margin: 0 auto;
				background-color: antiquewhite;
			}
			section div:nth-child(1){
				width: 100px;
				height: 150px;
				margin: 0 10px;
				background-color: aqua;
			}
			section div:nth-child(2){
				flex: 1;
				background-color: #00FFFF;
			}
			section div:nth-child(3){
				width: 100px;
				height: 150px;
				margin: 0 10px;
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<section>
			<div></div>
			<div></div>
			<div></div>
		</section>
	</body>
</html>

在这里插入图片描述

常见分配方式2，五等均分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			section{
				display: flex;
				width: 60%;
				height: 150px;
				margin: 0 auto;
				background-color: antiquewhite;
			}
			div {
				flex: 1;
				background-color: aqua;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<section>
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
		</section>
	</body>
</html>

在这里插入图片描述

常见分配方式3，7/3分配

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			section{
				display: flex;
				width: 60%;
				height: 150px;
				margin: 0 auto;
				background-color: antiquewhite;
			}
			
			div:nth-child(1){
				flex: 7;
				background-color: aqua;
				margin: 10px;
			}
			div:nth-child(2){
				flex: 3;
				background-color: aqua;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<section>
			<div>7</div>
			<div>3</div>
		</section>
	</body>
</html>