flexbox面试题

掌握这些，面试轻松应对

在前端开发面试中，flexbox是一个常考的知识点。下面为大家详细介绍一些常见的flexbox面试题。

什么是flexbox

flexbox即弹性布局模型，是一种用于为盒状模型提供最大灵活性的布局方式。它可以更高效地对元素进行排列、对齐和分配空间，无论元素的大小是固定的还是动态的。例如，当我们有一个导航栏，里面的菜单项数量不固定，使用flexbox就能轻松实现菜单项的均匀分布。

如何创建一个flex容器

要创建一个flex容器，只需将元素的display属性设置为flex或inline-flex。设置为flex时，容器会作为块级元素显示；设置为inline-flex时，容器会作为行内元素显示。示例代码如下：

html部分：

<div class="flex-container">

<div class="item">item 1</div>

<div class="item">item 2</div>

</div>

css部分：

.flex-container {

display: flex;

}

flex容器的主要属性有哪些

flex容器有几个重要的属性。flex-direction用于定义主轴的方向，有row（默认，水平从左到右）、row-reverse（水平从右到左）、column（垂直从上到下）和column-reverse（垂直从下到上）。例如，将导航栏的菜单项垂直排列，就可以将flex-direction设置为column。

justify-content用于定义项目在主轴上的对齐方式，常见的值有flex-start（默认，左对齐）、flex-end（右对齐）、center（居中对齐）、space-between（两端对齐，项目之间间隔相等）和space-around（每个项目两侧间隔相等）。比如，要让导航栏的菜单项均匀分布在导航栏内，就可以使用space-between。

align-items用于定义项目在交叉轴上的对齐方式，常见的值有stretch（默认，项目拉伸以填满容器）、flex-start（交叉轴起点对齐）、flex-end（交叉轴终点对齐）、center（交叉轴中点对齐）和baseline（项目第一行文字的基线对齐）。

flex项目的主要属性有哪些

flex项目也有一些重要属性。flex-basis定义项目在主轴上的初始大小。flex-grow定义项目的放大比例，默认为0，表示不放大。例如，有三个项目，分别设置flex-grow为1、2、1，那么第二个项目的宽度会是其他两个项目的两倍。

flex-shrink定义项目的缩小比例，默认为1，表示如果空间不足，项目会缩小。flex属性是flex-grow、flex-shrink和flex-basis的简写，默认值为0 1 auto。

flexbox和grid布局的区别

flexbox是一维布局模型，主要用于在一个方向上（水平或垂直）排列元素。而grid布局是二维布局模型，可以同时在水平和垂直方向上对元素进行排列和布局。例如，要创建一个复杂的网页布局，有多行多列的元素，使用grid布局会更合适；而对于简单的导航栏、列表等，使用flexbox就足够了。