国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

FlexBox 布局詳解

you_De / 1452人閱讀

摘要：很久沒(méi)有寫博客了，這里把之前學(xué)習(xí)布局的一篇筆記整理了一下。其在文檔流中的直接子元素將成為。子元素在容器內(nèi)排列的方向稱為主軸，跟主軸垂直的方向稱為輔軸。

很久沒(méi)有寫博客了，這里把之前學(xué)習(xí) flex 布局的一篇筆記整理了一下。發(fā)布到博客上。趕一個(gè)五月的末班車吧。還是得堅(jiān)持啊!!

flex 彈性布局
FlexBox 可控制子元素:

水平或垂直排成一行

控制子元素的對(duì)齊方式

控制子元素的高度／寬度

控制子元素的顯示順序

控制子元素是否折行

display:flex; 創(chuàng)建 Flexbox 元素
在 flex 布局中必須理解的概念就是區(qū)分主軸和輔軸(側(cè)軸):

在項(xiàng)目中我們使用 display:flex; 創(chuàng)建 Flexbox 元素，那么該元素就成為了一個(gè) flex container( 彈性的容器)。
其在文檔流中的直接子元素將成為 flex item。
flex item 子元素在容器內(nèi) 排列的方向稱為主軸，跟主軸垂直的方向稱為 輔軸。

方向相關(guān)屬性 flex-direction

設(shè)置子元素排列方向 (其實(shí)也就是主軸的排列方向)

取值 row | row-reverse | column | column-reverse

默認(rèn) row:

其中不同的設(shè)置，效果大致如下 :

flex-wrap

元素在主軸方向排放時(shí)，能否換行

取值:nowrap | wrap | wrap-reverse

默認(rèn) nowrap，不換行

/*base css*/
.container{
    width: 400px;
    margin: 20px;
    line-height: 40px;
    font-size: 20px;
    color: #fff;
    display:flex;
}

.item{
    margin: 10px;
    width: 100px;
    line-height: 40px;
    text-align: center;
}

合并屬性: flex-flow ， 上面兩個(gè)屬性的縮寫

<"flex-direction"> || <"flex-wrap">

默認(rèn): flex-flow: row nowrap;

這里直接結(jié)合兩個(gè)屬性看就好。

order

指定擺放時(shí)的順序，從小到大

取值:默認(rèn) 0 ，(支持負(fù)值和正值)

彈性相關(guān)屬性，都是設(shè)置在子元素上的 flex-basis

設(shè)置 flex item 的初始寬／高

取值: main-size |

默認(rèn): main-size: 主軸方向的寬度 (根據(jù) flex-direction設(shè)置，水平排列時(shí)，設(shè)置的是寬度；垂直排列時(shí)，設(shè)置的高度)

flex-grow

定義每一個(gè)子元素在盒子內(nèi)的彈性

拓展盒子剩余空間的能力(空間富余時(shí))

取值:

取值:默認(rèn) 0 ，整數(shù)小數(shù)都可

剩余空間的分配規(guī)則 : flex-basis + flow-grow/sum(flow-grow)*remain remain 表示多余的空間

這里可以看到 只設(shè)置 flex-basis 相當(dāng)與設(shè)置元素的 width



flex-shrink

定義元素收縮的能力(空間不足時(shí))

取值:

取值 : 默認(rèn) 1 ，平方(值為 0 時(shí)，不收縮)

不足空間收縮的規(guī)則 : flex-basis + flow-grow/sum(flow-grow)*remain remain 表示不足的空間 (負(fù)值)



合并屬性: flex

<"flex-grow"> || <"flex-shrink"> || <"flex-basis">

默認(rèn): flex: 0 1 main-size; 看上面


對(duì)齊 相關(guān)的屬性 justify-content

設(shè)置子元素在主軸方向上的對(duì)其方式

取值: flex-start | flex-end | center | space-between | space-around

默認(rèn) flex-start

例子:切換主軸方向時(shí)

align-items

設(shè)置在輔軸上的對(duì)齊方式。

取值: flex-start | flex-end | center | baseline | stretch

默認(rèn) stretch

align-self 設(shè)置在子元素上

多帶帶設(shè)置子元素在輔軸方向的對(duì)齊方式

取值: flex-start | flex-end | center | baseline | stretch

默認(rèn) stretch

align-content

多行內(nèi)容 設(shè)置在輔軸方向上，行的對(duì)齊方式

取值: flex-start | flex-end | center | space-between | space-around |stretch

默認(rèn) stretch 拉伸

guowenfh
本文原地址： https://blog.guowenfh.com/201...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/50858.html

相關(guān)文章

  • CSS三欄布局——多種方法詳解，比較兼容性

    摘要：題目假設(shè)高度已知，請(qǐng)寫出三欄布局，其中左欄右欄寬度各為，中間自適應(yīng)三欄布局的種方案這是一道經(jīng)典的面試題，下面記錄了布局的種方法。 題目:假設(shè)高度已知，請(qǐng)寫出三欄布局，其中左欄、右欄寬度各為300px，中間自適應(yīng). 三欄布局的5種方案 這是一道經(jīng)典的面試題，下面記錄了css布局的5種方法。 三欄布局 * { margin: 0; ...

    馬忠志 評(píng)論0 收藏0

  • FlexBox 布局詳解

    摘要：很久沒(méi)有寫博客了，這里把之前學(xué)習(xí)布局的一篇筆記整理了一下。其在文檔流中的直接子元素將成為。子元素在容器內(nèi)排列的方向稱為主軸，跟主軸垂直的方向稱為輔軸。 很久沒(méi)有寫博客了，這里把之前學(xué)習(xí) flex 布局的一篇筆記整理了一下。發(fā)布到博客上。趕一個(gè)五月的末班車吧。還是得堅(jiān)持啊!! flex 彈性布局FlexBox 可控制子元素: 水平或垂直排成一行 控制子元素的對(duì)齊方式 控制子元素的高度／...

    incredible 評(píng)論0 收藏0

  • CSS及布局

    摘要：經(jīng)過(guò)半年的打磨，正式發(fā)布，主要是新增了一些常用組件，并使用命名，為接下來(lái)的微信小程序開發(fā)做好準(zhǔn)備。這兩種方式實(shí)現(xiàn)的瀑布流式布局均支持首屏和網(wǎng)頁(yè)窗口大小改變時(shí)的列數(shù)自適應(yīng)。主要是對(duì)于標(biāo)準(zhǔn)里的布局方式草案中的布局方式進(jìn)行一些總結(jié)。 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問(wèn)題：怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開始學(xué)習(xí) CSS 的時(shí)候，看...

    jaysun 評(píng)論0 收藏0

  • 前端-CSS3&H5

    摘要：高度模型淺識(shí)為的簡(jiǎn)寫，簡(jiǎn)稱為塊級(jí)格式化上下文，為瀏覽器渲染某一區(qū)域的機(jī)制，中只有和中還增加了和。并非所有的布局都會(huì)在開發(fā)中使用，但是其中也會(huì)涉及一些知識(shí)點(diǎn)。然而在不同的純制作各種圖形純制作各種圖形多圖預(yù)警 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問(wèn)題：怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開始學(xué)習(xí) CSS 的時(shí)候，看到 float 屬性不...

    xiaolinbang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<