Flexbox布局完全指南

Sharer: Kevin's-Notes February 25, 2019 at 2:47 am

Link Share :https://wuxinhua.com/2019/02/25/The-Guide-To-Flexbox/ - via RSS

为什么写这样一篇文章

欢迎来到 flexbox 的世界。我很乐意接受新的思想、观念，或者尝试新的工具，虽然这个过程并不是很顺利。使用 flexbox 对页面进行布局的时间不是很长，发现它真的很好用，日常使用还不够熟练，还得经常翻阮老师的Flex 布局教程：语法篇，于是索性自己总结一篇，一边在实际应用中使用flexbox，一边学习基础理论知识。本篇适用于所有刚接触到 flexbox 布局的同学，也适用于那些想更近一步了解 flexbox 的人，我将尽可能详细地用文字、图片、代码介绍、学习 flexbox 布局。

一些基础知识

display 属性

可以说display是开发者最为熟悉的一个属性，也是最为重要的一个属性，它指定元素的显示行为，准备得来说是定了外部和内部显示属性的规则，来看 MDN 上对它的定义：

display CSS 属性指定了元素的显示类型，它包含两类基础特征，用于指定元素怎样生成盒模型——外部显示类型定义了元素怎样参与流式布局的处理，内部显示类型定义了元素内子元素的布局方式。

例如我们常用的一些：

display: none;  
display: block;  
display: inline;  
display: inline-block;  
dispaly: table;  
display: flex;  
display: grid;

事实上每一个HTML标签都有一个默认的 display 属性值，例如：<div>、<p>、<ul> 等默认是block 块状元素，而 span、img、svg 等默认 inline 行内元素，二者比较大的区别：

block元素：

block 块状元素会占满整行的空间；
常规布局中块级是基于竖直方向的，即紧接着的另一个块级元素会另起一行排列；
能被设置 width、height 宽高；
能作为其它块状元素、行内元素的父标签；

inline元素：

inline 行内元素则刚好相反，只占用它们需要的空间;
内联基于水平方向，行内元素一个紧挨着另一个；
不能被设置 width、height 宽高；
只能作为行内元素的父标签；

BFC与FFC

flexbox 布局重新定义了格式化上下文，这套规则叫 FFC(Flex Formatting Contexts),Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)
FFC类似于 BFC(block formatting context)，BFC对于前端开发来说一个必须了解掌握的概念，这里只做简单描述：

BFC(block formatting context”块级格式化上下文”)

内部的块盒子会在垂直方向，一个接一个的布局
box垂直方向的距离由margin决定，两个相邻的box margin会重叠
BFC是一个隔离的独立容器，容器里的子元素不会影响到外面的元素，反之亦然
计算BFC的高度时，浮动元素也参与计算

FFC(Flex Formatting Contexts”自适应格式化上下文”)

display 值为 flex 或 inline-flex 的元素会变成一个 flex 容器，内部元素变成子项目。容器是一个相对独立的渲染区域，会按照自适应渲染规则来布局。

flex基本概念

什么是flexbox

flex容器

flexbox 主要由 flex 容器和 flex 子项目组成，对应的有分别作用于这两者的一些属性；想要使用flex布局，得先指定一个容器，这样容器内的元素就能使用flex来进行布局，容器有两个取值 flex 和 inline-flex, 简单地来说，如果你的容器是一个块级元素，可以使用 flex，而行内元素则可以使用 inline- flex，值得注意的是二者均能将容器实现flex布局，不同的地方在用 flex 将会使容器变为块级元素，而 inline-flex 使容器变成行内元素。

.container {  
  display: flex | inline-flex;  
}

子项

有了容器相应得也就有了容器内的item子项，

flex 属性

# flex-direction

flex-direction 属性控制Flex项目沿着主轴（Main Axis）、侧轴（Cross-Axis）的排列方向，在flex 世界中存在两个主轴：Main-Axis（主轴）和 Cross-Axis（侧轴）它有以下选项：

flex-direction: row(默认) | row-reverse | column | column-reverse

row flex容器的主轴与文本方向相同，以行（水平）方向排列:

column 以列（垂直）方向排列:

而 row-reverse和column-reverse 分别是行列的反向，如下图所示:

# flex-wrap

flex-wrap: wrap(默认) | nowrap | wrap-reverse

决定 flex项目在容器内是否不换行排列，nowrap 默认是项目不进行换行:

当 flex 容器无法在一行内容纳所有的 flex 项目时会进行换行:

wrap-reverse 同样是多行排列，只是方向是相反的:

# flex-flow

flex-flow 是一个 flex-direction 及 Flex-wrap 组合简写。默认值为：row nowrap，例如：

flex-flow: row wrap;  
// 等同于  
flex-direction: row  
flex-wrap: wrap

# justify-content

justify-content 定义了项目在主轴上的对齐方式。取值分别是：flex-start（左对齐）、 flex- end（右对齐）、center（居中）、 space-between（两端对齐）、space-around（均分间距，间距两侧对齐）、space- evenly（均分间距）均匀排列每个元素，每个元素之间的间隔相等

justify-content: flex-start | flex-end | center | space-between | space-around

justify-content: flex-start 起始处左对齐

justify-content: center 居中对齐

justify-content: center 右对齐

justify-content: space-between 两端对齐

justify-content: space-between 间隔相等

# align-items

align-items 定义项目在交叉轴方向上的对齐方式

flex-start：项目元素向侧轴起点对齐、flex-end：元素向侧轴终点对齐。

align-items: stretch | flex-start | flex-end | center | baseline;

flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline: 项目基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

以上几个都是设置在容器上的一些属性，接下来看下项目上可设置的属性：

order
flex-grow
flex-shrink
flex-basis
flex
align-self

# order

order定义项目在容器里的排列顺序，默认为 0，数字越小，排得越前

如何控制容器内的“剩余空间”，这里需要使用到三个很重要的属性：
flex-basis、flex-grow、flex-shrink

# flex-basis

这个属性日常用得比较少，其实就是 width 属性的替代品，并且优先级 flex-basis > width，即在分配空间前会预留出 flex-basis 的空间，它的默认值是 aotu，即项目本来的大小。

# flex-grow

flex-grow 能够控制项目在容器中所占空间的大小，它接受一个数字值，默认为0。如果其它项目flex-grow 设置为1，其中一个子元素的值是2，在空间允许的条件下它将占用前者两倍的空间。

# flex-shrink

flex-shrink 前面的grow是扩大，对应的shrink是缩小，即如果容器空间不足，项目将缩小宽度来适应容器，该属性定义了项目的缩小比例，默认为 1，为0 表示不减少，值越大缩小得就越厉害，

# flex

flex 属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。

# align-self

align-self 允许单个项目和其它项目有不一样的align对齐方式，默认值为auto，表示继承父元素的align- items属性。可选的属性值即align-items属性值：

align-self: auto | flex-start | flex-end | center | baseline | stretch;

(#未完待续)

附录

参考学习的一些资料：

1、理解Flexbox：你需要知道的一切
2、flexbox
3、flexboxfroggy一款练习flexbox的小游戏
4、display MDN
5、写给自己看的display: flex布局教程
6、The Flexbox Guide

作者暂无likerid, 赞赏暂由本网站代持，当作者有likerid后会全部转账给作者（我们会尽力而为）。

Tips: Until now, everytime you want to store your article, we will help you store it in Filecoin network. In the future, you can store it in Filecoin network using your own filecoin.

Support author:
Author's Filecoin address:
Or you can use Likecoin to support author:

0 0