问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

flex 布局存在 height 的时候改变父元素的布局方向导致的问题?

头像
mikechen
    1.1k10164301
    <!--
 * @Version: 2.0
 * @Date: 2021-10-13 09:20:10
 * @LastEditTime: 2021-12-01 19:08:04
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .parent {
      display: flex;
      width: 500px;
      height: 500px;
      flex-direction: row;
      background: #fff;
    }
    .left {
      flex: 1 0 auto;
      height: 100px;
      background: blue;
    }
    .right {
      flex:1 1;
      background: red;
    }
  </style>

  <body>
    <div class="parent">
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </body>
</html>

    parent 布局方向 为 row 的时候显示正确
    image.png

    当我把 parent 的布局方向改成 column的时候 显示高度就不正确了:
    image.png

    除了动态的把 left的 flex 设置为 0 1 auto
    是否还有其他方法 能让 left 的高度正确显示

    期待的效果
    image.png

    javascriptcss前端htmlcss3
    阅读 2.2k
    2 个回答
    得票最新
    头像
    zangeci
      14.8k71731

      你是想水平方向各占一半，竖直方向blue只占100px？

      .parent {
      display: flex;
      width: 500px;
      height: 500px;
      flex-direction: row; /* 只需改方向，无需再改其他 */
      background: #fff;
    }
    .left {
      flex: 0 0 50%;
      max-height: 100px;
      background: blue;
    }
    .right {
      flex:1;
      background: red;
    }
      头像
      Sure
        7811212
                .parent {
            display: flex;
            width: 500px;
            height: 500px;
            flex-direction: column;
            background: #fff;
        }
        .left {
            /* flex: 0 1 auto; */
            height: 100px;
            background: blue;
        }
        .right {
            flex: 1;
            /* flex: 1 1; */
            background: red;
        }
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题