Question

我是一位热心的新编码员，自从我的Geocities时代以来，他一直没有兴趣建立网站。

我正在处理论坛皮肤，我想在两个信息框上方的水平行中显示工作人员图标。

我是使用flexboxes的新手，它让我适应。我无法弄清楚为什么我的行显示为列。代码还有其他问题，但在我理清了flex行的内容后，我可以将这些问题解决。

我做错了什么？有没有更好的方法来获得我正在寻找的结果？

Codepen在这里：https://codepen.io/anon/pen/boQgzV

相关的CSS在这里：

#td-stfcontnr {
display: flex;
flex-direction: row;
margin: 0 auto;
width: 100%;
height: 100%;
}

.td-staff1 {
width: 350px;
height: 116px;
position: relative;
}

.td-staff2 {
width: 350px;
height: 116px;
position: relative;
flex-basis: 200px;
}

.td-staff3 {
width: 350px;
height: 116px;
position: relative;
flex-basis: 200px;
}

.td-staff4 {
width: 350px;
height: 116px;
position: relative;
flex-basis: 200px;
}

.td-staff5 {
width: 350px;
height: 116px;
position: relative;
flex-basis: 200px;
}

这是相关的HTML代码：

<div class='td-banner'>
<div class='tdbncntnr'>
<div class='overimg'><img src='http://placehold.it/980x525'></div>
<div class='textblockhold'>
<div id='td-stfcontnr'>
<div class='td-staff1'>
<div class='td-stf'>
<div class='td-stf-img'>
<span class='td-imgrsz'><img src='placehold.it/200'></span></div>
<div class='td-stf-txt'><a href="STAFFER"></a></div></div>
<div class='td-staff2'>
<div class='td-stf'>
<div class='td-stf-img'>
<span class='td-imgrsz'><img src='placehold.it/200'></span></div>
<div class='td-stf-txt'><a href="STAFFER"></a></div></div></div>
<div class='td-staff3'>
<div class='td-stf'>
<div class='td-stf-img'>
<span class='td-imgrsz'><img src='placehold.it/200'></span></div>
<div class='td-stf-txt'><a href="STAFFER"></a></div></div></div>
<div class='td-staff4'>
<div class='td-stf'>
<div class='td-stf-img'>
<span class='td-imgrsz'><img src='placehold.it/200'></span></div>
<div class='td-stf-txt'><a href="STAFFER"></a></div></div></div>
<div class='td-staff5'>
<div class='td-stf'>
<div class='td-stf-img'>
<span class='td-imgrsz'><img src='placehold.it/200'></span></div>
<div class='td-stf-txt'><a href="STAFFER"></a></div></div></div></div>

编辑

以澄清我正在尝试制作水平行而不是垂直行

Answer 1

有关如何使用flexbox的信息，请参阅MDN flexbox overview。

可以使用display: flex;声明flexbox容器，并且直接子节点将继承此显示为flex子节点。理解轴是如何重要的。虽然工作。您可以使用：

构造一个简单的flexbox行

.container {
  display: flex;
  flex-flow: row nowrap; // Row alignment, does not overflow to second row
  justify-content: start; // Determines content alignment along main axis (horizontal)
  align-content: start; // Determines row alignment/distribution along cross axis (vertical)
  align-items: start; // Determines content alignment along cross axis (vertical)
}

.container > * {
  display: flex;
  flex: auto 1 1; // flex-basis auto, grow & shrink
  width: 50px; height: 50px;
}

我的弹性行显示为一列，它让我发疯

1 个答案: