flexbox：调整元素大小

Question

所以这是一个希望简单的新手 flexbox 挑战：

我有一个 flexbox 有两个 children（左和右）。我希望 Left 宽度为 500px，Right 填充 space 的其余部分，除非 Right 宽度 < 400px，在这种情况下，我希望 Left 乖乖地开始收缩。有什么好的解决办法吗？看起来这应该很容易，但我无法思考要组合哪些元素...

Thank-you!

PS：哦，顺便说一句：左边包含要裁剪（而不是调整大小）的图像，所以这似乎是一个非常常见的问题：左边是图像，右边是文本：希望它们看起来不错所有屏幕宽度...

Answer 1

这里是关于如何使用 flex-basis 和媒体查询使其工作的想法：

html {
  color: #fff;
  font-family: sans-serif;
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
}

.wrapper {
  display: flex;
  height: 100%;
  width: 100%;
}

.left {
  flex-basis: 500px;
  flex-shrink: 0;
  background-color: #f00;
}

.right {
  background-color: #00f;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
}

@media (max-width: 900px) {
  .left {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
  }
}

<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

Answer 2

左边的图片是500px宽；右侧的文本设置为最小宽度：400px。 Fiddle 这里 --> http://jsfiddle.net/LrscjLoq/

    <div class="flex-container">
    <div class="flex-image">
    </div>
    <div class="flex-box" style="min-width:400px">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
    </div>
</div>

.flex-container {
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
justify-content: space-around;
}

.flex-image {
margin: 5px;
font-weight: bold;
font-size: 1.5em;
text-align: center;
flex-basis: 500px;
background-image: url(noimage.png);
}

.flex-box {
margin: 5px;
color: gray;
font-weight: bold;
font-size: 1.5em;
text-align: center;
-ms-flex: 1;
flex: 1;

}

flexbox：调整元素大小

flexbox: resizing elements

css

resize

flexbox