Question

我遇到的问题是在整个浏览器选项卡的大小调整过程中，flexbox无法使图片居中。图片为例。

如所见，位于中心的项目不会一直居中，而是在右侧留出较大的空间，直到下一个项目包装完毕为止。

这是完全伸出的html页面，它的右侧仍然有空格，甚至align-items标签也不起作用。

我试图将flex属性转移到不同的容器。我尝试添加其他属性，例如<!doctype html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <textarea cols="10" rows="3"> b = 1 c = 2 a = b + c </textarea> <input type="button" value="send" onClick="comput()"> <script> function comput(){ //do some think return a,b,c; } </script> </body> </html>等。但这似乎没有任何区别。

flex-wrap:1

我已经被困了很长时间了，我以为我要去某个地方。由于最近重新学习，我为我的糟糕代码表示歉意。

谢谢

Answer 1

使用此代码尝试一下，我仅将两行从#articleContainer移到#itemContainer并添加了flex-wrap: wrap;

#articleContainer {
    height:100%;
    width:100%;
}

#itemContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#logopic {
    margin-right:10px;
    margin-left:10px;
    height:20%;
}

Flexbox调整内容不居中

1 个答案: