如何在Angular中实现弹性布局？现有布局效果不符求助

根据你提供的参考图布局需求，问题出在默认块级元素的排列规则以及缺少必要的布局容器设置，以下是修正后的代码：

修正后的HTML #

<div class="page-wrapper">
  <div class="sidebar">
    HELLO
  </div>

  <div class="container-red">
    <div class="big-block">
      i'm the big block
    </div>
    <div class="bottom-row">
      <div class="block-blue">
        HI
      </div>
      <div class="block-black">
        HI AGAIN
      </div>
    </div>
  </div>
</div>

修正后的CSS #

/* 全局盒子模型修正，避免宽度计算溢出 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 页面容器，实现侧边栏与主容器横向排列，同时支持垂直滚动 */
.page-wrapper {
  display: flex;
  min-height: 100vh; /* 确保容器至少占满视口高度 */
  overflow-y: auto; /* 内容超出时显示垂直滚动条 */
}

.sidebar {
  width: 20%;
  background-color: #ccc; /* 示例背景色，方便区分 */
  padding: 1rem;
}

.container-red {
  width: 80%;
  display: flex;
  flex-direction: column; /* 内部元素垂直排列 */
  background-color: #ffcccc; /* 示例背景色 */
  padding: 1rem;
}

.big-block {
  background-color: #fff; /* 示例背景色 */
  padding: 2rem;
  margin-bottom: 1rem;
  min-height: 200px; /* 示例最小高度，确保区块可见 */
}

.bottom-row {
  display: flex; /* 让两个子区块横向排列 */
  gap: 1rem; /* 区块间的间距，可选 */
}

.block-blue {
  width: 50%;
  background-color: #cceeff; /* 示例背景色 */
  padding: 2rem;
  min-height: 150px;
}

.block-black {
  width: 50%;
  background-color: #333;
  color: #fff;
  padding: 2rem;
  min-height: 150px;
}

关键修正点 #

• 用flex布局实现横向排列：给页面外层容器设置display: flex，让侧边栏和主容器并排显示。
• 主容器内部用flex-direction: column保持顶部大区块在上，底部两个区块通过嵌套的flex容器实现左右排列。
• 全局设置box-sizing: border-box，避免内边距、边框导致宽度超出预期。
• 添加min-height和背景色，方便直观区分区块，后续可替换为你需要的组件样式。
• 设置overflow-y: auto确保页面内容超出视口时可滚动。

内容的提问来源于stack exchange，提问作者ingmbk