主页 / 问题 / 785296
Accepted
Dmitry Likhovoi
Asked:2020-02-15 03:58:12 +0000 UTC2020-02-15 03:58:12 +0000 UTC

flexbox：内容溢出，nowrap 和居中对齐

  • 772

一个常见的任务是将 2 个块对齐到页面的中心。块宽度以测量单位给出vw。flex 对齐的问题是当你减小窗口的宽度时，所有的内容都会进入overflow. 你需要行为nowrap。

实际上，结果证明是在display: table. 但我想知道这是否可以通过flex或至少float-ami 以某种方式完成。

下面是我试图解决的 css 3 个选项（2 个已注释掉）中的 codepen：

  • display: table
  • float: left
  • display: flex

我也试过 display: inline-block，但得到的结果与 float 相同。

https://codepen.io/tsamsiyu/pen/BYwzEp?editors=1100

css

1 个回答

  1. Best Answer

    像这样？

    /* COMMON STYLES */

#left>div,
#right>div {
  outline: 1px solid black;
  margin: 1vw;
}

#left {
  width: 20vw;
  min-width: 200px;
}

#right {
  flex-basis: 60%
}

#container {
  display: flex;
  justify-content: center;
  flex-flow: row nowrap;
  max-width: 100vw;
}
    <div id="container">
  <div id="left">
    <div style="height: 150px"></div>
    <div style="height: 30px"></div>
  </div>
  <div id="right">
    <div style="height: 50px"></div>
    <div style="height: 50px"></div>
  </div>
</div>

    • 2

相关问题