Question

我有一个问题，我正在尝试使用flex来显示左，中，右的div。虽然我遇到的问题是中心列与上面的div不一致。当我将flex更改为flex: 1时，它确实将每列放入行中，但在我最右边的div右侧留下一个空白区域。有人可以就如何纠正这个提供一些建议或提示吗？我见过类似关于flex的问题，但没有具体解决这个问题。我提供了一些我目前正在使用的代码。提前谢谢！

.container {
    display: flex;
    width: 100%;
    justify-content: space-between;
}
.item {
    flex: 1;
}

<body>
    <div class="container">
        <div class="item">Hello World</div>
        <div class="item">It is me</div>
        <div class="item">BYE</div>
    </div>
    <div class="container">
        <div class="item">Hello World, again!</div>
        <div class="item">It is me, again?</div>
        <div class="item">BYE</div>
    </div>
</body>

Answer 1

如果我正确理解了这个问题：

.item {
      flex: 1;
      text-align: center;
}

如果您的意思是以整个div为中心，请使用：

.container {
    margin: 0 auto;
}

Answer 2

我希望你的代码工作正常，只是应用了背景，并观察到最右边的div之后没有空格

请参阅此bootply http://www.bootply.com/T0TTJD1kTO

Answer 3

请检查代码。右边没有空的空间。 padding: 10px的{{1}}和body的{{1}} .container margin-bottom: 30px; .item margin-bottom: 10px;。我想您需要了解有关flex box的更多信息。

body
{
    margin: 0;
    padding: 10px;

    background-color: #898989;
}
.container
{
    display: -webkit-box;
    display: -webkit-flex;
    display:    -moz-box;
    display: -ms-flexbox;
    display:         flex;

    margin-bottom: 30px;

    border: 2px solid #000;

    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
    -ms-flex-align: center;
            align-items: center;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
       -moz-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
       -moz-box-pack: start;
    -ms-flex-pack: start;
            justify-content: flex-start;
}

.container .item
{
    display: -webkit-box;
    display: -webkit-flex;
    display:    -moz-box;
    display: -ms-flexbox;
    display:         flex;

    margin-bottom: 10px;

    border: 5px solid #f0f;

    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
    -ms-flex-align: center;
            align-items: center;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
       -moz-box-flex: 1;
    -ms-flex-positive: 1;
            flex-grow: 1;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
    -ms-flex-pack: center;
            justify-content: center;
}

<body>
     <div class="container">
      <div class="item">Hello World</div>
      <div class="item">It is me</div>
      <div class="item">BYE</div>
    </div>
    <div class="container">
      <div class="item">Hello World, again!</div>
      <div class="item">It is me, again?</div>
      <div class="item">BYE</div>
    </div>
   </body>

Answer 4

而不是flex：1你可以在子项上使用不透明度：0.99，它将解决你的问题。

以下是小提琴的链接：

    .item {
       opacity: 0.99;
   }

这是因为所有孩子都有相同的名字，这造成了一些问题。

其他解决此问题的方法是在css中删除flex:1或删除.item，它会自动解析它。

以下是我的小提琴中的工作示例，您可以查看它。

https://jsfiddle.net/ABhimsaria/z7a4b7jo/

记住Flex容器的初始设置非常重要。

其中一些设置包括：

flex-direction: row - 弹性项目将水平对齐。

justify-content: flex-start - 弹性项目将叠加在主轴上的线的开头。

align-items: stretch - flex项目将展开以涵盖容器的交叉大小。

flex-wrap: nowrap - flex项目被强制保留在一行中。

flex-shrink: 1 - 允许灵活项目缩小

请注意上一次设置。

因为默认情况下允许弹性项目收缩（这可以防止它们溢出容器），所以可以覆盖指定的flex-basis / width / height。

例如，flex-basis: 100px或width: 100px加上flex-shrink: 1，不一定是100px。

要渲染指定的宽度 - 并保持固定 - 您需要禁用收缩：

div {
   width: 100px;
   flex-shrink: 0;
}  
OR

div {
  flex-basis: 100px;
  flex-shrink: 0;
}
OR, as recommended by the spec:

flex: 0 0 100px;    /* don't grow, don't shrink, stay fixed at 100px */

一些很酷的有用链接，可以深入了解flex以及与它们一起玩：

http://flexboxfroggy.com/

https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

Center and bottom-align flex items

https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Answer 5

你需要交换

justify-content: space-between;

的

justify-content: space-around;

工作示例：

＆＃13;

.container {
    display: flex;
    justify-content: space-around;
}

.item {
    flex: 1 1 33%;
    margin: 6px;
    padding: 6px;
    color: rgb(255,255,255);
    background-color: rgb(255,0,0);
    font-weight: bold;
}

＆＃13;

    <div class="container">
        <div class="item">Hello World</div>
        <div class="item">It is me</div>
        <div class="item">BYE</div>
    </div>
    <div class="container">
        <div class="item">Hello World, again!</div>
        <div class="item">It is me, again?</div>
        <div class="item">BYE</div>
    </div>

＆＃13;

HTML Flex divs在右侧留下空白区域

5 个答案: