[[378278]]

本文已經過原作者Joy Shaheb 授權翻譯。

2021 年了，我們在來重新復習一下 flexbox 的用法，還有一些用的比較少的屬性，方便大家理解，這里使用有趣的圖片來講解。

FlexBox 架構

FlexBox圖表

flex-directionflex-item在flex-container內部分布的行/列方向。

justify-contentjustify-content用于設置或檢索彈性盒子元素在主軸(橫軸)方向上的對齊方式

align-contentalign-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 | wrapflex-grow : 根據flex容器的寬度來增加flex-item的大小。

flex-shrink 屬性指定了 flex 元素的收縮規則。flex 元素僅在默認寬度之和大于容器的時候才會發生收縮，其收縮的大小是依據 flex-shrink 的值。

flex-wrap 指定 flex 元素單行顯示還是多行顯示 。如果允許換行，這個屬性允許你控制行的堆疊方向。

簡寫

flex:它是flex-grow， flex-shrink和flex-basis組合的簡寫。

flex-basis：這類似于為flex-item添加寬度，只是更加靈活。flex-basis: 10em它將彈性項目的初始大小設置為10em，其最終大小將取決于可用空間，flex-grow和flex-shrink。

完~，我是小智，我要去刷碗了，我們下期見!

譯者：前端小智 來源: dev 作者：Joy Shaheb原文：https://dev.to/joyshaheb/flexbox-sheets-in-2021-css-2021-3edl

本文轉載自微信公眾號「大遷世界」，可以通過以下二維碼關注。轉載本文請聯系大遷世界公眾號。