css - 使用 flexbox 的居中、等宽、列元素

Question

我有一列 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>

Answer 1

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

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>