成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Flex布局

dongfangyiyu / 946人閱讀

摘要：布局干什么用常常會(huì)因?yàn)樵鼐又兄惖膯栴}苦惱，這時(shí)就可以借助，它為盒狀模型提供強(qiáng)大的靈活性。基本概念采用布局的元素，稱為容器，簡(jiǎn)稱容器，容器子元素稱為項(xiàng)目，簡(jiǎn)稱項(xiàng)目。

Flex布局干什么用？

常常會(huì)因?yàn)樵鼐又兄惖膯栴}苦惱，這時(shí)就可以借助Flex（Flexible Box），它為盒狀模型提供強(qiáng)大的靈活性。

基本概念

采用Flex布局的元素，稱為Flex容器，簡(jiǎn)稱“容器”，容器子元素稱為Flex項(xiàng)目，簡(jiǎn)稱“項(xiàng)目”。

兩軸：主軸（main axis）、交叉軸（cross axis）；

兩軸起始位置：main start和main end、cross start和cross end；

屬性 
display:other values | flex | inline-flex;
css的columns在伸縮容器上沒有效果


float、clear和vertical-align在伸縮項(xiàng)目上沒有效果
屬性 容器屬性
屬性 說明 特性
flex-direction 主軸方向 排列
flex-wrap 項(xiàng)目換行效果 排列
flex-flow flex-direction和flex-wrap復(fù)合屬性 排列
justify-content 定義伸縮項(xiàng)目沿著主軸線的對(duì)齊方式 對(duì)齊
align-items 定義子項(xiàng)在容器內(nèi)沿側(cè)軸線的對(duì)齊方式 對(duì)齊
align-content 調(diào)準(zhǔn)伸縮行在伸縮容器里的對(duì)齊方式 對(duì)齊
項(xiàng)目屬性
屬性 說明 特性
order 控制伸縮項(xiàng)目在他們的伸縮容器出現(xiàn)的順序 排列
flex-grow 定義子項(xiàng)寬度之和不足父元素寬度時(shí)，子項(xiàng)拉伸的比例 面積
flex-shrink 定義子項(xiàng)寬度之和超過父元素寬度時(shí)，子項(xiàng)縮放的比例 面積
flex-basis 定義子項(xiàng)的初始寬度，若子項(xiàng)寬度之和超過父元素寬度時(shí)，子項(xiàng)按照flex-basis的比例縮放 對(duì)齊
flex flex-grow、flex-shrink、flex-basis縮寫 面積
align-self 定義單個(gè)子項(xiàng)與其他項(xiàng)目不一樣的對(duì)齊方式 對(duì)齊
圖解容器屬性

flex-direction(創(chuàng)建主軸，定義項(xiàng)目的方向)

flex-direction: row | row-reverse | column | column-reverse;

row(默認(rèn)值)：在“l(fā)tr”排版方式下從左向右排列；在“rtl”排版方式下從右向左排列。

flex-wrap(項(xiàng)目換行)

flex-wrap: nowrap | wrap | wrap-reverse;

flex-flow(復(fù)合屬性)

flex-flow: flex-direction || flex-wrap

justify-content(定義伸縮項(xiàng)目沿著主軸線的對(duì)齊方式)

justify-content: flex-start | flex-end | center | space-between | space-around;

align-items(定義伸縮項(xiàng)目可以在伸縮容器的當(dāng)前行的側(cè)軸上對(duì)齊方式)

align-items: flex-start | flex-end | center | baseline | stretch;

align-content(調(diào)準(zhǔn)伸縮行在伸縮容器里的對(duì)齊方式)

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

請(qǐng)注意本屬性在只有一行的伸縮容器上沒有效果
項(xiàng)目屬性

order(控制伸縮項(xiàng)目在他們的伸縮容器出現(xiàn)的順序)

order:[integer] /* 傳入整數(shù)，default 0 */

flex-grow(定義子項(xiàng)寬度之和不足父元素寬度時(shí)，子項(xiàng)拉伸的比例)

flex-grow:[number] // 傳入數(shù)字,default 0

flex-shrink(定義子項(xiàng)寬度之和超過父元素寬度時(shí)，子項(xiàng)縮放的比例)

flex-shrink:[number] // 傳入數(shù)字， default 1

flex-basis(定義子項(xiàng)的初始寬度，若子項(xiàng)寬度之和超過父元素寬度時(shí)，子項(xiàng)按照flex-basis的比例縮放)

flex-basis: [length] | [percentage]  | auto; /* default auto*/

flex(flex-grow、flex-shrink、flex-basis縮寫)
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。

align-self(定義單個(gè)子項(xiàng)與其他項(xiàng)目不一樣的對(duì)齊方式)

align-self: auto | flex-start | flex-end | center | baseline | stretch;

參考資料

