前端 CSS 面试题, CSS 中 flex: 1 是什么意思?

Step 1

Q:: CSS 中 flex: 1 是什么意思？

A:: 在 CSS 中，flex: 1 是一个简写属性，相当于 flex-grow: 1, flex-shrink: 1, 和 flex-basis: 0。这意味着该元素将尝试占据可用的空间，同时根据需要进行缩放，并且初始基准大小为 0。这在布局中非常有用，因为它允许元素根据其父容器的空间动态调整其宽度或高度。

Step 2

Q:: flex: 1 与 flex: auto 之间有什么区别？

A:: flex: 1 表示元素将完全占用剩余空间，并且其基准大小为 0；而 flex: auto 允许元素根据内容自动调整大小，但同时也能占据剩余的可用空间。因此，flex: auto 更加灵活，适用于需要基于内容自动调整大小的元素。

Step 3

Q:: 如何实现一个等宽的三栏布局？

A:: 可以通过设置父容器为 display: flex，并对每个子元素使用 flex: 1。这样，每个子元素将会平分父容器的宽度，达到等宽三栏布局的效果。

Step 4

Q:: 什么是 flex-grow 和 flex-shrink？

A:: flex-grow 决定了元素在父容器中剩余空间的占有比例，flex-shrink 决定了当父容器缩小时元素缩小的比例。这两个属性在布局中控制元素在不同情况下如何改变大小。