Saber 酱的抱枕

在 css 的 flex 布局里，有些情况下，如果图片展现时的宽度比其原始宽度小，可能发生变形。这可以通过给图片设置 align-self: flex-start; 来解决。

以下是详情。
Read More →

css flex 布局时图片变形的问题

如上面的示例，左右两侧都可以输入文字，它们的宽度也可以改变，但始终保持在一行内，这算是两列自适应吧。如果给右侧设置个固定宽度，那么就是一列固定一列自适应了。

<style>
  .wrap {
    display: flex;
    flex-direction: row;  /* 左右排列 */
  }
  .wrap .a {
    flex: 1; /* 默认占满，如果空间不足，该项目将缩小 */
  }
</style>
<div class="wrap">
  <div class="a">占据剩余空间</div>
  <div class="b">固定</div>
</div>

flex 布局一列固定宽度一列自适应