flex-三列，3D一列超出了屏幕

Question

运行此代码时，右列持续到屏幕上，直接向右。

1. 我希望侧列响应迅速，而中间的列是固定宽度。

2. 以及如何使其在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> ;

ive更改了您的工作，以处理包括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属性明智地设置。