Html 适应flex div'；将宽度设置为内容，但在单独的行中调整项目

拨弄

---

我希望flex_容器div的宽度适应flex_项的内容。我见过有人使用

display:inline flex

，但这样可以防止内部div出现在单独的行中，这正是我想要的。

您需要将html更新到这一点

.flex_container{
    display: inline-flex;
    align-items: center;
}

.flex_item1{
  background-color: red;
}

.flex_item2{
  background-color: yellow;
}

---

你能分享css吗？@AkshayAggarwal更新了原始帖子。还有小提琴：你希望你的div如何对齐，我想你应该把整个红色方块放在一行，然后是整个黄色方块放在另一行。我已经更新了我的答案，看看它是否是你想要的。

.flex_container{
    display: inline-flex;
    align-items: center;
}

.flex_item1{
  background-color: red;
}

.flex_item2{
  background-color: yellow;
}

 <div class="flex_container">
   <div class="temp">
      <div class="flex_item1">Item</div>
      <label for="" class="flex_item1">I am a Label</label>
 </div>
  <!-- This whole block needs to be in a new line -->
<div class="temp">
   <div class="flex_item2">Item 2</div>
   <label for="" class="flex_item2">I am a Label 2</label>
  </div>
</div> 

.flex_container{

    display: inline-flex;
    align-items: center;
    flex-direction:column;
}

.flex_item1{
  background-color: red;
 }

.flex_item2{
   background-color: yellow;
 }

.temp{

  display:flex;
  flex-direction:row;
 }