資訊專欄INFORMATION COLUMN
摘要：開始最近研究一個框架，剛好里面也實現了布局的算法，雖然平時也用到做一些簡單的布局，但是深入到算法實現的時候，發現自己對某些概念倒是沒那么清晰，立馬谷歌把幾個涉及的屬性都好好理清一下，權當一個自我梳理。
開始
最近研究一個框架，剛好里面也實現了flex布局的算法，雖然平時也用到flex做一些簡單的布局，但是深入到算法實現的時候，發現自己對flex某些概念倒是沒那么清晰，立馬谷歌把幾個flex涉及的屬性都好好理清一下，權當一個自我梳理。
main-axis和cross-axismain其實跟flex-direction這個屬性相當有關系，關系如下圖：
根據flex-direction的值不同，main-axis方向相應也不同。
既然有方向這個概念，這個時候justify-content屬性（justify-content主要負責調整main-axis上元素的布局），在取值為flex-start和flex-end時就要注意了。
而cross-axis是垂直于main-axis的。
當flex-direction取值為row或者row-reverse時cross-axis方向是由下往上。
當flex-direction取值為column或者column-reverse時cross-axis方向是由左往右。
align-items和align-content首先align-item和align-content都是應用在cross-axis上的元素。
flex布局默認情況下元素是不會換行的，這個時候就是align-items起作用的時候，但是當有多行的情況時，align-items的表現就有點令人失望了。例如你期待是這樣一個網格的布局：
但是實際會是這樣的效果：
這個網格怎么看都怪怪的有木有。
這個時候就是align-content屬性大顯神威的時候了，align-content主要應用在存在多行的場景下，但是只有單行的時候，它就失去作用了。
flex-basis可以說是一個并太起眼的屬性但是確有很大的意義。
flex-basis的作用，主要在與flex計算剩余空間時起作用，如果你設置flex-basis為一個明確的大小，在計算剩余空間時會先去減去這一部分，然后根據剩余空間為正或為負去應用flex-grow或flex-shrink進行縮放。
當flex-basis是默認值auto時，flex-basis等同于元素的自身寬度（例如你設置了width就是該設置的值，如果width也為auto，那就等同于元素內容的寬度）。
當flex-basis為0時，就等同于完全依賴于flex-grow的比例和剩余空間的大小去分配。
計算剩余空間時，padding, margin, border和flex-basis是事先扣除，再根據flex-grow去分配空間的。
justify-content為space-around時，元素和父元素的間隙是元素與元素間的間隙的一半。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51326.html
摘要：樣式聲明通過一個稱為級聯的過程來解釋和決定。級聯級聯可能是中最容易被弄錯的屬性之一。因此很容易認為元素的視覺邊界等于其寬度，但情況并非如此。 如果你在日常工作中使用CSS，那么你的主要目標很可能集中在使事情看起來是正確的。最終得到的正確結果遠比如何實現更重要。這意味著相比正確的語法和視覺效果我們更少關注CSS的實現原理。 你可能還沒有意識到，但CSS的視覺效果通常是操縱隱藏屬性的間接結...
摘要：樣式聲明通過一個稱為級聯的過程來解釋和決定。級聯級聯可能是中最容易被弄錯的屬性之一。因此很容易認為元素的視覺邊界等于其寬度，但情況并非如此。 如果你在日常工作中使用CSS，那么你的主要目標很可能集中在使事情看起來是正確的。最終得到的正確結果遠比如何實現更重要。這意味著相比正確的語法和視覺效果我們更少關注CSS的實現原理。 你可能還沒有意識到，但CSS的視覺效果通常是操縱隱藏屬性的間接結...
摘要：高度模型淺識為的簡寫，簡稱為塊級格式化上下文，為瀏覽器渲染某一區域的機制，中只有和中還增加了和。并非所有的布局都會在開發中使用，但是其中也會涉及一些知識點。然而在不同的純制作各種圖形純制作各種圖形多圖預警 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 float 屬性不...
閱讀 2089·2021-11-23 09:51
閱讀 3697·2021-10-20 13:49
閱讀 1706·2021-09-06 15:13
閱讀 1816·2021-09-06 15:02
閱讀 3154·2021-09-02 15:11
閱讀 890·2019-08-29 15:37
閱讀 1732·2019-08-29 13:24
閱讀 2274·2019-08-29 11:28
