flex自适应布局

最新推荐文章于 2025-03-05 15:47:34 发布

原创最新推荐文章于 2025-03-05 15:47:34 发布 · 746 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #javascript

css 专栏收录该内容

4 篇文章

订阅专栏

左边大小明确，右边自适应：

左边必须设置max-width，右边flex:1自适应剩余空间。

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;

  .left {
    max-width: 180px;
    background-color: #001529;
  }

  .right {
    flex: 1;
    background-color: #2074c3;
    }    
 }

上边大小明确，下边自适应：

上边必须设置max-height，下边flex:1自适应剩余空间。

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;

  .top{
    max-height: 50px;
    background-color: #001529;
  }

  .bottom{
    flex: 1;
    background-color: #2074c3;
    }    
 }