Question

运行此代码时，右侧列向右延伸超出屏幕，向右。

我希望侧栏具有响应性，而中间栏则具有固定宽度。
如何让它在IE10中运行？

布局：

<div class="wrapper">
    <div class="left"></div>
    <div class="middle">
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget ante bibendum, cursus diam sit amet
        </div>
    </div>
    <div class="right"></div>
</div>

CSS：

.wrapper {
  height: 80px;
  width: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.wrapper .left {
  height: 100%;
  flex: 0 0 100%;
  background-color: yellow;
}
.wrapper .middle {
  height: 100%;
  flex: 0 0 800px;
  background-color: orange;
}
.wrapper .right {
  height: 100%;
  flex: 0 0 100%;
  background-color: red;
}

Answer 1

您未正确使用flex简写。这是正确的格式： flex: <flex-grow> <flex-shrink>? || <flex-basis> ;

我已经改变了你的规格，包括IE。由于800x固定宽度，您需要全屏查看。

＆＃13;

.wrapper {
  height: 80px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.wrapper .left {
  height: 100%;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0%;
  flex: 1 1 0%;
  background-color: yellow;
}
.wrapper .middle {
  height: 100%;
  width: 800px;
  background-color: orange;
}
.wrapper .right {
  height: 100%;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0%;
  flex: 1 1 0%;
  background-color: red;
}

＆＃13;

<div class="wrapper">
  <div class="left"></div>
  <div class="middle">
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget ante bibendum, cursus diam sit amet
    </div>
  </div>
  <div class="right"></div>
</div>

＆＃13;

Answer 2

你可以使用flex：1;在你的左右列上它自己。您根本不需要指定flex-shrink和flex-basis值，因为它们将根据flex-grow属性进行合理设置。

Flex - 三列，3d列超出屏幕

2 个答案: