CSS Flexbox详解

Flexbox是一个强大而灵活的布局，本篇文章主要对其进行学习了解。

1、Flexbox简介

Flexbox布局（Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即便他们的大小是未知或者是动态的。简单的理解，就是能够自动调整，计算元素在容器空间中的大小，并进行有效合理的布局。

Flexbox布局中有两个重要的概念：Flex容器和Flex项目。

Flex容器包含多个Flex项目，经过对Flex容器和Flex项目的具体属性进行设置，能够达到各类各样灵活的布局样式。

Flexbox使用

Flexbox的使用很是简单，只须要对Flex容器设置display:flex或者display:inline-flex，就能够具体操做使用Flexbox布局了。

下面以具体示例演示：

html代码

<div class="container">
		<div class="wrap">
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>
复制代码

css代码

.container {
	width: 70%;
	height: 500px;
	margin:20px auto;
	border: 1px solid black;
}
.container .wrap {
	display: flex;
	border: 3px solid #a448cf;
	margin:20px;
    width:80%;
	height:80%  
}
.container .wrap div {
	width:150px;
	height:150px;
	background-color: #c75a5a;
	margin:10px;
}
复制代码

2、Flex容器

首先介绍下Flex容器的具体属性以及具体的使用方式。

属性	值	含义
flex-direction	row || column || row-reverse || column-reverse	控制Flex项目沿着主轴（Main Axis）的排列方向
flex-wrap	wrap || nowrap || wrap-reverse	控制Flex项目是否换行显示
flex-flow	row wrap|| row nowrap || column wrap || column nowrap 等	flex-direction和flex-wrap两个属性的组合速记属性
justify-content	flex-start || flex-end || center || space-between || space-around	控制 Flex项目在Main-Axis上的对齐方式
align-items	flex-start || flex-end || center || stretch || baseline	控制Flex项目在Cross-Axis对齐方式
align-content	flex-start || flex-end || center || stretch	用于多行的Flex容器，控制Flex项目在Cross-Axis对齐方式

1. flex-direction

flex-direction属性控制Flex项目沿着主轴（Main Axis）的排列方向，能够是行（水平）、列（垂直）或者行和列的反向。

默认状况下flex-direction的属性值是row,具体排列方式以下：

可是当flex-direction的属性值是column，对应的主轴就应该垂直向下。

具体应用示例以下：

2. flex-wrap

flex-wrap属性控制Flex项目是否换行。默认状况下，Flex容器会在一行内容纳全部的Flex项目，由于flex-wrap属性的默认值是nowrap，也就是不换行。

具体应用示例以下：

其中 wrap-reverse表示Flex项目在容器中多行排列，只是方向是反的。

3. flex-flow

flex-flow是flex-direction和flex-wrap两个属性的速记属性。

具体再也不解释，看下面示例便可：

4. justify-content

justify-content属性，控制Flex项目在整个Main-Axis上的对齐方式。

justify-content的默认属性值是flex-start。

space-between让flex项目两端对齐。

space-around让每一个flex项目具备相同的空间

5. align-items

align-items控制Flex项目在Cross-Axis对齐方式。

align-items的默认值是stretch，让全部的Flex项目高度和Flex容器高度同样，铺展开。

baseline让全部flex项目在Cross-Axis上沿着他们本身的基线对齐。

其中stretch和baseline在不设置具体高度值，才会如上表现，不然会显示固定的高度。

align-content属性与align-items做用相同，不过该属性只针对多行，对单行无效。

3、Flex项目

接下来继续介绍Flex项目的具体属性及使用方法。

属性	值	含义
order	数值	根据order值从新排序。从底到高。
flex-grow	0 || positive number	控制Flex项目在容器有多余的空间如何放大
flex-shrink	0 || positive number	控制Flex项目在容器 没有额外空间又如何缩小
flex-basis	auto || % || em || rem || px	指定Flex项目的初始大小
align-self	auto || flex-start || flex-end || center || baseline || stretch	控制单个Flex项目在Cross-Axis对齐方式

1. order

order容许Flex项目在一个Flex容器中从新排序，属性默认值是0。

依据order值的大小进行排序，按照值从低到高依次排序。

默认状况下，排序以下：

当将方块1设置 order:1后，排序以下：

若是，多个Flex项目具备相同的order值，Flex项目从新排序是基于HTML源文件的位置进行排序。

以下所示，将方块1和方块2都设置为order:1。

2. flex-grow 和 flex-shrink

flex-grow和flex-shrink属性控制Flex项目在容器有多余的空间如何放大（扩展），在没有额外空间又如何缩小。

flex-grow和flex-shrink 的值能够为 0或者大于0的任何正数。

默认状况下，flex-grow属性值设置为0，表示Flex项目不会增加，填充Flex容器可用空间。

默认状况下，flex-shrink属性值设置为1，表示Flex项目会缩小，适应屏幕宽度。

若是把flex-grow的值设置为1，以下所示：

当多个flex项目在一行内，即不换行时，设置不一样的flex-grow和flex-shrink 值，对应的空间分配也不一样。

flex-grow

将每个item所设置的 grow 所有加起来，得到可用空间，而后除以总的grow值，获得单位分配空间。

根据每个item 设置的 grow 来算，若是一个item 的grow 为 6，那么 这个 item 在主轴上的尺寸就须要延伸 6*单位分配空间的大小。

flex-shrink

先将全部项目 按照 flex-shrink * item-size 的方式加起来 获得一个加权和，而后计算出 每一份 item 的 shrink比例: shrink比例 = flex-shrink * item-size / 以前的总和。最后每个item 减去这个 shrink比例 * 负可用空间。

在flex项目有min-width(height)和max-width(height)时，对应的项目要考虑上下限值，把剩余的伸缩值分配给其余项目。

3. flex-basis

flex-basis指定了 flex 元素在主轴方向上的初始大小，即决定了 flex项目内容的宽或者高（取决于主轴的方向）的尺寸大小。

默认状况，Flex项目的初始宽度由flex-basis的默认值决定，即：flex-basis: auto。Flex项目宽度的计算是基于内容的多少来自动计算。

flex-basis和width/height有必定的优先级，具体规则以下：

• flex-basis 的优先级比 width/height 非auto高
• width/height auto优先级等于 flex-basis，取二者中的最大值。

4. align-self

align-self 控制单个项目沿着Cross-Axis的对其方式。

除了auto以外，上述示例中flex容器设置了align-itmes：center。

auto 是将目标flex项目的值设置为父元素的 align-items值，或者若是该元素没有父元素的话，就设置为 stretch。上述示例中align-items：stretch。

4、总结

以上是对flexbox的总体介绍，能够看出其强大与灵活。除此以外，flexbox还有不少其余的特性以及问题，这里就再也不介绍，建议看如下两篇文章，写的很好，本文也主要参考了这两篇文章。

理解Flexbox：你须要知道的一切

深刻理解 flex 布局以及计算

若是想实践一下对flexbox的掌握，能够试着作百度前端技术学院中的这个做业。