Flexbox 完整指南（css flex）

开始

本篇文章希望能够让大家都很清楚理解 FlexBox，很多时候小伙伴们，可能因为理解的不够清楚，从而在编写代码中，需要一个个的尝试。

下面给大家推荐一个 Github 比较好的一个** flexbox** 工具，以及演示地址，可以在线演示，帮助大家更快的理解。

演示地址：https://jonathantneal.github.io/flexibility/

Github地址：https://github.com/sin-ning/flexibility

基础知识和术语

container 容器

也就所我们所谓的 parentNode，用来承载自容器的父级容器都可以叫做 container。

image

items 每一项

可以理解为 childrenNode，每个子节点。

image

我们在开始使用的回收需要将 display 设置为 flex

.container {
  display: flex; /* or inline-flex */
}

order 排序

排序规则，可用于每个节点间的排序，无论你节点顺序是什么，只要加上 order 设置数值，就会按数值排序。

如：节点 a = 3 b=1 c=2 那么最终展示的顺序是 b c a

.item {
  order: ; /* default is 0 */
}

image

flex-direction

flex 方向，可用于不同的排列方式

• row（默认）：从左到右ltr; 从右到左rtl
• row-reverse：从右到左ltr; 从左到右rtl
• column：同样row但从上到下
• column-reverse：同样row-reverse但从下到上

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

image

flex-grow

这定义了Flex项目在必要时增长的能力。它接受一个无比的值作为一个比例。它规定了项目应占用的Flex容器内可用空间量。

如果所有项目都flex-grow设置为1，则容器中的剩余空间将平均分配给所有子项。如果其中一个孩子的值为2，则剩余空间将占用其他空间的两倍（或者至少会尝试）。

.item {
  flex-grow: ; /* default 0 */
}

image

flex-wrap

默认情况下，flex项目都会尝试适合一行。您可以更改它并允许项目根据需要使用此属性进行换行。

• nowrap （默认值）：所有弹性项目都在一行上
• wrap：flex项目将从上到下包裹到多行。
• wrap-reverse：flex项目将从下到上包裹多行。

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

image

justify-content

• flex-start （默认值）：项目朝向起始行打包
• flex-end：物品被打包到终点线
• center：项目沿着线居中
• space-between：物品均匀分布在线上; 第一项是在起始行，最后一项是在结束行
• space-around：项目均匀分布在行周围，空间相等。请注意，在视觉上空间不相等，因为所有项目在两侧都有相等的空间。第一个项目将在容器边缘上有一个空间单位，但在下一个项目之间有两个单位的空间，因为下一个项目有自己适用的间距。
• space-evenly：项目是分布的，以便任何两个项目之间的间距（和边缘的空间）相等。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

image

align-items

这允许align-items为各个弹性项覆盖默认对齐（或指定的对齐）。

请参阅align-items说明以了解可用的值。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

请注意float，clear并且vertical-align对弹性项目没有影响。

image

align-items

• flex-start：项目的交叉开始边缘边缘放置在交叉起始线上
• flex-end：项目的跨端边距边缘放在十字线上
• center：项目以横轴为中心
• baseline：项目已对齐，例如其基线对齐
• stretch （默认）：拉伸以填充容器（仍然尊重最小宽度/最大宽度）

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

image

align-content

• flex-start：行打包到容器的开头
• flex-end：行打包到容器的末尾
• center：行包装到容器的中心
• space-between：线条均匀分布; 第一行是容器的开头，而最后一行是在最后一行
• space-around：线条均匀分布，每条线周围的空间相等
• stretch （默认值）：线条拉伸以占用剩余空间

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

image