css - 使用flexbox的居中，等宽，圆柱元素

我有一列4个项目。由于内容不同，所有项目的宽度也不同。使用flexbox，有人知道如何在使所有物件居中的同时使所有物件与最大物件的宽度相同吗？

这是我目前所拥有的。

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.item {
  background: #efefef;
  border: 1px solid #ccc;
}

<div class="container">
  <div class="item">
    <h3>Item 1</h3>
    <ul>
      <li>Lorem ipsum dolor sit amet</li>
      <li>Lorem ipsum</li>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing</li>
      <li>Lorem ipsum</li>
      <li>Lorem ipsum</li>
      <li>Lorem ipsum</li>
    </ul>
   </div>

  <div class="item">
    <h3>Item 2</h3>
    <ul>
      <li>Lorem ipsum</li>
      <li>Lorem ipsum</li>
      <li>Lorem ipsum dolor sit amet</li>
      <li>Lorem ipsum</li>
    </ul>
  </div>

  <div class="item">
    <h3>Item 3</h3>
    <ul>
      <li>Lorem ipsum</li>
      <li>Lorem ipsum</li>
      <li>Lorem ipsum</li>
      <li>Lorem ipsum dolor sit amet</li>
      <li>Lorem ipsum dolor sit amet</li>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    </ul>
   </div>

  <div class="item">
    <h3>Item 4</h3>
    <ul>
      <li>Lorem ipsum</li>
      <li>Lorem ipsum</li>
    </ul>
  </div>
</div>

最佳答案

将display flex更改为inline-flex并删除align-items: center并在text-align: center上设置body

body {
  text-align: center;
}
.container {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.item {
  background: #efefef;
  border: 1px solid #ccc;
}

<div class="container">
  <div class="item">
    <h3>Item 1</h3>
    <ul>
      <li>Lorem ipsum dolor sit amet</li>
      <li>Lorem ipsum</li>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing</li>
      <li>Lorem ipsum</li>
      <li>Lorem ipsum</li>
      <li>Lorem ipsum</li>
    </ul>
   </div>

  <div class="item">
    <h3>Item 2</h3>
    <ul>
      <li>Lorem ipsum</li>
      <li>Lorem ipsum</li>
      <li>Lorem ipsum dolor sit amet</li>
      <li>Lorem ipsum</li>
    </ul>
  </div>

  <div class="item">
    <h3>Item 3</h3>
    <ul>
      <li>Lorem ipsum</li>
      <li>Lorem ipsum</li>
      <li>Lorem ipsum</li>
      <li>Lorem ipsum dolor sit amet</li>
      <li>Lorem ipsum dolor sit amet</li>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    </ul>
   </div>

  <div class="item">
    <h3>Item 4</h3>
    <ul>
      <li>Lorem ipsum</li>
      <li>Lorem ipsum</li>
    </ul>
  </div>
</div>

关于css - 使用flexbox的居中，等宽，圆柱元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42926549/