前端面试题之如何理解css flexbox(弹性盒子)

100人浏览 2024-12-13 08:36:02

很多同学可能对弹性盒子并不是很熟悉，还对它有一些畏难情绪。但我以往教过的学生，只要会用了弹性盒，就对它爱不释手了。那今天就带大家来揭秘一下看着有难度，但实际超白痴的flexbox。

首先大家要知道弹性盒是 CSS3的一种新的布局模式。两个关键词：css3和布局。看到css3 就应该马上想到兼容性，不能在低版本浏览器中乱用。而布局呢，简单来讲，无非就是控制div们上下排列，还是左右排列。div默认是上下排列的，如果强行让其左右排列，一般我们都会选用浮动，或是dispaly属性值的转换。而弹性盒的优点在于，可以轻松调节div排列的方向。

接下来我们就来看一看如此神奇的弹性盒子的使用方式。

看这样一个父子结构。

一个父级嵌套四个子级

一个父级div嵌套四个子级div此时若想让四个子集左右排列的话，我们需要在父级div上加dispaly：flex；

默认子级左右排列

这里经常会有同学有疑问，正常属性都是加在自己身上的，为什么这个要加在父级上？你可以这样理解，弹性盒的本质就是父级管控子集，你想调整子集的排列/距离分配，都需要写在父级上。现在已经实现了，子级的左右排列，那如何让其上下排列呢。介绍另外一个属性 flex-direction他是专门控制子集的排列方向的,属性值column代表上下,row 代表左右。如果你没有设置flex-direction 他就会默认左右排列。