Flex - 三列，3d 超出屏幕

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 shorthand。这是正确的格式： flex: <flex-grow> <flex-shrink>? || <flex-basis> ;

我更改了您的设置以适应您的规范，包括 IE。由于 800ox 的固定宽度，您需要全屏查看。

.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;
}

<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>

Answer 2

你可以使用 flex: 1;对你的左列和右列来说是独立的。您实际上不需要指定 flex-shrink 和 flex-basis 值，因为它们将根据 flex-grow 属性.

进行合理设置

Flex - 三列，3d 超出屏幕

Flex - three columns, the 3d one goes beyond the screen

css

flexbox

internet-explorer-10