web-dev-qa-db-ja.com

フレックスdivの幅をコンテンツに合わせる方法

私の考えは、適応可能なdiv幅を与えることです。アイテムが1つだけの場合、幅はコンテナdiv内のアイテムと同じである必要があります。

これを行う方法の提案はありますか？

例： http://codepen.io/tomasfrancisco/pen/PNvLLw

HTML：

<div id="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div id="container">
  <div class="item"></div>
</div>

CSS：

#container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 200px;
  padding: 10px;
  margin: 20px;
  background-color: blue;
}
#container .item {
  width: 80px;
  height: 50px;
  background-color: red;
  margin: 10px;
}
htmlcsshtml5css3flexbox
13
Tomás Francisco

display: inline-flexを使用できます

#container {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 200px;
  padding: 10px;
  margin: 20px;
  background-color: blue;
}
#container .item {
  width: 80px;
  height: 50px;
  background-color: red;
  margin: 10px;
}
<div id="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div id="container">
  <div class="item"></div>
</div>
30
Nenad Vracar