Question

我有以下情况：

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

我需要，三次潜水（左，中，右）在一排。左右div必须占用中心div之后留下的所有空白空间（左空白的50％，空空间的50％）。中心div必须拉伸到最大值，但必须具有最大宽度：1000px。因此，例如，如果屏幕的宽度<1000，则中心div必须占用所有空间。因此，中心div可能的宽度为0到1000px。没有js怎么做？

Answer 1

flexbox center div shrink只能使用flex-basis 1000px。

这可确保center最大可扩展到1000px

以下片段：

＆＃13;

.container {
  display: flex;
}
.container > div {
  height: 100px;
  border: 1px solid black;
}
.left,
.right {
  flex: 1;
}
.center{
  flex: 0 1 1000px;
}

＆＃13;

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

＆＃13;

Answer 2

将display:flex设为父div

＆＃13;

#main {
    width: 100%;
    height: 300px;
    border: 1px solid black;
    display: -webkit-flex; /* Safari */
    display: flex;
}

#main div {
    -webkit-flex: 1;  /* Safari 6.1+ */
    -ms-flex: 1;  /* IE 10 */
    flex: 1;
    padding:20px;
}

＆＃13;

<div id="main">
  <div style="background-color:coral;">Left</div>
  <div style="background-color:lightblue;max-width:1000px;">Center</div>
<div style="background-color:lightgreen;">Right</div>
</div>

＆＃13;

Answer 3

以下是 Demo

.container{
  display: flex;
  align-items: center;
  width: 100vw;
}
.container div{
  height: 100vh;
  text-align: center;
}
.left, .right{
  flex:1;
}
.center{
  flex: 25;
  max-width: 1000px;
  background: green;
}
.left{
  background: red;
}
.right{
  background: blue;
}

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

左流体div，中心伸展到最大宽度div，右流体div

3 个答案: