阮一峰CSS3flex，es6阮一峰

【归纳】flex布局

1、flex-direction：row | row-reverse | colume | colume-reverse；1）row：横向从左到右排列（左对齐），默认的排列方式。2）row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。

2、Flex布局也称弹性布局（flexiblebox）模块，主要是为了提供一个更有效的方式对容器之间的各项内容进行布局。

3、采用flex布局的元素，称为flex容器（flex container）。它的所有子元素自动成为容器成员，称为flex项目（flex item）。

4、块级布局侧重垂直方向、行内布局侧重水平方向，flex布局是与方向无关的。

5、前端应知应会：flex布局详解 flex布局可以说是当下前端开发必须学会的一个基本技能，它在面试中的出场率也很高，有必要专门讲解一下。

6、flex布局又称为弹性布局，相对于更早出来的float浮动布局更加方便，在兼容性方面还有不足，但随着很多浏览器版本的淘汰，今后的flex布局会被更加广泛使用。在掌握flex布局前先认识两个概念。

相关问答

Q1: flex布局中单个子元素区别于其他子元素的主轴对其方式实现

默认情况下，子元素都排在一条线上（主轴），flex-wrap属性定义，flex布局中默认是不换行的。意味着随着子元素不断增加，会直接改变子元素的宽高，不断地挤在一行上。

当父容器设置了display：flex时，子元素自动成为其成员， 容器默认存在两根轴：水平方向的主轴和垂直的交叉轴，项目默认沿主轴排列。

通过设置元素的display属性，改成flex属性 来指定对应容器为flex布局。然后它的所有子元素自动成为了容器元素，不脱离文档流的情况下按照flex item的默认布局规则排列。

flex-basis属性定义了在分配多余空间之前，子元素占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即子元素的本来宽度。默认值为0 1 auto。

元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与flex-start等效 。 其它情况下，该值将参与基线对齐。

Q2: 5.flex布局中对容器设置的属性有哪些

flex-direction 属性决定主轴的方向（即项目的排列方向）flex-direction：row | row-reverse | colume | colume-reverse；1）row：横向从左到右排列（左对齐），默认的排列方式。

flex-shrink： 0； 不缩小。flex-basis 定义元素的默认基准值。设置了flex-basis，width就不起作用；同时存在的时候，优先使用flex-basis。

通过设置元素的display属性，改成flex属性 来指定对应容器为flex布局。然后它的所有子元素自动成为了容器元素，不脱离文档流的情况下按照flex item的默认布局规则排列。

效果如下：接下来再细聊每个属性的特性。任何一个容器都能使用flex布局，这里有一个flex-container的概念。ul即为flex-container，li是容器内的所有单元吧，官方叫项目，flex item。

display： flex； display： inline-flex；注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。

阮一峰CSS3flex的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于es6阮一峰、阮一峰CSS3flex的信息别忘了在本站进行查找喔。