CSS flex - 将商品对齐到左侧，并将商品对齐到中心

是否有可能使用display: flex;将所有商品对齐到左侧（flex-wrap: wrap; align-items: flex-start; justify-content: flex-start;），但它自己到中间的商品（如margin: 0 auto;）？CSS flex - 将商品对齐到左侧，并将商品对齐到中心

Flex容器似乎总是被缩放到100％宽度，为什么自动容限不起作用。有没有人有一个想法如何实现我的尝试？

.container { 
    width: auto; 
    margin: 0 auto; 
    display: -webkit-flex; 
    display: -moz-flex; 
    display: -ms-flexbox; // IE10 uses -ms-flexbox 
    display: -ms-flex; // IE11 
    display: flex; 
    -webkit-flex-wrap: wrap; 
    -moz-flex-wrap: wrap; 
    -ms-flex-wrap: wrap; 
    flex-wrap: wrap; 
    -webkit-justify-content: flex-start; 
    -moz-justify-content: flex-start; 
    -ms-justify-content: flex-start; 
    justify-content: flex-start; 
    -webkit-align-items: flex-start; 
    -moz-align-items: flex-start; 
    -ms-align-items: flex-start; 
    align-items: flex-start; 
} 
.item { 
    display: block; 
    width: 220px; 
}

编辑：重要！虽然容器具有自动宽度！

来源

2015-11-17 SoBiT

请发表您的代码。 –

是这样的吗？ http://jsfiddle.net/smaye81/hvtz1j1s/ – sma

那么，现在我们知道，flex允许我们设置容器的宽度。不幸的是，我想有一个自动宽度（根据flexbox内的项目）。但无论如何谢谢 – SoBiT

是的，父母（或机构）和display:inline-flex代替display:flex使用text-align:center。

这与display:inline-block和display:block之间的差异大致相同。

MDN说：

该元件表现得像一个内联元件，并根据Flexbox的模型规定了它的内容。

body { 
 
    background: #eee; 
 
    text-align: center; 
 
} 
 
.inner { 
 
    display: inline-flex; 
 
    width: auto; 
 
    /* stated but not required */ 
 
    background: #ccc; 
 
    padding: 15px; 
 
} 
 
p { 
 
    padding: 15px; 
 
    border: 1px solid red; 
 
}

<div class="inner"> 
 
    <p>1</p> 
 
    <p>2</p> 
 
    <p>3</p> 
 
</div>

来源

2015-11-17 16:16:56

您可以使用'justify-content：center'将外层保持为'display：flex'，这样你就可以使用所有其他的flex属性来修改内层，并且你可以保持内层也是flex。 – kmiyashiro

啊我看到了，我看错了这个问题 – kmiyashiro

父，你可以使用display: inline-flex，其作为display: inline-block同样的效果相比，display: block。这个flex不会再声称整个页面的宽度。你可以找到更多有关此柔性：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

来源

2015-11-17 16:13:51 xbilek18

CSS flex - 将商品对齐到左侧，并将商品对齐到中心

回答

相关问题