Question

我正在尝试在flexbox中制作3列的行布局。

左列的宽度必须为60px，并且不能更大。

然后，中心列需要拉伸100％，右边的列需要在右边，并且宽度不能超过200px。

| width: 60px | Stretch 100%                           |  width: max-200px |

这是我的代码：

<div class="flex-container">
    <div>LEFT</div>
    <div style="flex-grow: 7">MIDDLE</div>
    <div style="flex-grow: 2">RIGHT</div>
</div>

这是CSS：

.flex-container {
  display: flex;
  align-items: stretch;
  flex-flow: row wrap;

}

.flex-container > div {
  margin: 10px;
  text-align: center;
  flex: 0 1 auto;
}

此刻，中间div不会扩展，因此会将右列推到右侧。

我该怎么做？

Answer 1

您可以按照以下方式调整代码：

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

.flex-container>div {
  margin: 10px;
  text-align: center;
  border:1px solid;
  box-sizing:border-box;
}
.flex-container>div:first-child {
   width:60px; /*fixed width*/
   flex-shrink:0; /*avoid shriking*/
}
.flex-container>div:nth-child(2) {
  flex-grow:1; /*can grow*/
}
.flex-container>div:nth-child(3) {
  flex-grow:1;  /*can grow*/
  max-width:200px; /*max-width*/
}

<div class="flex-container">
  <div>LEFT</div>
  <div>MIDDLE</div>
  <div>RIGHT</div>
</div>

Answer 2

通过在元素上使用flex：0 0 auto，您可以指定宽度应通过其内容和/或CSS宽度属性（宽度/最小宽度/最大宽度）“定义”

.container{
  display:flex;
}
.container div{
  height:500px;
}
.container__left{
  background-color:red;
  width:60px;
  flex:0 0 auto;
}
.container__center{
  background-color:green;
  flex:1;
}
.container__right{
  background-color:blue;
  max-width:200px;
  flex: 0 0 auto
}

<div class="container">
  <div class="container__left">left</div>
  <div class="container__center">center</div>
  <div class="container__right">right and other things in here that should be no more than 200px</div>
</div>

CSS3 Flexbox 3列布局小宽度，中间拉伸一且宽度：右侧最大为200px

2 个答案: