Question

我看过像我这样的一些问题，但似乎没有一个问题得到成功回答。我的问题可能很简单，但我不会弄错。

我互相使用了几个flexbox。当我更改浏览器大小时，它应该以相同的方式调整大小。但是在某种程度上，孩子们正在溢出父Flexbox - 丑陋

因为我没有发现我的错误，所以我开始了一个新的HTML文档 - 我仍然有错误。＆＃34;游戏盒的孩子们不按我的意愿去做。

这是一个小提琴：Live-Demo

感谢您的帮助 - RoetzerBub

＆＃13;

html , body, main {
    margin: 0;
    padding: 0;
    min-height: 100%;
    min-width: 100%;
}

body{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
header, footer{
    display: flex;
    min-width: 100%;
    justify-content: center;
}
header{
    flex-shrink: 0;
    background-color: #cc0000;
    color: white;
    z-index: 10;
    margin-bottom: 10px;
}

main{
    display: flex;
    justify-content: center;
    align-items: center;
}

footer{
    background-color: #444444;
    color: white;
    flex-shrink: 0;
    z-index: 10;
    margin-top: 10px;
}
/*as*/
.gamebox{
    display: flex;
    flex-direction: row;
    min-width: 30%;
    max-width: 45%;
    border: 2px solid #b30000;
    justify-content: space-between;
    align-items: center;
}

.gb_left, .gb_center, .gb_right{
    margin: 2%;
    justify-content: space-around;
    background-color: yellow;
}

.gb_left{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
}

.gb_right{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
    
}

.gb_center{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

＆＃13;

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="flexstyle.css">
    </head>
    <body>
        <header>HEADER</header>
        <main>
            
            <div class="gamebox">
                <div class="gb_left">
                    FLAG
                    TEAM-A
                </div>
                <div class="gb_center">
                    type<br/>
                    SCORE<br/>
                    date
                </div>
                <div class="gb_right">
                    TEAM-B
                    FLAG  
                </div>
              
            </div>
        
        </main>
        <footer>FOOTER</footer>
    </body>
</html>

＆＃13;

Answer 1

将儿童定义为弹性容器在这里确实没有意义 - 它们中没有元素（div或spans），只有文本（即没有任何可以作为弹性项目的东西）。

在下面的小提琴中，我删除了所有这些并使用了以下CSS设置：

 .gamebox{
    display: flex;
    flex-direction: row;
    min-width: 30%;
    max-width: 45%;
    border: 2px solid #b30000;
    justify-content: space-between;
    align-items: center;
}

.gb_left, .gb_center, .gb_right{
    margin: 2%;
    background-color: yellow;
    min-width: 29%;
    word-wrap: break-word;
}

最后一个确保当一个单词长于其容器的宽度时，它会被破坏。

这是小提琴的分叉：https://jsfiddle.net/o6wxy5z7/

Answer 2

@media (max-width:400px) {
  .gamebox {
    flex-direction: column;
  }
}

可防止溢出并与响应式设计元素保持联系

Answer 3

为了防止元素溢出其容器，您需要允许它们缩小和增长，例如：

.gb_left{ display: flex; justify-content: space-between; align-items: center; flex-grow: 1; }

可以更改为：

.gb_left{ display: flex; justify-content: space-between; align-items: center; flex: 1 1 auto; }

使用简写分配flex-grow，flex-shrink和flex-basis。

Answer 4

首先，有四种样式用于不属于它们的flex的子项。

从flex子项中删除它们（.gb-left，.gb-center和.gb-right。）：

显示
证明含量
对齐项
挠曲方向

这是一篇很好的文章，内容应该分配给谁：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

现在你的问题是孩子们没有缩小超过某一点 - 文本尽可能多地包装，然后当文本尽可能小时它保持宽度盒子打开了。

有一种简单的解决方法，但这意味着要切断文本。

只需指定overflow：hidden;给孩子们。

.gb_left, .gb_center, .gb_right {
    overflow: hidden;
    margin: 2%;
    background-color: yellow;
}

Flexboxs儿童溢出父母

4 个答案: