譯者：前端小智
來源: dev
作者：Joy Shaheb
點贊再看，微信搜索**【大遷世界】,B站關注【前端小智】**這個沒有大廠背景，但有著一股向上積極心態人，本文
GitHubhttps://github.com/qq449245884/xiaozhi 上已經收錄，文章的已分類，也整理了很多我的檔案，和教程資料，
最近開源了一個 Vue 組件，還不夠完善，歡迎大家來一起完善它，也希望大家能給個 star 支持一下，謝謝各位了，
github 地址：https://github.com/qq449245884/vue-okr-tree
2021 年了，我們在來重新復習一下 flexbox 的用法，還有一些用的比較少的屬性，方便大家理解，這里使用有趣的圖片來講解，
FlexBox 架構
FlexBox圖表
flex-direction
flex-item在flex-container內部分布的行/列方向，
justify-content
justify-content用于設定或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式
align-content
align-content 屬性設定了瀏覽器如何沿著彈性盒子布局的縱軸和網格布局的主軸在內容項之間和周圍分配空間，
align-items
和justify-content不同的是，align-items主要是垂直方向的對齊方式，屬性介紹：flex-start、flex-end、center、initial、inherit，
align-content 和 align-items 區別：
align-items適用于單行情況下，只有上對齊，下對齊，居中和拉伸align-content適應于換行(多行)的情況下(單行情況下無效)，可以設定對齊，下對齊拉伸以及平均分配剩下空間等屬性值，- 總結就是單行找
align-items多行找align-content，
align-self
flex - grow | shrink | wrap
-
flex-grow : 根據flex容器的寬度來增加
flex-item的大小， -
flex-shrink 屬性指定了 flex 元素的收縮規則，flex 元素僅在默認寬度之和大于容器的時候才會發生收縮，其收縮的大小是依據 flex-shrink 的值，
-
flex-wrap 指定 flex 元素單行顯示還是多行顯示 ，如果允許換行，這個屬性允許你控制行的堆疊方向，
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Go640ub5-1611621233326)(/img/bVcNNly)]
簡寫
-
flex:它是flex-grow， flex-shrink和flex-basis組合的簡寫，
-
flex-basis：這類似于為
flex-item添加寬度，只是更加靈活，flex-basis: 10em它將彈性專案的初始大小設定為10em，其最終大小將取決于可用空間，flex-grow和flex-shrink，
完~，我是小智，我要去刷碗了，我們下期見！
代碼部署后可能存在的BUG沒法實時知道，事后為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug，
原文：https://dev.to/joyshaheb/flexbox-sheets-in-2021-css-2021-3edl
交流
文章每周持續更新，可以微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了很多我的檔案，歡迎Star和完善，大家面試可以參照考點復習，另外關注公眾號，后臺回復福利，即可看到福利，你懂的，
CSDN認證博客專家
TypeScript
ECMAScript 6
前端框架
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/253118.html
標籤：其他
上一篇：（二）原型和原型鏈