Question

我并排有两个牢房。

单元格受内部容器限制，而该容器受外部容器限制。

这个想法是使两个单元格的宽度相等，即使它们的内容不同。

每个单元格的宽度必须是最宽元素的宽度。

然后将内部容器居中（宽度应为最宽单元格的两倍）。

目前，我有两个结果：

它们的宽度相同，但延伸到可用页面宽度的一半。
内部容器收缩到中心，但细胞不均匀宽度。

不用JavaScript就能实现我想要的东西吗？

body {
  background-color: lime;
}
.container {
  margin: 20px;
}

.fb {
    display: flex;
    justify-content: center;
}
.fb-container {
    display: flex;
    align-items: center;
    flex: 1;
    /* flex: 0; */
    
    background-color: #fff;
    border: solid 0.1rem rgba(0,0,0,.12);
}
.fb-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;

    color: rgba(0,0,0, .87);
    font-size: 14px;    height: 46px;
    padding: 0 16px;
}

.fb-item:not(:first-child) {
    border-left: solid 1px rgba(0,0,0,.12);
}

<div class="container">
    <div class="fb">
        <div class="fb-container">
            <div class="fb-item">
                <span class="fb_label">Much longer</span>
            </div>
            <div class="fb-item">
                <span class="fb_label">Short</span>
            </div>
        </div>
    </div>
</div>

Answer 1

这更适合CSS网格。您可以保留flexbox以便居中。

body {
  background-color: lime;
}

.container {
  margin: 20px;
}

.fb {
  display: flex;
  justify-content: center;
}

.fb-container {
  display: grid; /* Added this */
  align-items: center;
  grid-template-columns: 1fr 1fr; /* Added this */
  /* to replace the middle border*/
  grid-gap:1px;
  background:#e6e6e6 padding-box;
  /* */
  border: solid 0.1rem #e6e6e6;
}

.fb-item {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, .87);
  font-size: 14px;
  height: 46px;
  padding: 0 16px;
  background-color: #fff;
}

<div class="container">
  <div class="fb">
    <div class="fb-container">
      <div class="fb-item">
        <span class="fb_label">Much loooooonger</span>
      </div>
      <div class="fb-item">
        <span class="fb_label">Short</span>
      </div>
    </div>
  </div>
</div>

或者我不推荐使用flexbox的骇人想法：

body {
  background-color: lime;
}

.container {
  margin: 20px;
}

.fb {
  display: flex;
  justify-content: center;
}

.fb-container {
  display: flex;
  flex-direction:column; /* This will make them both equal */
  transform:translateX(-50%); /* Hack */
}

.fb-item {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, .87);
  font-size: 14px;
  height: 46px;
  padding: 0 16px;
  background:#fff;
  border: solid 0.1rem rgba(0,0,0,.12);
}
.fb-item:not(:first-child) {
  border-left: none;
  transform:translateY(-100%) translateX(100%);  /* Hack */
}

<div class="container">
  <div class="fb">
    <div class="fb-container">
      <div class="fb-item">
        <span class="fb_label">Much loooooooonger</span>
      </div>
      <div class="fb-item">
        <span class="fb_label">Short</span>
      </div>
    </div>
  </div>
</div>

Answer 2

您可以使项目具有相同的大小，但不能使用css有条件地调整大小，只需将width设置为0，以使flex能够听取增长而不是文本。

div {
  display:flex;
}

div div {
  flex-grow:1;
  border :1px solid black;
  width:0;
}

https://codepen.io/logan-murphy/pen/ewyqQG

Answer 3

在我看来，它也像是典型的表格布局（通过display:table）没有任何漏洞，并且应该适用于IE8 ：

table-layout参见https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

自动

默认情况下，大多数浏览器使用自动表格布局算法。调整表格及其单元格的宽度以适合其内容。

固定

表格和列的宽度由表格和col元素的宽度或单元格第一行的宽度设置。后续行中的单元格不会影响列宽。

在“固定”布局方法下，一旦下载并分析了第一行表，就可以呈现整个表。与“自动”布局方法相比，这可以加快渲染时间，但是后续的单元格内容可能不适合所提供的列宽。单元格使用overflow属性来确定是否剪辑任何溢出的内容，but only if the table has a known width;否则，它们将不会溢出单元格。

演示：

body {
  background-color: lime;
}

.container {
  margin: 20px;
}

.fb {/* can be removed  
  display: flex;
  justify-content: center;
  */
}

.fb-container {
  display:table;
  table-layout: fixed;/* reset table-layout */
  margin:auto;
  background-color: #fff;
  border: solid 0.1rem rgba(0, 0, 0, .12);
}

.fb-item {
  display: table-cell;
  color: rgba(0, 0, 0, .87);
  width: 50%;/* make cols same width , adjust to numbers of ccols */
  vertical-align: middle;
  font-size: 14px;
  height: 46px;
  padding: 0 16px;
}

.fb-item:not(:first-child) {
  border-left: solid 1px rgba(0, 0, 0, .12);
}

<div class="container">
  <div class="fb">
    <div class="fb-container">
      <div class="fb-item">
        <span class="fb_label">Much longer</span>
      </div>
      <div class="fb-item">
        <span class="fb_label">Short</span>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="fb">
    <div class="fb-container">
      <div class="fb-item">
        <span class="fb_label">Much much longer</span>
      </div>
      <div class="fb-item">
        <span class="fb_label">Short</span>
      </div>
    </div>
  </div>
</div>

使项目等于最宽的列和中心

3 个答案: