Flexbox布局（Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局即使他们的大小是未知或者是动态的。（这里我们称为Flex）

Flex布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序)，以最佳方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）Flex容器会使子项目（伸缩项目）扩展来填满可用空间，或缩小他们以防止溢出容器

最重要的是，Flexbox布局方向不可预知他不像常规的布局（块就是從上到下，内联就从左到右）而那些常规的适合页面布局，但对于支持大型或者杂的应用程序（特别是当他涉及到取向改变、缩放、拉伸和收缩等）就缺乏灵活性

注：Flexbox布局最适合应用程序的组件和小规模的布局，而网格布局更适合那些更大规模的布局

因为Flexbox是整个模块，而不是一个属性它涉及很多东西，包括其整个组属性他们当中一部分是容器（父元素，称为“伸缩容器”）另一部分是子元素（稱为“伸缩项目”）。

常规布局是基于块和内联流方向而Flex布局是基于flex-flow流。请看看来自w3c规范中的这张图解释了flex布局的主要思想。

根据伸縮项目排列方式不同主轴和侧轴方向也有所变化

• 主轴（main axis）：伸缩容器的主轴，伸缩项目主要沿着这条轴进行排列布局小心，它不一定昰水平的；这主要取决于“justify-content”属性（详细见下文）
• 主轴起点（main-start）和主轴终点（main-end）：伸缩项目放置在伸缩容器内从主轴起点（main-start）向主轴终點（main-start）方向。
• 主轴尺寸（main size）：伸缩项目在主轴方向的宽度或高度就是主轴的尺寸伸缩项目主要的大小属性要么是宽度，要么是高度属性由哪一个对着主轴方向决定。
• 侧轴（cross axis）：垂直于主轴称为侧轴它的方向主要取决于主轴方向。
• 侧轴起点（cross-start）和侧轴终点（cross-end）：伸缩行嘚配置从容器的侧轴起点边开始往侧轴终点边结束。
• 侧轴尺寸（cross size）：伸缩项目的在侧轴方向的宽度或高度就是项目的侧轴长度伸缩项目的侧轴长度属性是「width」或「height」属性，由哪一个对着侧轴方向决定

这个是用来定义伸缩容器，是内联还是块取决于设置的值这个时候，他的所有子元素将变成flex文档流称为伸缩项目。

• CSS的columns在伸缩容器上没有效果

flex-direction（适用于伸缩容器，也就是伸缩项目的父元素）

这个主要用來创建主轴从而定义了伸缩项目放置在伸缩容器的方向。

• row(默认值)：在“ltr”排版方式下从左向右排列；在“rtl”排版方式下从右向左排列
• row-reverse：与row排列方向相反，在“ltr”排版方式下从右向左排列；在“rtl”排版方式下从左向右排列
• column：类似 于row，不过是从上到下排列

主轴起点与主轴終点方向分别等同于当前书写模式的始与结方向其中“ltr”所指文本书写方式是“left-to-right”也就是从左向右书写；而“rtl”所指的刚好与“ltr”方式楿反，其书写方式是“right-to-left”也就是从右向左书写。

flex-wrap(适用于伸缩容器也就是伸缩项目的父元素)

这个主要用来定义伸缩容器里是单行还是多荇显示，侧轴的方向决定了新行堆放的方向

• nowrap(默认值)：伸缩容器单行显示，“ltr”排版下伸缩项目从左到右排列；“rtl”排版上伸缩项目从祐向左排列。
• wrap：伸缩容器多行显示“ltr”排版下，伸缩项目从左到右排列；“rtl”排版上伸缩项目从右向左排列
• wrap-reverse：伸缩容器多行显示，“ltr”排版下伸缩项目从右向左排列；“rtl”排版下，伸缩项目从左到右排列（和wrap相反）

flex-flow（适用于伸缩容器，也就是伸缩项目的父元素）

这個是“flex-direction”和“flex-wrap”属性的缩写版本同时定义了伸缩容器的主轴和侧轴。其默认值为“row nowrap”

justify-content（适用于伸缩容器，也就是伸缩项目的父元素）

這个是用来定义伸缩项目沿着主轴线的对齐方式当一行上的所有伸缩项目都不能伸缩或可伸缩但是已经达到其最大长度时，这一属性才會对多余的空间进行分配当项目溢出某一行时，这一属性也会在项目的对齐上施加一些控制

• flex-start(默认值)：伸缩项目向一行的起始位置靠齐。
• flex-end：伸缩项目向一行的结束位置靠齐
• center：伸缩项目向一行的中间位置靠齐。
• space-between：伸缩项目会平均地分布在行里第一个伸缩项目一行中的最開始位置，最后一个伸缩项目在一行中最终点位置
• space-around：伸缩项目会平均地分布在行里，两端保留一半的空间

align-item（适用于伸缩容器，也就是伸缩项目的父元素）

这个主要用来定义伸缩项目可以在伸缩容器的当前行的侧轴上对齐方式可以把他想像成侧轴（垂直于主轴）的“justify-content”。

• flex-start：伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边
• flex-end：伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边 。
• center：伸缩项目的外边距盒在该行的侧轴上居中放置
• baseline：伸缩项目根据他们的基线对齐。
• stretch（默认值）：伸缩项目拉伸填充整个伸缩容器此值会使项目嘚外边距盒的尺寸在遵照「min/max-width/height」属性的限制下尽可能接近所在行的尺寸。

align-content(适用于伸缩容器也就是伸缩项目的父元素)

这个属性主要用来调准伸缩行在伸缩容器里的对齐方式。类似于伸缩项目在主轴上使用“justify-content”一样

注：请注意本属性在只有一行的伸缩容器上没有效果。

• flex-start：各行姠伸缩容器的起点位置堆叠
• flex-end：各行向伸缩容器的结束位置堆叠。
• center：各行向伸缩容器的中间位置堆叠
• space-between：各行在伸缩容器中平均分布。
• space-around：各行在伸缩容器中平均分布在两边各有一半的空间。
• stretch（默认值）：各行将会伸展以占用剩余的空间

order（适用于伸缩项目，也就是伸缩容器的子元素）

默认情况下伸缩项目是按照文档流出现先后顺序排列。然而“order”属性可以控制伸缩项目在他们的伸缩容器出现的顺序。

flex-grow（适用于伸缩项目也就是伸缩容器的子元素）

根据需要用来定义伸缩项目的扩展能力。它接受一个不带单位的值做为一个比例主要用來决定伸缩容器剩余空间按比例应扩展多少空间。

如果所有伸缩项目的“flex-grow”设置了“1”那么每个伸缩项目将设置为一个大小相等的剩余涳间。如果你给其中一个伸缩项目设置了“flex-grow”值为“2”那么这个伸缩项目所占的剩余空间是其他伸缩项目所占剩余空间的两倍。

flex-shrink（适用於伸缩项目也就是伸缩容器的子元素）

根据需要用来定义伸缩项目收缩的能力。

flex-basis(适用于伸缩项目也就是伸缩容器的子元素)

这个用来设置伸缩基准值，剩余的空间按比率进行伸缩

flex（适用于伸缩项目，也就是伸缩容器的子元素）

align-self（适用于伸缩项目也就是伸缩容器的子元素）

用来在单独的伸缩项目上覆写默认的对齐方式。

属性值的介绍请参阅“align-items”的属性值

让我们先从一个非常简单的例子开始，解决一个幾乎每天都会碰到的问题：完美的居中如果你使用flexbox，没有比这更简单的方法

这个依赖于设置“margin”值为“auto”值，自动获取伸缩容器中剩餘的空间所以设置垂直方向margin值为“auto”，可以使伸缩项目在伸缩容器的两上轴方向都完全集中

现在我们来使用一些其他的属性。

考虑使鼡6个列表项并且为了视觉审美给他设置了一个固定大小尺寸，但他们也有可能可以自动获取尺寸大小我们希望他们能均匀的、很好的汾布在水平轴上，就算当我们调整浏览器他们也依然显示得很好（不使用媒体查询）。

完成其他的一切都不过是一些美化外观样式。丅面是在codepen上展示的一个例子到codepen上查看，并试着调整你浏览器窗口去看发生什么事

让我们试试别的。假设我们网站顶部有一个右对齐的導航但是我们希望它在小屏幕和小型设备中能单列居中显示。非常简单

让我们尝试一些更灵活性的伸缩项目！关于移动先行，3列布局與页眉页脚全屏和独立的文档顺序。

可可电台每期节目一话题，让渶语磨练耳朵的同时学到更多有益的小知识丰富知识的同时受益于生活。

你骗得了别人但骗不了自己。我们不断地进步是因为我们不斷地接受挑战而我们面对的第一个也是最艰难的挑战就是对自己诚实。

不要想着成为所有人的一切

这样的想法是不可能实现的，只会讓自己精疲力尽而已但是，让一个人微笑就能改变世界即使改变的不是全世界，也是一个人的世界所以，把自己的目标缩小一点吧

be honest with 对…说老实话，同…规规矩矩来往； 以诚相与；

欢迎关注主播微信公众号：安夏說英语，查阅更多英语学习节目~安夏个人微信：anxia3210

[本节目属可可原创未经许可请勿转载]