代码之家 › 专栏 › 技术社区 › BaronGrivet

我可以在行/列排列的位置创建CSS flexbox表吗?

flexbox css

BaronGrivet · 技术社区 · 7 年前

我们正在VueJS中使用动态数据创建一个比较表。要比较的项目数可能会有所不同。

数据结构如下:

项目
- 摘要
- 特征
  - 文本

我们想在VueJS中创建一个列宽度相等的表,所有行都排成一行。

+------------+------------+------------+------------+
|Item 1      |Item 2      |Item 3      |Item 4      |
|            |            |            |            |
|Foo bar oof |Rab foo     |Bar rab abr |Oof         |
|rab ofo     |            |Foo oof ofo |            |
|            |            |            |            |
+------------+------------+------------+------------+
|Feature 1   |Feature 1   |Feature 1   |Feature 1   |
|            |            |            |            |
|Bar rab abr |Foo oof ofo |Oof Foo Bar |Rab oof bar |
|foo bar oof |Rab foo     |Bar rab abr |oof         |
|rab ofo     |            |Foo oof ofo |            |
|            |            |            |            |
+------------+------------+------------+------------+
|Feature 2   |Feature 2   |Feature 2   |Feature 2   |
|            |            |            |            |
|Foo oof ofo |Oof foo     |Bar rab abr |Ofo rab ofo |
|rab oof bar |            |oof bar rab |bar         |
|            |            |            |            |
+------------+------------+------------+------------+

<table>

然后我想知道是否可以使用 flex

下面是一个随机生成项目/内容数的flexbox示例: https://jsfiddle.net/BaronGrivet/rwhebczL/1/

是否可以使用flexbox来实现我们想要的目标?

如果不是的话,我们的数据结构的最佳方法是什么?

1 回复 | 直到 7 年前

Temani Afif 7 年前

如果可以将所有元素放在同一个包装器中(删除 .item 包装)。

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /*3 items*/
  grid-template-rows: repeat(5, auto); /*title  + 4 feature*/
  grid-auto-flow: column; /*we fill column first*/
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /*3 items*/
  grid-template-rows: repeat(5, auto); /*title  + 4 feature*/
  grid-auto-flow: column; /*we fill column first*/
  
  grid-gap:5px;
}
p {
 margin:0;
}

<h2>Compare Items:</h2>
<div class="wrapper">
  <div class="child">
    <h3>and damn </h3>
    <p>milk like me yours wind go but for yard want that what yours </p>
  </div>
  <div class="child">
    <h4>Feature 1</h4>
    <p>like their what makes want can lalala you you all that want they milk warm thing crazy but  </p>
  </div>
  <div class="child">
    <h4>Feature 2</h4>
    <p>time la boys lala milk but all know up it want are makes to makes i makes charge brings teach for you wind what like way wind i my waiting up boys than lose know you want go for yours than know the than better like time charge than i me </p>
  </div>
  <div class="child">
    <h4>Feature 3</h4>
    <p>to milk but all boys are teach teach lose guys go like guys to but milk makes waiting guys charge think are wind way are boys makes </p>
  </div>
  <div class="child">
    <h4>Feature 4</h4>
    <p>its all are it know warm makes thing way what lose waiting and milk their shake it for my that teach want thing that way guys damn know its crazy can right their guys better it to but yours </p>
  </div>
  <div class="child">
    <h3>yours better </h3>
    <p>up thing makes wind the think but to have want go i wind charge waiting lalala brings makes teach think yard all warm want they go lalala boys and for time are boys and their minds thing makes are brings la warm me for the yard its guys its know know
      teach wind than minds i my for and are </p>
  </div>
  <div class="child">
    <h4>Feature 1</h4>
    <p>what minds  </p>
  </div>
  <div class="child">
    <h4>Feature 2</h4>
    <p>wind crazy their yard want shake that have but brings crazy right they i charge its but they guys they i like it waiting want right its warm the are guys time yours can milk all for up </p>
  </div>
  <div class="child">
    <h4>Feature 3</h4>
    <p>my know milk minds waiting i lalala think are what but warm but its like up thing it you but shake teach are la you what its and lala la for guys but my that it yard </p>
  </div>
  <div class="child">
    <h4>Feature 4</h4>
    <p>for milk the than time go warm lalala damn la boys you it minds the time </p>
  </div>
  <div class="child">
    <h3>its yours </h3>
    <p>makes minds i warm it you wind damn charge you minds minds know teach right they la that think they minds lalala wind me waiting minds right their up my for </p>
  </div>
  <div class="child">
    <h4>Feature 1</h4>
    <p>guys lala wind yard know  </p>
  </div>
  <div class="child">
    <h4>Feature 2</h4>
    <p>better go its shake yard the its they what can that lose the to waiting than guys than right their la minds but i are time better boys makes to boys want lalala crazy they but what waiting but i shake shake crazy than guys better that </p>
  </div>
  <div class="child">
    <h4>Feature 3</h4>
    <p>are right teach the time me lalala what thing up brings wind thing to thing better thing have their crazy makes than yard have i warm to and guys waiting all guys guys better and think right my yard but its makes guys you all charge warm </p>
  </div>
  <div class="child">
    <h4>Feature 4</h4>
    <p>lose know but go than charge its go brings lalala up brings they yours you all waiting damn to think teach lose damn go what but boys teach la have are they it i brings minds time </p>
  </div>
