面试官说谈谈你对flex Box的理解

哈喽哈喽，大家好，我是你们的金樽清酒。最近呢我也是在复习css的面试考点，而flex Box是css中极容易被问到的，因为现在flex布局特别的简洁高效。一个东西好用那么自然用的多也十分重要。那我们今天就谈一谈flex Box 弹性盒子。

假如您也和我一样，在准备春招。欢迎加我微信shunwuyu，这里有几十位一心去大厂的友友可以相互鼓励，分享信息，模拟面试，共读源码，齐刷算法，手撕面经。来吧，友友们！"

面试官让你说说对flex Box的理解该怎么去回答？

一般遇到这种谈谈理解的问题，我们都可以按套路去回答。

flex Box是什么？是一种布局方式，可以简便完整响应式(随屏幕进行缩放)的实现页面布局。容器中默认存在两条轴，主轴，交叉轴，默认主轴为水平方向，交叉轴为垂直方向，可以用flex-direction属性来改变主轴和交叉轴的方向

Flexbox的主要特点包括：

主轴和交叉轴：Flexbox布局中有主轴（main axis）和交叉轴（cross axis），主轴默认与行方向一致，交叉轴默认与列方向一致，但它们可以通过设置来改变。
弹性容器和弹性项目 ：Flexbox中的父元素被称为弹性容器（flex container），子元素被称为弹性项目（flex items）。通过设置弹性容器的属性，如display: flex;，可以将其设为一个弹性容器，然后通过设置弹性项目的属性，如flex-grow、flex-shrink、flex-basis等，可以控制弹性项目的布局方式。
主轴对齐和交叉轴对齐 ：可以通过设置弹性容器的属性，如justify-content和align-items，来控制主轴和交叉轴上弹性项目的对齐方式。
弹性增长：弹性项目可以根据父容器的剩余空间自动调整大小，以填充父容器。
顺序控制 ：可以通过设置order属性来控制弹性项目的显示顺序，数值越小越靠前。

1.多栏布局

2.居中实际上现在大部分布局都是使用的flex布局。因为它十分的简单高效。就我个人而说，着手的一个小程序项目，百分之九十都是靠弹性布局来实现的，特别简单高效。对于多栏布局。比如三栏布局，可以用flex的order属性来实现像圣杯布局，双飞翼布局这种效果，功能十分的强大。

display: 设置元素的显示类型为弹性盒子，其值为 flex。
flex-direction: 设置主轴的方向，可选值包括 row（默认，水平方向）、row-reverse、column（垂直方向）、column-reverse。
flex-wrap: 设置是否允许弹性项目换行显示，可选值包括 nowrap（默认，不换行）、wrap、wrap-reverse。
justify-content: 设置弹性项目在主轴上的对齐方式，可选值包括 flex-start（默认，起点对齐）、flex-end、center、space-between、space-around、space-evenly。
align-items: 设置弹性项目在交叉轴上的对齐方式，可选值包括 stretch（默认，拉伸填充）、flex-start、flex-end、center、baseline。
align-content: 设置多根轴线的对齐方式（仅在弹性项目换行时生效），可选值包括 stretch（默认，拉伸填充）、flex-start、flex-end、center、space-between、space-around。
flex-grow: 设置弹性项目的放大比例，默认值为 0，表示不放大。
flex-shrink: 设置弹性项目的缩小比例，默认值为 1，表示允许缩小。
flex-basis: 设置弹性项目在分配多余空间之前，占据的主轴空间，默认值为 auto。
flex: flex-grow、flex-shrink、flex-basis的简写形式。
order: 设置弹性项目的显示顺序，默认值为 0，数值越小越靠前。

flex布局是现在主流的布局方式，因为它简单高效功能强大，掌握好flex能让你切页面更加得心应手。当面试官让你谈对某一个东西的理解时，可以按固定套路。是什么，特征，应用场景有条不紊的面对面试官。

假如您也和我一样，在准备春招。欢迎加我微信shunwuyu，这里有几十位一心去大厂的友友可以相互鼓励，分享信息，模拟面试，共读源码，齐刷算法，手撕面经。来吧，友友们！"