div的布局

div的布局

研究了三个小时。

给我们一个页面，我们能把它分割成一个个的box。我们要解析出来的就是这些box的横纵关系。

以下面这个组件为例，我们可以将其分割：

父级设置flex，择其内部的子元素，就是横排

父级设置成block，择其内部的子元素，就是竖排。

所以，以上面为例，我们可以写出如下结构：

<div card style="block">
    <div class="header" style="flex"> 
        <div class="avatar-container"></div>
        <div class="username"></div>
    </div>
 
    <div class="content" style="block">
        <div class="title"></div>
        <div class="details"></div>
        <div class="image"></div>
    </div>
 
    <div class="footer" style="flex">
        <div class="views"> </div>
        <div class="comments"> </div>
        <div class="likes"> </div>
    </div>
</div>

拿到页面我们内心中应该有这个框架。

当然，block有点鸡肋，flex可以设置flex-direction属性，也能实现竖排的效果。

详细的教程，可以看阮一峰关于flex的一篇博客。

如果您有任何关于文章的建议，欢迎评论或在 GitHub 提 PR

作者：dutrmp19
本文为作者原创，转载请在 文章开头 注明出处：https://www.cnblogs.com/dutrmp19/p/15491391.html
遵循 CC 4.0 BY-SA 版权协议

---