【CSS】Flex弹性布局-CSDN博客

本文链接：https://blog.csdn.net/2203_75920270/article/details/135747658

本文详细介绍了Flex弹性布局的基础概念、主要属性如justify-content、align-items、flex-direction等的用法，以及order、flex-grow、flex-shrink、flex-basis和align-self等项目的常见属性，通过实例演示了如何灵活运用这些属性实现响应式布局。

摘要由CSDN通过智能技术生成

学习目标

掌握Flex弹性布局的常用属性
掌握div+flex基础布局
掌握Flex布局的基本语法
掌握运用Flex布局实现各种响应式布局的方法

了解弹性布局

什么是弹性布局？

传统的布局方法，基于盒状模型，依赖display属性、position属性以及float属性，因此要实现特殊布局就非常不方便。比如，垂直居中就不容易实现。Flex布局则可以简便、完整、响应式地实现各种页面布局。

（1）Flex 布局的定义

Flex是FlexibleBox的缩写，意为“弹性布局”，任何一个容器都可以指定为Flex布局，示例代码如下。

.box{

display: flex;

}

（2）Flex布局的基本概念

采用Flex布局的元素，简称“容器”。它的所有子元素自动成为容器成员，简称“项目”。

弹性布局：在父级元素设置display:flex; 弹性布局属性，可以使子元素弹性伸缩。

注意：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

任何一个被设置为弹性布局的容器会有两条抽象的轴(X,Y轴)。水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）为main start，结束位置为main end；交叉轴的开始位置为cross start，结束位置为cross end。项目默认沿主轴排列。单个项目占据的主轴空间为main size，占据的交叉轴空间为cross size。

弹性布局的容器的常用属性

属性	说明	属性值
display	实施弹性布局	flex 或 inline-flex 属性
justify-content	设置项目在主轴方向上的对齐方式，以及分配项目之间及其周围多余的空间	flex-start（默认值）：左对齐 flex-end：右对齐 center：居中 space-between：两端对齐，项目之间的间隔都相等。 space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items	设置项目在行中的对齐方式	flex-start：交叉轴的起点对齐。 flex-end：交叉轴的终点对齐。 center：交叉轴的中点对齐。 baseline: 项目的第一行文字的基线对齐。 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
flex-direction	设置项目的排列方向	row横向轴（水平） row-reverse 主轴方向从右到左排列 column 主轴为纵向纵（垂直） column-reverse 交叉轴上从下往上排列
flex-wrap	设置项目是否换行	nowrap不换行或 wrap换行
align-content	当多行排列时，设置行在交叉轴方向上的对齐方式，以及分配项目之间及其周围多余的空间	stretch

弹性布局常用属性示例

flex-direction

设置项目的主轴方向，若没有设置，则默认为横向flex-direction的值为row。项目排列方式首先就是要设置flex-direction，以下的都是要依托于这个。

justify-content（多行）

设置项目在主轴方向上的子元素的排列方式

align-content

与justify-content有相似之处，align-content在多行排列时使用。

注意：拉伸stretch（子盒子不能设置高度）

align-items（单行时使用）

设置项目侧轴上的子元素的排列方式

flex-wrap

是一个比较简单的属性

项目的常见属性

order：

设置项目的排列顺序，数值越小排列约靠前，默认值为0；

eg：

<html>
<head>
	<title>order</title>
	<meta charset="utf-8">
	<style type="text/css">
		.box{
			display:-webkit-flex;
			display:flex;
			margin:0;
			padding:10px;
			width: 250px;
			list-style:none;
			background-color:#eee;
			border: 1px solid black;
			float: left;
			margin-right: 20px;
		}
		.box li{
			width:50px;
			height:50px;
			background: #00FF99;
			border: 1px solid #006633;
			text-align:center;
		}
		#box li:nth-child(3){
			-webkit-order:-1;
			order:-1;
		}
	</style>
</head>
<body>
	<ul id="box1" class="box">
		<li>a</li>
		<li>b</li>
		<li>c</li>
		<li>d</li>
		<li>e</li>
	</ul>

	<ul id="box" class="box">
		<li>a</li>
		<li>b</li>
		<li>c</li>
		<li>d</li>
		<li>e</li>
	</ul>
</body>
</html>

flex-grow

定义项目放大比例，默认值为0。值大于0时，按比重放大，负数也无效

注意：只有当容器主轴上存在剩余空间时，flex-grow才能生效。

flex-shrinik

定义项目放大比例，默认值为0。值大于0时，按比重放大，负数也无效

注意：当主轴空间不足且不允许换行时才生效

flex-basis

指定了 flex 元素在主轴方向上的初始尺寸,需要注意的是该属性会根据它计算是否换行，默认值为项目的本来大小auto，所以原来写的宽高就会不起作用。

<html>
<head>
	<title>flex-basis</title>
	<meta charset="utf-8">
	<style type="text/css">
		.box{
			display:-webkit-flex;
			display:flex;
			width:510px;
			margin:0;
			padding:10px;
			list-style:none;
			border: 1px solid black;
		}
		.box li{
			width:50px;
			height:50px;
			background: #00FF99;
			border: 1px solid #006633;
			text-align:center;lign:center;
		}
		#box li:nth-child(3){
			-webkit-flex-basis:300px;
			flex-basis:300px;
		}
	</style>
</head>
<body>
	<ul id="box1" class="box">
		<li>a</li>
		<li>b</li>
		<li>c</li>
		<li>d</li>
		<li>e</li>
	</ul>
	<p></p>
	<ul id="box" class="box">
		<li>a</li>
		<li>b</li>
		<li>c</li>
		<li>d</li>
		<li>e</li>
	</ul>
</body>
</html>

align-self

该属性允许单个项目有与其他项目不一样的对齐方式，可覆盖交叉轴aligu-items（对齐方式）的属性。如果项目没有写宽高，那默认占据所有宽高。


<!DOCTYPE html>
<html>
<head>
	<title>align-self</title>
	<meta charset="utf-8">
	<style type="text/css">
		.box{
			display:-webkit-flex;
			display:flex;
			width:550px;
			height:100px;
			margin:0;
			padding:10px;
			list-style:none;
			background-color:#eee;
			border: 1px solid black;
		}
		.box li{
			margin:5px;
			padding:10px;
			background:#00FF99;
			text-align:center;
			border: 1px solid #006633;
		}
		.box li:nth-child(1){
			-webkit-align-self: flex-end;
			align-self: flex-end;
		}
		.box li:nth-child(2){
			-webkit-align-self: center;
			align-self: center;
		}
		.box li:nth-child(3){
			-webkit-align-self: flex-start;
			align-self: flex-start;
		}
		.box li:nth-child(4){
			-webkit-align-self: baseline;
			align-self: baseline;
		}
		.box li:nth-child(5){
			-webkit-align-self: stretch;
			align-self: stretch;
		}
		.box li:nth-child(6){
			-webkit-align-self: auto;
			align-self: auto;
		}
	</style>
</head>
<body>
	<ul id="box" class="box">
		<li>flex-end;</li>
		<li>center</li>
		<li>flex-start</li>
		<li>baseline</li>
		<li>stretch</li>
		<li>auto</li>
	</ul>
</body>
</html>