每行FlexBox元素

我用flexbox将一组元素整齐地排成一行。现在我需要为这些元素提供清晰的标题，以便定义它们向最终用户显示的内容。我尝试过使用另一个柔性盒，但无论我如何设计它，它似乎都与它下面的柔性盒有不同的比例。每行FlexBox元素

我读了约row wrap能够在多行上对元素进行分组，但是这是动态执行的。此外，在这里也提出了一个关于这个问题的问题，答案是否定的。但是，这是在2012年 - 有事情变了吗？

或者，有没有更好的方法来解决这个问题？也许包含一组垂直柔性盒的水平柔性盒？

的目标是，使它们看起来像下面的图片对齐的元素：

Image

我已经建立了一个快速和肮脏的示范这里：https://jsfiddle.net/qLveL7ae/

来源

2017-04-12 Scary Spice

想起一件大事这里是保持您的标题与它下面的框相同的宽度。这个布局怎么样:(抱歉不能处理你的类名和内联样式）。

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    max-width: 1024px; 
 
    margin: 0 auto; 
 
} 
 

 
.top { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    outline: 1px solid red; 
 
} 
 

 
.top a { 
 
    width: 15.5%; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    padding: 10px 20px; 
 
    color: black; 
 
} 
 

 
.bottom { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    padding: 10px 0; 
 
    outline: 1px solid red; 
 
} 
 

 
.box { 
 
    width: 15.5%; 
 
} 
 

 
.box-short { 
 
    height: 200px; 
 
    border: 1px solid black; 
 
} 
 

 
.box-full { 
 
    height: 300px; 
 
    border: 5px solid black; 
 
}

<div class="wrapper"> 
 
    <section class="top"> 
 
    <a href="#">title</a> 
 
    <a href="#">title</a> 
 
    <a href="#">title</a> 
 
    <a href="#">title</a> 
 
    <a href="#">title</a> 
 
    <a href="#">title</a> 
 
    </section> 
 
    <section class="bottom"> 
 
    <div class="box box-short"></div> 
 
    <div class="box box-full"></div> 
 
    <div class="box box-full"></div> 
 
    <div class="box box-full"></div> 
 
    <div class="box box-full"></div> 
 
    <div class="box box-short"></div> 
 
    </section> 
 
</div>

来源

2017-04-12 18:16:09 StefanBob

不坏。唯一的问题是第二个和倒数第二个标题有些偏斜，而且只会在页面调整大小时增加。这只是我将不得不忍受的事情吗？ –

再次检查，如果这仍然发生，我立即更新它 – StefanBob

采取那个Coker – StefanBob

也许含有一组垂直flexboxes的水平Flexbox的？

这就是我会这么做的。像这样的东西。

.flex { 
 
    display: flex; 
 
} 
 
.col { 
 
    flex-direction: column; 
 
    border: 1px solid black; 
 
    height: 300px; 
 
} 
 
h1 { 
 
    padding: 0 .5em; 
 
} 
 
.col:first-child, .col:last-child { 
 
    height: 200px; 
 
} 
 
.col > div { 
 
    border: 1px solid red; 
 
    flex-grow: 1; 
 
}

<div class="flex"> 
 
    <div class="flex col"> 
 
    <h1>title</h1> 
 
    <div>content</div> 
 
    </div> 
 
    <div class="flex col"> 
 
    <h1>title</h1> 
 
    <div>content</div> 
 
    </div> 
 
    <div class="flex col"> 
 
    <h1>title</h1> 
 
    <div>content</div> 
 
    </div> 
 
    <div class="flex col"> 
 
    <h1>title</h1> 
 
    <div>content</div> 
 
    </div> 
 
    <div class="flex col"> 
 
    <h1>title</h1> 
 
    <div>content</div> 
 
    </div> 
 
    <div class="flex col"> 
 
    <h1>title</h1> 
 
    <div>content</div> 
 
    </div> 
 
    <div class="flex col"> 
 
    <h1>title</h1> 
 
    <div>content</div> 
 
    </div> 
 
    
 
</div>

来源

2017-04-12 18:18:51

每行FlexBox元素

回答

相关问题