div的布局

div的布局

研究了三個小時。

給我們一個頁面，我們能把它分割成一個個的box。我們要解析出來的就是這些box的橫縱關系。

以下面這個元件為例，我們可以将其分割：

父級設定flex，擇其内部的子元素，就是橫排

<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>