Question

这是我的代码：

＆＃13;

#container {
	display: flex;
}
#red {
  background-color:red;
}
#green {
  background-color:green;

  width:100%;
	
}
#blue {
  background-color:blue;
width:100px;

}

＆＃13;

<div id="container">
	<div id="red">Hello world hello world hello world</div>
    <div id="green"></div>
    <div id="blue"></div>    
</div>

＆＃13;

我的问题是红色部分包含2行。

我试过 flex-grow：1

但是红色部分需要太多空间！

我的目标是让红色部分占用尽可能多的空间，没有断线，也没有额外的空间：红色部分的内容将在以后用JS修改。

（我不确定flex是不错的选择，也许其他一些显示会有所帮助）

红色是灵活的，绿色应占用尽可能多的空间，蓝色固定100px

Answer 1

用以下样式替换你的风格。

#red {
  background-color: red;
  width: 60%;
}
#green {
  background-color: green;
  width: 40%;
}

Answer 2

您应该为#red。

提供宽度

#red {
  background-color:red;
  width:80%
}
#green {
  background-color:green;
    width:20%
}

http://jsbin.com/yuhitezohi/2/

css3 flex：细胞如何占据确切的位置？

2 个答案: