如何缩小Flex项目的高度以适合容器高度 [英] How to shrink flex items height to fit container heights

问题描述

我试图在flex中显示下面的布局。

我有宽度和高度相等的div。我想要实现下面的布局。通过在左侧放置一个物品，其余四个放在正确的容器上，并保持相同的容器高度。那左边的那个增加了左边的高度和宽度，而另外一个右边的大小是在这四个项目之间共享的。
$ b

.trades {display：flex; flex：1;}。trade-panel {flex：1;}。layout-5-2 {-ms-flex-direction：row; flex-direction：row;证明内容：空间之间; display：flex;}。layout-container-5-2-1 {-ms-flex-direction：column; flex-direction：column;身高：100％证明内容：空间之间; flex：0 0 48％; display：flex;}。layout-container-5-2-2 {flex：0 0 48％;显示：flex; flex-direction：column;}

< div class = 交易 > < div class =layout-5-2> < div class =layout-container-5-2-1> < div class =trade-panel> item 1< / div> < div class =trade-panel> item 2< / div> < div class =trade-panel> item 3< / div> < div class =trade-panel> item 4< / div> < / DIV> < div class =layout-container-5-2-1> < div class =trade-panel>垂直项目。< / div> < / DIV> < / div>< / div>

我的布局显示接近我的期望。四个在容器右边，一个项目在左边。然而，贸易容器垂直滚动，以适应四个行业的高度。交易不会缩小到合适的容器 .layout-container 5-2-2 。请如何缩小四个以固定在集装箱高度？任何帮助，将不胜感激。


解决方案

试试这个
$ b

  body，html {margin：0;填充：0; box-sizing：border-box;}。container {display：flex;最小高度：100vh;背景：＃2A3052;}。left {flex：1;背景：＃9497A8; margin：10px;}。right {flex：1;显示：flex; flex-direction：column;}。box {flex：1;背景：＃9497A8; margin：10px;}  

< div class =container > < div class =left>< / div> < div class =right> < div class =box>< / div> < div class =box>< / div> < div class =box>< / div> < div class =box>< / div> < / div>< / div>

I am trying to display a layout below in flex .

I have divs of equal width and height. I want to achieve the layout out below. By placing one item on the left and the remaining four fit on the right container and maintaining the same container height in the process . Thats the one on the left increase to fill the left height and width and the other right size of the container is shared among the four items.

.trades {
  display: flex;
  flex: 1;
}
.trade-panel {
  flex: 1;
}
.layout-5-2 {
  -ms-flex-direction: row;
  flex-direction: row;
  justify-content: space-between;
  display: flex;
}
.layout-container-5-2-1 {
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  flex: 0 0 48%;
  display: flex;
}
.layout-container-5-2-2 {
  flex: 0 0 48%;
  display: flex;
  flex-direction: column;
}

<div class="trades">
  <div class="layout-5-2">
    <div class="layout-container-5-2-1">
      <div class="trade-panel">item 1</div>
      <div class=" trade-panel">item 2</div>
      <div class="trade-panel">item 3</div>
      <div class=" trade-panel">item 4</div>
    </div>

    <div class="layout-container-5-2-1">
      <div class="trade-panel">vertical item.</div>
    </div>
  </div>
</div>

My layout displays close to what i was expecting.with four to in the container to the right and one item to the left. However, The trades container scroll vertically to accommodate the four trades height. The trades does not shrink to fit into the right container thats .layout-container 5-2-2. Please how do i shrink the four to fix in the container heights ? Any help would be appreciated.

解决方案

Try this

body,
html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  display: flex;
  min-height: 100vh;
  background: #2A3052;
}
.left {
  flex: 1;
  background: #9497A8;
  margin: 10px;
}
.right {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.box {
  flex: 1;
  background: #9497A8;
  margin: 10px;
}

<div class="container">
  <div class="left"></div>
  <div class="right">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

这篇关于如何缩小Flex项目的高度以适合容器高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！