與 Taro 團隊核心開發兼運營的一次 CSS 佈局討論的記錄

林小志發表於2021-12-30
CSS

今天上班在很認真的尋訪候選人，檢視招聘網站上的一些人選的資訊時，突然收到 Taro 團隊的核心開發兼運營（我說他是開發，他說自己是運營）同學的微信訊息，如下圖：


好多人都是長時間沒聊了，現在溝通方式多了，反而大家平時溝通卻少了。原本我以為他是來找我閒聊幾句，順便會介紹幾個朋友給我，讓我幫忙推薦崗位呢。我這個小獵頭哦，好南啊……

迴歸正題，當時他問了這個之後，我心中有幾個小疑惑還不清楚。畢竟要完成一個需求，至少要了解這個需求的本質是什麼，同時會出現的一些問題有哪些。

所以，看到他的問題，把自己所理解的一個最終效果描述一下，大概就是這樣，容器盒子會被撐開的，而現在是沒有撐開，如圖：

看到需求，腦子想也沒想就冒出了一個“flex 不可以嗎”。事後想想，這真的是腦熱反應，事實後面也證明了這樣的反應往往有時候還是會有問題的。

需求點大概瞭解了，那麼在頁面中，還是有一些不可控的因素的，比如內容增加之後會怎麼樣呢，就像這樣：

元素內容過多，撐開了盒子之後，相對應的就會破壞了寬度對齊方式。

瞭解需求，對於可能出現的問題也明白了，接下來就是動手實操了。但，我現在是獵頭，不是碼農，不應該在上班時間敲程式碼。可是，這個問題讓我心好癢，於是摸個魚，偷個懶，快速按照自己的 flex 佈局設想實操了一把。

結果，就是前面看到的問題情況。先是外層 flex-direction: row; 然後再裡面是 flex-direction: column;，結果 column 的時候，我們設定了 height 才會結合 flex-wrap: wrap; 進行換行的，而且最終多個換行之後，會超出父級元素的範圍，但不會撐開父級元素。

對，就是前面他的問題。

於是我想到了使用多列布局的方式，嘗試了一下，嗯，的確是可行的。但又有一個問題來了，使用 -wekbit-column-count: 2; 是能滿足 2 列的時候，那麼當裡面的子元素有三列的時候怎麼辦呢？難道用 JS 去計算？顯示不合理啊。

嗯，好吧，的確暫時沒有好的想法。

不過，沒多久，他發了一條訊息給我，說搞定了，丟了一個 url 地址給我。開啟一看，啊呀，我怎麼就沒想到 writing-mode 這個屬性呢，前面整 flex 的時候還想到了 direction，結果把 writing-mode 給忘了。

晚上結合那個 demo，簡化了一下，順帶記錄一下。對於 writing-mode 就不擴充套件開來講了，MDN 上都有，主要就是控制文字的書寫方向。

<div class="demo">
    <div class="box">
        <div class="list" id="list">
            <div class="item">item_01</div>
            <div class="item">item_02</div>
            <div class="item">item_03</div>
            <div class="item">item_04</div>
            <div class="item">item_05</div>
            <div class="item">item_06</div>
            <div class="item">item_07</div>
            <div class="item">item_08</div>
            <div class="item">item_09</div>
        </div>
    </div>
    <div class="box">002</div>
    <div class="box">003</div>
</div>
.box {
    display: inline-block;
    vertical-align: top;
    min-width: 200px;
    height: 130px;
    margin: 10px;
    padding: 15px 20px;
    border: 1px solid #bbb;
}
.list {
    display: inline-block;
    writing-mode: vertical-lr;
}
.item {
    display: inline-block;
    margin: 5px 10px 10px;
    writing-mode: horizontal-tb;
    background-color: rgba(255, 0, 0, .5);
}

再來一個最終效果看看吧。

demo地址：http://lab.tianyizone.com/demo/writing-mode-layer.html

相關文章