我正在尝试创建一个由键值对组成的列表,其中键位于左侧,值位于右侧,另一个位于另一侧.
Authors John Doe
Jane Doe
Max Mustermann
Publishers Johne Doe
Jane Doe
Max Mustermann
我的问题是如何强制每个dd元素之间的换行？我知道浮动元素会很容易,但我想知道是否有可能只使用flexbox.不幸的是,根据定义,我无法将dd元素包装在自己的容器中.
dl {
display: flex;
}
dt {
width: 33%;
}
dd {
margin: 0;
}<dl>
<dt>Authors</dt>
<dd>John Doe</dd>
<dd>Jane Doe</dd>
<dd>Max Mustermann</dd>
</dl>
<dl>
<dt>Publishers</dt>
<dd>John Doe</dd>
<dd>Jane Doe</dd>
<dd>Max Mustermann</dd>
</dl>给定flex布局中的缩略图列表,如果Flex容器具有可变宽度,是否可以仅使用CSS来定位每行的第一个和最后一个元素？
.thumbnails {
display: flex;
margin: 0;
padding: 0;
list-style-type: none;
flex-flow: row wrap;
}
.thumbnail {
width: 250px;
height: 250px;
margin: 5px;
background: #ccc;
border: 1px solid #000;
}<ul class="thumbnails">
<li class="thumbnail"></li>
<li class="thumbnail"></li>
<li class="thumbnail"></li>
<li class="thumbnail"></li>
<li class="thumbnail"></li>
<li class="thumbnail"></li>
</ul>有谁知道如何打开具有一定宽高比的可调整大小的fancyBox(例如16:9)？