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
的一篇博客。