面试官说 说说什么是flex Box

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

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

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

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

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

是什么

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

特征

Flexbox的主要特点包括:

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

应用场景

1.多栏布局

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

flex布局中常见的属性

  1. display: 设置元素的显示类型为弹性盒子,其值为 flex
  2. flex-direction: 设置主轴的方向,可选值包括 row(默认,水平方向)、row-reversecolumn(垂直方向)、column-reverse
  3. flex-wrap: 设置是否允许弹性项目换行显示,可选值包括 nowrap(默认,不换行)、wrapwrap-reverse
  4. justify-content: 设置弹性项目在主轴上的对齐方式,可选值包括 flex-start(默认,起点对齐)、flex-endcenterspace-betweenspace-aroundspace-evenly
  5. align-items: 设置弹性项目在交叉轴上的对齐方式,可选值包括 stretch(默认,拉伸填充)、flex-startflex-endcenterbaseline
  6. align-content: 设置多根轴线的对齐方式(仅在弹性项目换行时生效),可选值包括 stretch(默认,拉伸填充)、flex-startflex-endcenterspace-betweenspace-around
  7. flex-grow: 设置弹性项目的放大比例,默认值为 0,表示不放大。
  8. flex-shrink: 设置弹性项目的缩小比例,默认值为 1,表示允许缩小。
  9. flex-basis: 设置弹性项目在分配多余空间之前,占据的主轴空间,默认值为 auto
  10. flex: flex-growflex-shrinkflex-basis的简写形式。
  11. order: 设置弹性项目的显示顺序,默认值为 0,数值越小越靠前。

总结

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

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

相关推荐
漂流瓶jz25 分钟前
让数据"流动"起来!Node.js实现流式渲染/流式传输与背后的HTTP原理
前端·javascript·node.js
SamHou041 分钟前
手把手 CSS 盒子模型——从零开始的奶奶级 Web 开发教程2
前端·css·web
我不吃饼干1 小时前
从 Vue3 源码中了解你所不知道的 never
前端·typescript
开航母的李大1 小时前
【中间件】Web服务、消息队列、缓存与微服务治理:Nginx、Kafka、Redis、Nacos 详解
前端·redis·nginx·缓存·微服务·kafka
Bruk.Liu1 小时前
《Minio 分片上传实现(基于Spring Boot)》
前端·spring boot·minio
鱼樱前端2 小时前
Vue3+d3-cloud+d3-scale+d3-scale-chromatic实现词云组件
前端·javascript·vue.js
zhangxingchao2 小时前
Flutter入门:Flutter开发必备Dart基础
前端
佚名猫2 小时前
vue3+vite+pnpm项目 使用monaco-editor常见问题
前端·vue3·vite·monacoeditor
满分观测网友z2 小时前
vue的<router-link>的to里面的query和params的区别
前端·javascript·vue.js
BillKu2 小时前
Vue3 + TypeSrcipt 防抖、防止重复点击实例
前端·javascript·vue.js