前端常见问题（vue，css，html，js等）

不羁的fang少年2025-11-26 1:09

CSS-flex布局

在Flexbox布局中，当子元素同时设置了：

显式高度（如height: 30px）
flex属性（如flex: 1）

flex属性会覆盖显式的高度设置 。浏览器会优先遵循flex属性的分配规则。

复制代码

<div style="display: flex; flex-direction: column;">

        <div style="height: 30px;  flex: 1;"></div>
        <div style="flex:6;"></div>

</div>

在 flex-direction: row（默认值）的Flexbox布局中：

子元素同时设置了 width: 30px 和 flex: 1
flex属性会覆盖显式的宽度设置

浏览器会优先遵循flex属性的分配规则

复制代码

      <div style="width : 30px;  flex: 1;"></div>
      <div style="flex:6;"></div>

想要在弹性盒子内设置第一个盒子的高度（宽度同理），可以将第一个盒子不设置flex属性，在剩下的盒子中设置flex：1属性

复制代码

<div style="display: flex; flex-direction: column;">
    
   <div style="height: 30px;">内部元素高度30px</div>

   <div style="flex:1;"></div>

</div>

如果弹性盒子内的子模块有多个，可以将第一个设置固定高度，其余盒子在包装在一个div内再作为一个弹性盒子。--- 这是一个很经典的嵌套Flexbox布局

布局效果

子模块1：固定高度30px
子模块2、3、4的容器：占据剩余所有空间

子模块2、3、4：在弹性容器内可以进一步自定义布局

复制代码

 <div style="height: 30px;"> 子模块1:内部元素高度30px </div>

 <div style="flex:1; display: flex; flex-direction: column;">
      <div> 子模块2 </div>
      <div> 子模块3 </div>
      <div> 子模块4 </div>
 </div>

JavaScript 箭头函数陷阱

错误写法：{ store.state.isCollapse }执行了，但是没有返回

复制代码

const isCollapse = computed(() => { store.state.isCollapse })

正确写法：

复制代码

const isCollapse = computed(() => store.state.isCollapse)

或

复制代码

const isCollapse = computed(() => {
    return store.state.isCollapse
})