資訊專欄INFORMATION COLUMN
摘要：目錄布局父項(xiàng)常見(jiàn)屬性布局父項(xiàng)常見(jiàn)屬性一一屬性屬性演示演示二二屬性屬性演示演示
flex-direction:?設(shè)置主軸方向，先設(shè)置誰(shuí)為主軸，剩下的就是側(cè)軸（主軸水平X軸，側(cè)軸縱向Y軸）
justify-content: 設(shè)置主軸上的子元素排列方式
flex-wrap:?設(shè)置子元素是否換行
align-content:?設(shè)置側(cè)軸上子元素的排列方式（多行）
align-items:?設(shè)置側(cè)軸上的子元素排列方式（單行）
flex-flow:?合屬性，相當(dāng)于同時(shí)設(shè)置了flex-direction 和 flex-wrap
為避免引起歧義，下做演示效果的樣式說(shuō)明：
div { /* 給父級(jí)添加flex屬性*/ display: flex; width: 600px; height: 300px; background-color: pink;}div span { width: 150px; height: 100px; background-color: purple; color: #fff; margin: 10px;}flex-direction: row(默認(rèn)從左到右)------------重點(diǎn)
flex-direction:?row-reverse(從右到左)
flex-direction:?column(從上到下)-------------重點(diǎn)
flex-direction:?column-reverse(從下到上)
演示如下：
flex-start(默認(rèn)從頭部開(kāi)始，根據(jù)主軸)---------------重點(diǎn)
flex-end(從尾部開(kāi)始排列)
center(在主軸居中對(duì)齊)----------------------------------重點(diǎn)
space-around(平分剩余空間)---------------------------重點(diǎn)
space-between(先兩邊貼邊，在平分剩余空間)----重點(diǎn)
演示如下：
nowrap(默認(rèn)不換行),
wrap(默認(rèn)換行)-----------重點(diǎn)
演示如下：
flex-start(默認(rèn)值在側(cè)軸的頭部開(kāi)始排列)---------------------------------------------------重點(diǎn)
flex-end(在側(cè)軸的尾部開(kāi)始排列)
center(在側(cè)軸中間顯示)------------------------------------------------------------------------重點(diǎn)
space-around(子項(xiàng)在側(cè)軸平分剩余空間)--------------------------------------------------重點(diǎn)
space-between(子項(xiàng)在側(cè)軸先分布在兩頭，然后平分剩下的空間)
stretch(設(shè)置子項(xiàng)元素高度平分父元素高度)-----------------------------------------------重點(diǎn)
演示如下：
?
flex-start(從上到下)------------------------重點(diǎn)
flex-end(從下到上)
center(擠在一起居中，垂直居中)------重點(diǎn)
stretch(拉伸)--------------------------------重點(diǎn)
演示如下：
相當(dāng)于同時(shí)設(shè)置了flex-direction 和 flex-wrap
演示如下：
?
1.必須給父項(xiàng)添加 display: flex; 屬性
2.flex布局中 ，默認(rèn)子元素不換行，如果放不下就會(huì)無(wú)限縮小子元素的寬度，放到父元素里面
3.justify-content: flex-end 要和?flex-direction:?row-reverse?區(qū)分開(kāi)（注意圖解中子盒子的編號(hào)順序）
4.align-content (多行)，不換行默認(rèn)無(wú)效
5.使用 align-items: stretchs 時(shí)，子盒子不能給高度
生命不息，學(xué)習(xí)不止，鍵盤敲爛，月薪過(guò)萬(wàn)！加油，代碼人
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/124509.html
摘要：高度模型淺識(shí)為的簡(jiǎn)寫，簡(jiǎn)稱為塊級(jí)格式化上下文，為瀏覽器渲染某一區(qū)域的機(jī)制，中只有和中還增加了和。并非所有的布局都會(huì)在開(kāi)發(fā)中使用，但是其中也會(huì)涉及一些知識(shí)點(diǎn)。然而在不同的純制作各種圖形純制作各種圖形多圖預(yù)警 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問(wèn)題：怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開(kāi)始學(xué)習(xí) CSS 的時(shí)候，看到 float 屬性不...
摘要：絕對(duì)底部前端掘金來(lái)自國(guó)外的設(shè)計(jì)達(dá)人，純，可以實(shí)現(xiàn)當(dāng)正文內(nèi)容很少時(shí)，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問(wèn)題前端掘金起因在移動(dòng)端使用布局時(shí)圖片也需要用單位。 CSS 絕對(duì)底部 - 前端 - 掘金來(lái)自國(guó)外的設(shè)計(jì)達(dá)人，純CSS，可以實(shí)現(xiàn): 當(dāng)正文內(nèi)容很少時(shí)，底部位于窗口最下面。當(dāng)改變窗口高度時(shí)，不會(huì)出現(xiàn)重疊問(wèn)題。甚至，創(chuàng)造該CSS的人還專門成立一個(gè)網(wǎng)站介紹這個(gè)CSS底部布局方案...
摘要：但是，從字體上來(lái)說(shuō)雪碧圖制作，使用以及相關(guān)，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標(biāo)準(zhǔn)布局的情況下，回滾到舊版本的，保證移動(dòng)設(shè)備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭(zhēng)，但是有一件事是確定的極大的提升了移動(dòng)端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問(wèn)題：怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開(kāi)始學(xué)習(xí) CSS 的時(shí)候，看到 ...
摘要：但是，從字體上來(lái)說(shuō)雪碧圖制作，使用以及相關(guān)，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標(biāo)準(zhǔn)布局的情況下，回滾到舊版本的，保證移動(dòng)設(shè)備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭(zhēng)，但是有一件事是確定的極大的提升了移動(dòng)端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問(wèn)題：怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開(kāi)始學(xué)習(xí) CSS 的時(shí)候，看到 ...
閱讀 1366·2021-11-23 09:51
閱讀 3530·2021-09-06 15:00
閱讀 1049·2021-08-16 10:57
閱讀 1434·2019-08-30 12:46
閱讀 990·2019-08-29 12:22
閱讀 1671·2019-08-29 11:07
閱讀 3204·2019-08-26 11:23
閱讀 3045·2019-08-23 15:14
