1.背景介紹：
網頁布局（layout）是css的乙個重點應用。布局的傳統解決方案，基於盒狀模型，依賴display屬性+position屬性+float屬性。它對於那些特殊的布局非常不方便
2023年，w3c提出了一種新方案——flex布局，可以簡便、完整、響應式地實現各種頁面布局。目前，它已經的得到了所有瀏覽器的支援，這意味著，現在就能很安全地使用這項功能。
2.知識剖析：
1.什麼是flex
flex 是flexible box的縮寫，意為「彈性盒子」，用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。塊級元素只需要display屬性為flex即可。行內元素也可以使用flex布局。.box 。webkit核心的瀏覽器，必須加上-webkit字首。
2.基本概念
採用flex布局的元素，稱為flex容器（flex container），簡稱「容器」。它的所有子元素自動成為容器成員。稱為flex專案（flex item），簡稱「專案」。容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。專案預設沿主軸排列
3.容器屬性
flex-direction屬性決定主軸的方向（及專案排列方向）。
flex-wrap屬性定義，如果一條軸線排不下，如何換行。預設情況下為 row nowrap
justify-content屬性定義專案在主軸上的對齊方式
align-items屬性定義專案在交叉軸上的對齊方式
align-content屬性定義了多根軸的對齊方式。如果專案只有一根軸線，該屬性不起作用。
4.專案屬性
order屬性定義專案的排列順序。數值越小，排列越靠前，預設為0
flex-grow屬性定義專案的放大比列，預設為0 即如果存在剩餘空間，也不放大
flex-shrink屬性定義了專案的縮小比列，預設為1，即如果空間不足，該專案縮小
flex-basis 屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小
flex屬性是以上三個的簡寫，預設值為0 1 auto。後兩個屬性可選。該屬性有兩個快捷值：auto （1 1 auto）和none（0 0 auto）。建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值
align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch
2.適用場景：多列盒子浮動時可以採用彈性盒
TiDB 的適用場景和不適用場景
典型的oltp場景 當您需要對海量資料 數十億行 進行隨機 實時讀 寫訪問時 實時 htap 場景 實時htap 混合事務 分析處理 要是有乙個使用tidb的類似oltp的場景，並且希望在tiflash的幫助下原地進行 olap分析時，新鮮的資料，對oltp效能無干擾 資料整合 有多個資料來源時，可...
訊息佇列的適用場景
場景說明 使用者註冊後，需要發註冊郵件和註冊簡訊。傳統的做法有兩種1.序列的方式 2.並行方式。1 序列方式 將註冊資訊寫入資料庫成功後，傳送註冊郵件，再傳送註冊簡訊。以上三個任務全部完成後，返回給客戶端。架構kkq 466097527，歡迎加入 2 並行方式 將註冊資訊寫入資料庫成功後，傳送註冊郵...
Elasticsearch的功能 適用場景 特點
1 分布式的搜尋引擎和資料分析引擎 2 全文檢索，結構化檢索，資料分析 全文檢索 我想搜尋商品名稱包含牙膏的商品，select from products where product name like 牙膏 結構化檢索 我想搜尋商品分類為日化用品的商品都有哪些，select from produc...