Question

我想创建一个页面居中的页面，其中各个项目的宽度都不固定（参见图片）。

我尝试使用flexbox，但这似乎是要在整个盒子上填满方块。我也尝试使用普通的margin: 0 auto方法，但是如果您没有固定的宽度，那将不起作用。

有没有办法做到这一点？我当然更喜欢纯CSS。

Answer 1

这里是一个示例，希望对您有所帮助^^：

.parent {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.child {
  margin-bottom:20px;
  min-width:200px;
  min-height:80px;
  background-color:#555;
}

.child-fluid {
  min-width:100%;
  display:flex;
  padding:5px;
}

.content {
  min-height:80px;
  background-color:#AAA;
  flex:1;
  margin:5px;
}

<!DOCTYPE html>
    <html>
    <head>
    <title>Page Title</title>
    </head>
    <body>
    
    <div class="parent">
    	<div class="child"></div>
        <div class="child"></div>
        <div class="child" style="min-width: 350px;"></div>
        <div class="child child-fluid">
        	<div class="content"></div>
            <div class="content"></div>
        </div>
        <div class="child"></div>
    </div>
    
    </body>
    </html>

Answer 2

下面是一个使用flexbox的示例。任何地方都没有宽度设置。

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.element {
  background-color: lightblue;
  border: thin solid blue;
}

span:not(first-child) {
  margin-left: 1rem;
  border: thin solid red;
}

<div class="container">
  <div class="element">This is text</div>
  <div class="element">This is also some text</div>
  <div class="element">
    <span>And even in different</span>
    <span>boxes on the same row</span>
  </div>
</div>

Answer 3

使用弹性框，您必须在父级上设置宽度。虽然您可以做类似

的操作，但不一定要固定宽度

    .parent{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
       }

可能有效。

没有固定宽度的居中列

3 个答案: