資訊專欄INFORMATION COLUMN
摘要：開始最近研究一個(gè)框架，剛好里面也實(shí)現(xiàn)了布局的算法，雖然平時(shí)也用到做一些簡(jiǎn)單的布局，但是深入到算法實(shí)現(xiàn)的時(shí)候，發(fā)現(xiàn)自己對(duì)某些概念倒是沒那么清晰，立馬谷歌把幾個(gè)涉及的屬性都好好理清一下，權(quán)當(dāng)一個(gè)自我梳理。
開始
最近研究一個(gè)框架，剛好里面也實(shí)現(xiàn)了flex布局的算法，雖然平時(shí)也用到flex做一些簡(jiǎn)單的布局，但是深入到算法實(shí)現(xiàn)的時(shí)候，發(fā)現(xiàn)自己對(duì)flex某些概念倒是沒那么清晰，立馬谷歌把幾個(gè)flex涉及的屬性都好好理清一下，權(quán)當(dāng)一個(gè)自我梳理。
main-axis和cross-axismain其實(shí)跟flex-direction這個(gè)屬性相當(dāng)有關(guān)系，關(guān)系如下圖：
根據(jù)flex-direction的值不同，main-axis方向相應(yīng)也不同。
既然有方向這個(gè)概念，這個(gè)時(shí)候justify-content屬性（justify-content主要負(fù)責(zé)調(diào)整main-axis上元素的布局），在取值為flex-start和flex-end時(shí)就要注意了。
而cross-axis是垂直于main-axis的。
當(dāng)flex-direction取值為row或者row-reverse時(shí)cross-axis方向是由下往上。
當(dāng)flex-direction取值為column或者column-reverse時(shí)cross-axis方向是由左往右。
align-items和align-content首先align-item和align-content都是應(yīng)用在cross-axis上的元素。
flex布局默認(rèn)情況下元素是不會(huì)換行的，這個(gè)時(shí)候就是align-items起作用的時(shí)候，但是當(dāng)有多行的情況時(shí)，align-items的表現(xiàn)就有點(diǎn)令人失望了。例如你期待是這樣一個(gè)網(wǎng)格的布局：
但是實(shí)際會(huì)是這樣的效果：
這個(gè)網(wǎng)格怎么看都怪怪的有木有。
這個(gè)時(shí)候就是align-content屬性大顯神威的時(shí)候了，align-content主要應(yīng)用在存在多行的場(chǎng)景下，但是只有單行的時(shí)候，它就失去作用了。
flex-basis可以說是一個(gè)并太起眼的屬性但是確有很大的意義。
flex-basis的作用，主要在與flex計(jì)算剩余空間時(shí)起作用，如果你設(shè)置flex-basis為一個(gè)明確的大小，在計(jì)算剩余空間時(shí)會(huì)先去減去這一部分，然后根據(jù)剩余空間為正或?yàn)樨?fù)去應(yīng)用flex-grow或flex-shrink進(jìn)行縮放。
當(dāng)flex-basis是默認(rèn)值auto時(shí)，flex-basis等同于元素的自身寬度（例如你設(shè)置了width就是該設(shè)置的值，如果width也為auto，那就等同于元素內(nèi)容的寬度）。
當(dāng)flex-basis為0時(shí)，就等同于完全依賴于flex-grow的比例和剩余空間的大小去分配。
計(jì)算剩余空間時(shí)，padding, margin, border和flex-basis是事先扣除，再根據(jù)flex-grow去分配空間的。
justify-content為space-around時(shí)，元素和父元素的間隙是元素與元素間的間隙的一半。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/51326.html
摘要：樣式聲明通過一個(gè)稱為級(jí)聯(lián)的過程來解釋和決定。級(jí)聯(lián)級(jí)聯(lián)可能是中最容易被弄錯(cuò)的屬性之一。因此很容易認(rèn)為元素的視覺邊界等于其寬度，但情況并非如此。 如果你在日常工作中使用CSS，那么你的主要目標(biāo)很可能集中在使事情看起來是正確的。最終得到的正確結(jié)果遠(yuǎn)比如何實(shí)現(xiàn)更重要。這意味著相比正確的語法和視覺效果我們更少關(guān)注CSS的實(shí)現(xiàn)原理。 你可能還沒有意識(shí)到，但CSS的視覺效果通常是操縱隱藏屬性的間接結(jié)...
摘要：樣式聲明通過一個(gè)稱為級(jí)聯(lián)的過程來解釋和決定。級(jí)聯(lián)級(jí)聯(lián)可能是中最容易被弄錯(cuò)的屬性之一。因此很容易認(rèn)為元素的視覺邊界等于其寬度，但情況并非如此。 如果你在日常工作中使用CSS，那么你的主要目標(biāo)很可能集中在使事情看起來是正確的。最終得到的正確結(jié)果遠(yuǎn)比如何實(shí)現(xiàn)更重要。這意味著相比正確的語法和視覺效果我們更少關(guān)注CSS的實(shí)現(xiàn)原理。 你可能還沒有意識(shí)到，但CSS的視覺效果通常是操縱隱藏屬性的間接結(jié)...
摘要：實(shí)戰(zhàn)之微信錢包騰訊服務(wù)界面網(wǎng)格布局是讓開發(fā)人員設(shè)計(jì)一個(gè)網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。對(duì)于移動(dòng)端適配，不同的公司不同的團(tuán)隊(duì)有不同的解決方案。柵格系統(tǒng)用于處理頁面多終端適配的問題。 grid實(shí)戰(zhàn)之微信錢包 騰訊服務(wù)界面 CSS3網(wǎng)格布局是讓開發(fā)人員設(shè)計(jì)一個(gè)網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。而不是使用浮動(dòng)制作一個(gè)網(wǎng)格，實(shí)際上是你將一個(gè)元素聲明為一個(gè)網(wǎng)格容器，并把元素內(nèi)容置于網(wǎng)格中。 移動(dòng)端頁面適配—...
摘要：高度模型淺識(shí)為的簡(jiǎn)寫，簡(jiǎn)稱為塊級(jí)格式化上下文，為瀏覽器渲染某一區(qū)域的機(jī)制，中只有和中還增加了和。并非所有的布局都會(huì)在開發(fā)中使用，但是其中也會(huì)涉及一些知識(shí)點(diǎn)。然而在不同的純制作各種圖形純制作各種圖形多圖預(yù)警 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問題：怎樣通過 CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開始學(xué)習(xí) CSS 的時(shí)候，看到 float 屬性不...
閱讀 2126·2021-11-23 09:51
閱讀 3712·2021-10-20 13:49
閱讀 1718·2021-09-06 15:13
閱讀 1828·2021-09-06 15:02
閱讀 3181·2021-09-02 15:11
閱讀 899·2019-08-29 15:37
閱讀 1744·2019-08-29 13:24
閱讀 2283·2019-08-29 11:28
