Question

以下是我想要实现的简单示例。子容器包含在父容器中，父容器的收缩率不应低于包含所有子容的必要量，而应保持足够大。现在它缩小到视口宽度，如果用户滚动，他可以看到其他项目，但父看起来很奇怪。

.container {
  display: flex;
  background-color: blue;
}
.item {
  margin: 10px;
  padding: 10px;  
  background-color: red;
  font-size: 50px;
}

<div class="container">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
</div>

Answer 1

为此，您可以在inline-flex上使用container。

display: flex不起作用的原因是它的行为类似于块元素，因此它不会比其父元素宽，在本例中为body，但是内联元素随着内容的增长而增长。

Stack snippet

.container {
  display: inline-flex;
  background-color: blue;
}
.item {
  margin: 10px;
  padding: 10px;  
  background-color: red;
  font-size: 50px;
}

<div class="container">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
</div>

另一种选择是将container的父级设为灵活容器，在这种情况下，将display: flex添加到body，然后container将也是一个弹性项目，因此不会缩小到其内容之下。

Stack snippet

body {
  display: flex;
}
.container {
  display: flex;
  background-color: blue;
}
.item {
  margin: 10px;
  padding: 10px;  
  background-color: red;
  font-size: 50px;
}

<div class="container">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
</div>

Answer 2

将flex: 1 1 0;提交给.item课程。

.container {
  display: flex;
  background-color: blue;
}
.item {
  margin: 10px;
  padding: 10px;  
  background-color: red;
  font-size: 50px;
  flex: 1 1 0;
}

<div class="container">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
</div>

Answer 3

父母不再显示，现在你的问题是在项目之间留出空间。

以下是父母关注儿童身高的工作片段

    .container {
      display: flex;
      background-color: blue;
    }


    .item {
          flex: 1;
          padding: 10px;  
          background-color: red;
          font-size: 50px;
          position:relative;
          margin-right: 5px;
        }

<div class="container">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
</div>

如果您不希望项目之间有任何空格，请删除margin-right:5px;。

Chlidren应该强迫父母增加其宽度

3 个答案: