使用flexbox

Question

我有一个包含4个项目的列。由于内容不同，所有项目都有不同的宽度。使用flexbox，有没有人知道如何让所有项目与最大项目的宽度相同，同时保持它们全部居中？

这是我目前所拥有的。

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将展示展示更改为inline-flex并移除align-items: center并在text-align: center上设置body

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以制作容器inline-flex并将文本对齐中心放在父

上

body {
  /*or parent container*/
  text-align: center;
}

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

.item {
  background: #efefef;
  border: 1px solid #ccc;
  width: 100%;
  text-align:left;
}

<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 3

您可以在; with cte as ( select userid, reportTo from userinfo a where not exists (select * from userinfo b where b.reportTo = a.userid) union all select ui.userid, ui.reportTo from userinfo ui join cte on cte.reportTo = ui.userid where ui.reportTo is not null union all select cte.userid, ui.reportTo from userinfo ui join cte on cte.reportTo = ui.userid where cte.reportTo is not null ) , managers as ( select x.reportTo, count(*) TotalempUnderUser from (select distinct userid, reportTo from cte where reportTo is not null) x group by x.reportTo ) select managers.reportTo as userid, managers.TotalempUnderUser from managers union all select userid, 0 from userinfo ui left join managers on ui.userid = managers.reportTo where managers.reportTo is null order by 1 ; div中再创建一个flex-container并从该元素中删除container，以便内部的展示项align-items: center。

stretch

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

 .inner {
  display: flex;
  flex-direction: column;
}

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

Answer 4

只需在css中使用此代码：

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