FlexBox 填充空格答案

【问题标题】：FlexBox Filling blank spacesFlexBox 填充空格
【发布时间】：2018-02-23 07:00:00
【问题描述】：

所以在下图中，我为侧边栏、主区域和右侧的小区域创建了一个弹性框作为登录区域。

左侧第一个侧边栏固定高度为600px，中间的mainarea高度为100vh，右侧边栏固定高度为200px。

我的问题是是否可以使用 flexbox 填充右侧的空白区域，即绿色下方的主要区域内容。这可能吗，或者 flexbox 不是这种布局的方式？

我基本上希望我的主要区域红色内容的内容在绿色区域下方流动。

.main {
  display: flex;
  flex-wrap: wrap;
  border: 0px solid black;
  height: 100vh;
}

.sidebar {
  background: #F1F1F9;
  flex: 1;
  height: 600px;
}

.mainArea {
  flex: 3;
  background: red;
}

.rightSidebarSmall {
  flex: 1;
  background: green;
  height: 200px;
}

<link href="//fonts.googleapis.com/css?family=Raleway:300,400,600,700" rel="stylesheet">

<div class="main">
  <div class="sidebar">
    <div class="logo">
      <img src="img/sound-wave-icon.png" height="100px" width="140px">
    </div>
    <div class="selectorBar">
    </div>
    <div class="menu">
      <ul class="menuOptions">
        <li>Recent Files</li>
        <li>Projects</li>
        <li>Teams</li>
        <li>Archives</li>
      </ul>
    </div>
    <div class="addButton">
      plus icon button
    </div>
    <div class="progressBar">
      uploading 5 files <br> progressBar <br> 9.8mbps 36 secs remaining
    </div>
  </div>
  <div class="mainArea"></div>
  <div class="rightSidebarSmall"></div>
</div>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

使用 CSS Grid 是解决此问题的最简单方法，因为您要使用的布局非常非正统。话虽如此，我得到了一个我认为符合您描述的布局，并放入了钢笔中。

https://codepen.io/anon/pen/bLjNRO

它的要点补充说：

.main {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}
.mainArea {
    grid-column: 1 / 6;
    grid-row: 1;
}
.rightSidebarSmall {
    grid-column: 5 / 6;
    grid-row: 1;
}

【讨论】：

【解决方案2】：

我认为如果您可以将右侧边栏设置为绝对位置会更好。这样，您的主要（红色区域）将被覆盖，绿色区域将与红色区域重叠

.main {
display: flex;
flex-wrap: wrap;
border: 0px solid black;
height: 100vh;
position:relative;
}
.sidebar {
background: #F1F1F9;
flex: 1;
height: 600px;
}
.mainArea {
flex: 3;
background: red;

}
.rightSidebarSmall {
  position:absolute;
  right:0;
  top:0;
  z-index: 10;
  min-width:100px;
  height:200px;
  background:green;
}

<div class="main">
    <div class="sidebar"></div>
    <div class="mainArea"></div>
    <div class="rightSidebarSmall"></div>
</div>

希望对你有帮助:)

【讨论】：

【解决方案3】：

当然，只需使用 float: right 只需确保浮动 div 位于文本的其余部分之前。

.main {
  width: 50vw;
  height: 50vh;
  position: relative;
}

.inner {
    background-color: red;
    float: left;
    width: 100%;
    height: 100%;
    word-break: break-all;
}

.other {
  background-color: green;
  float: right;
  max-width: 150px;
}

<div class="main">
  <div class="inner">
       <div class="other">
        another text asdfsdf asdf asdf
      </div>  
      <div>
      The quick brown fox       The quick brown fox       The quick brown fox      
      </div>


  </div>

</div>

【讨论】：