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 - 將商品對齊到左側，並將商品對齊到中心

回答

相關問題