Flex 布局教程：語法篇
一個(gè)完整的Flexbox指南
不再混淆，一次搞懂！圖解flexbox十余個(gè)屬性

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

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

相關(guān)文章

  • CSS6：flex布局

    摘要：主要用來做橫向的布局。元素的布局學(xué)習(xí)我分成兩個(gè)部分，第一個(gè)部分是元素布局。以下幾個(gè)屬性影響著元素的布局。詳細(xì)還是看分鐘徹底弄懂布局講的非常明白。的時(shí)候，伸縮時(shí)需要考慮，按照進(jìn)行等比例伸縮。布局套路學(xué)習(xí)布局教程實(shí)例篇 前言：這是我看過最好的flex布局教程：30分鐘徹底弄懂flex布局 傳統(tǒng)的布局方法與flex屬性通覽 showImg(https://segmentfault.com/i...

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

  • 結(jié)合CSS3的布局新特征談?wù)劤Ｒ?em>布局方法

    摘要：案例圖片來自騰訊年的一道前段筆試題，有興趣的同學(xué)可以去看一下。騰訊前端面試稿布局布局指頁面布局像一張宣傳海報(bào)，以一張精美圖片作為頁面的設(shè)計(jì)中心。 寫在前面最近看到《圖解CSS3》的布局部分，結(jié)合自己以前閱讀過的一些布局方面的知識(shí)，這里進(jìn)行一次基于CSS2、3的各種布局的方法總結(jié)。 常見的頁面布局 在拿到設(shè)計(jì)稿時(shí)，作為一個(gè)前端人員，我們首先會(huì)做的應(yīng)該是為設(shè)計(jì)圖大致地劃分區(qū)域，然后選擇一...

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

  • 結(jié)合CSS3的布局新特征談?wù)劤Ｒ?em>布局方法

    摘要：案例圖片來自騰訊年的一道前段筆試題，有興趣的同學(xué)可以去看一下。騰訊前端面試稿布局布局指頁面布局像一張宣傳海報(bào)，以一張精美圖片作為頁面的設(shè)計(jì)中心。 寫在前面最近看到《圖解CSS3》的布局部分，結(jié)合自己以前閱讀過的一些布局方面的知識(shí)，這里進(jìn)行一次基于CSS2、3的各種布局的方法總結(jié)。 常見的頁面布局 在拿到設(shè)計(jì)稿時(shí)，作為一個(gè)前端人員，我們首先會(huì)做的應(yīng)該是為設(shè)計(jì)圖大致地劃分區(qū)域，然后選擇一...

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

  • 幾種常見布局的flex寫法

    摘要：幾種常見布局的寫法首先要對(duì)父元素設(shè)置布局方式，同時(shí)在本案例中，利用媒體查詢，當(dāng)屏幕分辨率小于的時(shí)候，布局變成縱向排列。兩列布局定寬是的簡(jiǎn)寫方式。 flex布局目前基本上兼容主流的瀏覽器，且實(shí)現(xiàn)方式簡(jiǎn)單。我整理了flex的一些知識(shí)點(diǎn)，并且總結(jié)歸納了幾種常見布局的flex寫法 ?flex基礎(chǔ)知識(shí)點(diǎn) flex-grow和flex-shrink相關(guān)計(jì)算公式 公式1：子元素空間 < 父容器 父...

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

  • 我所知道的flex布局 —— 上篇

    摘要：布局也經(jīng)歷了一段演變歷史。不同于將要出現(xiàn)的網(wǎng)格布局針對(duì)目標(biāo)為大比例布局，彈性盒布局更適用于應(yīng)用組件和小比例布局。常規(guī)布局是基于塊和內(nèi)聯(lián)流方向，而布局是基于流。 前言 你還在用display+position+float來進(jìn)行css布局嗎？有沒有覺得用傳統(tǒng)的這種布局方法來實(shí)現(xiàn)特殊布局特別麻煩困難，例如：垂直居中。今天來記錄一下自己對(duì)flex布局的了解（雖然不算神馬新東西了都可以說是舊東西...

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

  • CSS Flex 布局：用 Flex 來實(shí)現(xiàn)圣杯布局

    摘要：布局是年提出的，目前已經(jīng)被所有瀏覽器支持，也是我現(xiàn)在布局的首選方案。實(shí)踐用來實(shí)現(xiàn)圣杯布局圣杯布局指的是一種最常見的網(wǎng)站布局。一般情況下，這種布局要求固定高度，固定寬度，自適應(yīng)。 Flex 布局是 W3C 2009年提出的，目前已經(jīng)被所有瀏覽器支持，也是我現(xiàn)在布局的首選方案。Flex 布局使用起來是非常簡(jiǎn)單的，本文談一談平時(shí)使用可能需要注意的問題。 align-content 平時(shí)使用 ...

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

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

0條評(píng)論

閱讀需要支付1元查看
<