答案 0 :(得分:0)
如果你理解我的这个例子,那么你就能理解有关flexbox的最重要的事情。这是HTML标记
<div class="main">
<div class="sidebar firestarter">sidebar</div>
<div class="extraWrap">
<div class="header firestarter">
<p><b>header</b>
</div>
<div class="xyz firestarter" id="x">
<p>
this your red div
</p>
</div>
<div class="x firestarter" <p>
this your grey div
</p>
</div>
<div class="footer firestarter">
<p><b>footer</b> (fixed height)</p>
</div>
</div>
</div>
这里是指向笔的链接,您可以在其中查看css并使用值: http://codepen.io/damianocel/pen/XmxmQE
我在悬停到所有部分时添加了一个动画。
这将是响应式的,可以很容易地修改为移动设备的任何其他布局,但不依赖于flexbox交叉浏览器,可用性还有很多不足之处。