Flexbox标题页脚边栏

时间:2016-07-23 12:57:23

标签: css css3 flexbox

我们如何使用flexbox制作这样的东西? enter image description here

1 个答案:

答案 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交叉浏览器,可用性还有很多不足之处。