</div>

如果项目(列)的数量是动态的,则可以使用:

grid-auto-columns: 1fr;

.wrapper {
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-rows: repeat(5, auto); /*title  + 4 feature*/
  grid-auto-flow: column; /*we fill column first*/
  
  grid-gap:5px;
}
p {
 margin:0;
}

<h2>Compare Items:</h2>
<div class="wrapper">
  <div class="child">
    <h3>and damn </h3>
    <p>milk like me yours wind go but for yard want that what yours </p>
  </div>
  <div class="child">
    <h4>Feature 1</h4>
    <p>like their what makes want can lalala you you all that want they milk warm thing crazy but  </p>
  </div>
  <div class="child">
    <h4>Feature 2</h4>
    <p>time la boys lala milk but all know up it want are makes to makes i makes charge brings teach for you wind what like way wind i my waiting up boys than lose know you want go for yours than know the than better like time charge than i me </p>
  </div>
  <div class="child">
    <h4>Feature 3</h4>
    <p>to milk but all boys are teach teach lose guys go like guys to but milk makes waiting guys charge think are wind way are boys makes </p>
  </div>
  <div class="child">
    <h4>Feature 4</h4>
    <p>its all are it know warm makes thing way what lose waiting and milk their shake it for my that teach want thing that way guys damn know its crazy can right their guys better it to but yours </p>
  </div>
  <div class="child">
    <h3>yours better </h3>
    <p>up thing makes wind the think but to have want go i wind charge waiting lalala brings makes teach think yard all warm want they go lalala boys and for time are boys and their minds thing makes are brings la warm me for the yard its guys its know know
      teach wind than minds i my for and are </p>
  </div>
  <div class="child">
    <h4>Feature 1</h4>
    <p>what minds  </p>
  </div>
  <div class="child">
    <h4>Feature 2</h4>
    <p>wind crazy their yard want shake that have but brings crazy right they i charge its but they guys they i like it waiting want right its warm the are guys time yours can milk all for up </p>
  </div>
  <div class="child">
    <h4>Feature 3</h4>
    <p>my know milk minds waiting i lalala think are what but warm but its like up thing it you but shake teach are la you what its and lala la for guys but my that it yard </p>
  </div>
  <div class="child">
    <h4>Feature 4</h4>
    <p>for milk the than time go warm lalala damn la boys you it minds the time </p>
  </div>
  <div class="child">
    <h3>its yours </h3>
    <p>makes minds i warm it you wind damn charge you minds minds know teach right they la that think they minds lalala wind me waiting minds right their up my for </p>
  </div>
  <div class="child">
    <h4>Feature 1</h4>
    <p>guys lala wind yard know  </p>
  </div>
  <div class="child">
    <h4>Feature 2</h4>
    <p>better go its shake yard the its they what can that lose the to waiting than guys than right their la minds but i are time better boys makes to boys want lalala crazy they but what waiting but i shake shake crazy than guys better that </p>
  </div>
  <div class="child">
    <h4>Feature 3</h4>
    <p>are right teach the time me lalala what thing up brings wind thing to thing better thing have their crazy makes than yard have i warm to and guys waiting all guys guys better and think right my yard but its makes guys you all charge warm </p>
  </div>
  <div class="child">
    <h4>Feature 4</h4>
    <p>lose know but go than charge its go brings lalala up brings they yours you all waiting damn to think teach lose damn go what but boys teach la have are they it i brings minds time </p>
  </div>
  <div class="child">
    <h3>its yours </h3>
    <p>makes minds i warm it you wind damn charge you minds minds know teach right they la that think they minds lalala wind me waiting minds right their up my for </p>
  </div>
  <div class="child">
    <h4>Feature 1</h4>
    <p>guys lala wind yard know  </p>
  </div>
  <div class="child">
    <h4>Feature 2</h4>
    <p>better go its shake yard the its they what can that lose the to waiting than guys than right their la minds but i are time better boys makes to boys want lalala crazy they but what waiting but i shake shake crazy than guys better that </p>
  </div>
  <div class="child">
    <h4>Feature 3</h4>
    <p>are right teach the time me lalala what thing up brings wind thing to thing better thing have their crazy makes than yard have i warm to and guys waiting all guys guys better and think right my yard but its makes guys you all charge warm </p>
  </div>
  <div class="child">
    <h4>Feature 4</h4>
    <p>lose know but go than charge its go brings lalala up brings they yours you all waiting damn to think teach lose damn go what but boys teach la have are they it i brings minds time </p>
  </div>
</div>

<div class="wrapper">
  <div class="child">
    <h3>and damn </h3>
    <p>milk like me yours wind go but for yard want that what yours </p>
  </div>
  <div class="child">
    <h4>Feature 1</h4>
    <p>like their what makes want can lalala you you all that want they milk warm thing crazy but  </p>
  </div>
  <div class="child">
    <h4>Feature 2</h4>
    <p>time la boys lala milk but all know up it want are makes to makes i makes charge brings teach for you wind what like way wind i my waiting up boys than lose know you want go for yours than know the than better like time charge than i me </p>
  </div>
  <div class="child">
    <h4>Feature 3</h4>
    <p>to milk but all boys are teach teach lose guys go like guys to but milk makes waiting guys charge think are wind way are boys makes </p>
  </div>
  <div class="child">
    <h4>Feature 4</h4>
    <p>its all are it know warm makes thing way what lose waiting and milk their shake it for my that teach want thing that way guys damn know its crazy can right their guys better it to but yours </p>
  </div>
  <div class="child">
    <h3>yours better </h3>
    <p>up thing makes wind the think but to have want go i wind charge waiting lalala brings makes teach think yard all warm want they go lalala boys and for time are boys and their minds thing makes are brings la warm me for the yard its guys its know know
      teach wind than minds i my for and are </p>
  </div>
  <div class="child">
    <h4>Feature 1</h4>
    <p>what minds  </p>
  </div>
  <div class="child">
    <h4>Feature 2</h4>
    <p>wind crazy their yard want shake that have but brings crazy right they i charge its but they guys they i like it waiting want right its warm the are guys time yours can milk all for up </p>
  </div>
  <div class="child">
    <h4>Feature 3</h4>
    <p>my know milk minds waiting i lalala think are what but warm but its like up thing it you but shake teach are la you what its and lala la for guys but my that it yard </p>
  </div>
  <div class="child">
    <h4>Feature 4</h4>
    <p>for milk the than time go warm lalala damn la boys you it minds the time </p>
  </div>
</div>