使用flexbox在具有共享标题的两列布局中拉伸列 [英] Stretch columns in two columns layout with shared header using flexbox

问题描述

我正在使用flexbox创建带有标题行的两列布局.

I'm using flexbox to create a two-columns layout with a header row.

* {
  box-sizing: border-box;
  position: relative;
}

.container {
  border: 2px solid gray;
  display: flex;
  flex-wrap: wrap;
  height: 300px;
}

.header {
  flex-basis: 100%;
  border: 2px solid magenta;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.column1 {
  flex-basis: 150px;
  /* height: calc(100% - 50px); */
  border: 2px solid green;
}

.column2 {
  /* height: calc(100% - 70px); */
  flex: 1;
  border: 2px solid orange;
}

<div class='container'>
  <div class='header'>it's a header</div>
  <div class='column1'>column 1</div>
  <div class='column2'>column 2</div>
</div>

随时可以在此处看到完整的示例.

Feel free to see the full example here.

在示例中您可以看到，列和标题之间存在间隙.我的目的是垂直拉伸列以填充容器中的整个空白空间. 我可以通过设置height属性(例如calc(100% - <header-height>))来实现.这是正确的方法吗?

As you can see in the example there is a gap between columns and header. My aim is to stretch columns vertically to fill whole empty space in the container. I can achieve it by setting height property like calc(100% - <header-height>). Is it the correct way?

我只是尝试使用"flex"样式，将align-items: stretch设置为容器，将align-self: stretch设置为列，但是没有成功.我可能会错过一些尝试以这种方式实施的东西吗?

I just tried to use "flex" style and set align-items: stretch to the container and align-self: stretch to columns but without success. Did I probably miss something trying to implement it this way?

推荐答案

按如下所示进行操作

* {
  box-sizing: border-box;
}

body,
html {
  height: 100%;
}

.container {
  border: 2px solid gray;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header {
  width: 100%;
  border: 2px solid magenta;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.body-container {
  display: flex;
  width: 100%;
  flex: 1;
}

.column1 {
  width: 50%;
  border: 2px solid green;
}

.column2 {
  width: 50%;
  border: 2px solid orange;
}

<div class='container'>
  <div class='header'>it's a header</div>
  <div class="body-container">
    <div class='column1'>column 1</div>
    <div class='column2'>column 2</div>
  </div>

</div>

这篇关于使用flexbox在具有共享标题的两列布局中拉伸列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！