Question

我试图找出一种使用flexbox重新创建colspan的方法。

这是我尝试实现的一个简单示例：https://jsfiddle.net/4b63b1ze/

<table style="width: 100%">
    <tr>
        <td rowspan="2">azerty</td>
        <td colspan="2">azerty</td>
        <td rowspan="2">azerty</td>
    </tr>
    <tr>
        <td>azerty</td>
        <td>azerty</td>
    </tr>
</table>

这是我到目前为止所做的：https://jsfiddle.net/pudxj9sy/

HTML：

<div class="container">
    <div class="item">azerty</div>
    <div class="item">
        azerty
        <div class="item">azerty</div>
        <div class="item">azerty</div>
    </div>
    <div class="item">azerty</div>
    <div class="item">azerty</div>
</div>

式：

.container {
    border: 1px solid red;
    display: flex;
}

.item {
    flex-grow: 1;
    flex-basis: 0;
    border: 1px solid gray;
}

所以理论上我必须将第二项的flex-grow设置为2.但是随着内容的动态添加，我不想依赖于通过js / jQuery添加样式属性。

是否只有通过css的可能性？

Answer 1

您需要使用嵌套的flexbox。

<强> HTML

<div class="container">
    <div class="item">azerty</div>
    <div class="item">
           <div class="item2">azerty</div>
           <div class="container-inner2">
              <div class="item3">azerty</div>
              <div class="item3">azerty</div>
           </div>    
    </div>
    <div class="item">azerty</div>
</div>

<强> CSS

.container {
    display: flex; /* primary flex container */
    height: 100px; /* for demo purposes */
    border: 1px solid red; /* for demo purposes */
}

.item {
    display: flex; /* flex items declared flex containers, as well */
    justify-content: center; /* center-align flex items (horizontally, in this case) */
    flex: 1; /* flex items take up all available space */
    border: 1px solid gray; /* for demo purposes */
    margin: 2px;  /* for demo purposes */
}

.item:nth-child(2) { 
    flex-direction: column; /* middle item changes direction from row */
    flex-grow: 2; /* middle column gets 2x available space than siblings */
    text-align: center; /* one less nested flexbox (.item2) */
    border: none;  /* remove redundant border */
    margin: 0; /* remove redundant margin */
}

.item2 {
    flex: 1; /* take all available space */
    border: 1px solid gray;
    margin: 2px;
}

.container-inner2 {
    display: flex; /* nested flexbox; flex-direction back to row (by default) */
    flex: 1;  /* take all available space */
}
.item3 {
    flex: 1; /* available space distributed evenly among flex items */
    border: 1px solid gray;
    margin: 2px;
  }

DEMO：https://jsfiddle.net/pudxj9sy/5/

flex项的子元素的宽度相同

1 个答案: