CSS實戰之Flex詳解以及其在微信中的兼容實現

時間  2019-11-07
標籤 css 實戰 flex 詳解 及其 微信 兼容 實現 欄目 CSS 简体版
原文   原文鏈接

Box

Box是傳統的通用的容器屬性，咱們首先來介紹下Box的基本用法。由於在下文講解Flex時候會說起，鑑於部分瀏覽器並不能支持Flex的所有特性，因此不少時候咱們須要利用一些工具或者手寫的方式將新版的Flex的語法轉化爲舊版的Box的語法。若是須要定義一個容器爲Box的話，只須要作以下聲明：javascript

.box{
display: -moz-box; /*Firefox*/
display: -webkit-box; /*Safari,Opera,Chrome*/
display: box;
}

容器屬性

box-pack:子元素主軸對齊

box-pack定義子元素主軸對齊方式。css

.box{
-moz-box-pack: center; /*Firefox*/
-webkit-box-pack: center; /*Safari,Opera,Chrome*/
box-pack: center;
}

box-pack屬性總共有4個值：html

.box{
box-pack: start | end | center | justify;
/*主軸對齊：左對齊（默認） | 右對齊 | 居中對齊 | 左右對齊*/
}

box-align:子元素交叉軸對齊

box-align定義子元素交叉軸對齊方式。java

.box{
-moz-box-align: center; /*Firefox*/
-webkit-box-align: center; /*Safari,Opera,Chrome*/
box-align: center;
}

box-align屬性總共有5個值：node

.box{
box-align: start | end | center | baseline | stretch;
/*交叉軸對齊：頂部對齊（默認） | 底部對齊 | 居中對齊 | 文本基線對齊 | 上下對齊並鋪滿*/
}

box-direction:子元素顯示方向

box-direction定義子元素的顯示方向。jquery

.box{
-moz-box-direction: reverse; /*Firefox*/
-webkit-box-direction: reverse; /*Safari,Opera,Chrome*/
box-direction: reverse;
}

box-direction屬性總共有3個值：css3

.box{
box-direction: normal | reverse | inherit;
/*顯示方向：默認方向 | 反方向 | 繼承子元素的 box-direction*/
}

box-orient:子元素行內排列方式

.box{
-moz-box-orient: horizontal; /*Firefox*/
-webkit-box-orient: horizontal; /*Safari,Opera,Chrome*/
box-orient: horizontal;
}

box-orient屬性總共有5個值：git

.box{
box-orient: horizontal | vertical | inline-axis | block-axis | inherit;
/*排列方向：水平 | 垂直 | 行內方式排列（默認） | 塊方式排列 | 繼承父級的box-orient*/
}

box-lines:子元素換行

.box{
-moz-box-lines: multiple; /*Firefox*/
-webkit-box-lines: multiple; /*Safari,Opera,Chrome*/
box-lines: multiple;
}

box-lines屬性總共有2個值：github

.box{
box-lines: single | multiple;
/*容許換行：不容許（默認） | 容許*/
}

子元素屬性

box-flex:是否容許縮放

box-flex定義是否容許當前子元素伸縮。web

.item{
-moz-box-flex: 1.0; /*Firefox*/
-webkit-box-flex: 1.0; /*Safari,Opera,Chrome*/
box-flex: 1.0;
}

box-flex屬性使用一個浮點值：

.item{
box-flex: <value>;
/*伸縮：<一個浮點數，默認爲0.0，即表示不可伸縮，大於0的值可伸縮，柔性相對>*/
}

box-ordinal-group:子元素顯示次序

box-ordinal-group定義子元素的顯示次序，數值越小越排前。

.item{
-moz-box-ordinal-group: 1; /*Firefox*/
-webkit-box-ordinal-group: 1; /*Safari,Opera,Chrome*/
box-ordinal-group: 1;
}

box-direction屬性使用一個整數值：

.item{
box-ordinal-group: <integer>;
/*顯示次序：<一個整數，默認爲1，數值越小越排前>*/
}

Flex介紹

CSS 2.1 定義了四種佈局模式 ― 由一個盒與其兄弟、祖先盒的關係決定其尺寸與位置的算法：

  • 塊佈局 ― 爲了呈現文檔而設計出來的佈局模式；

  • 行內佈局 ― 爲了呈現文本而設計出來的佈局模式；

  • 表格佈局 ― 爲了用格子呈現 2D 數據而設計出來的佈局模式；

  • 定位佈局 ― 爲了很是直接地定位元素而設計出來的佈局模式，定位元素基本與其餘元素毫無關。

而 Flexbox（伸縮佈局）是爲了呈現複雜的應用與頁面而設計出來的，一種更加方便有效，可以在未知或者動態尺寸的狀況下自由分配容器空間的佈局方式。

flexbox

  • main axis（主軸）

    • main dimension（主軸方向）

    The main axis of a flex container is the primary axis along which flex items are laid out. It extends in the main dimension.

    主軸是伸縮項目在伸縮容器裏分佈所遵循的主要軸線，在主軸方向上延伸。

    • main-start（主軸起點）main-end（主軸終點）

    The flex items are placed within the container starting on the main-start side and going toward the main-end side.

    伸縮項目從容器的主軸起點開始放置，直到主軸終點。

    • main size（主軸尺寸）main size property（主軸尺寸屬性）

    A flex item’s width or height, whichever is in the main dimension, is the item’s main size. The flex item’s main size property is either the width or height property, whichever is in the main dimension.

    伸縮項目在主軸方向上的長或者寬是這個項目的主軸尺寸。一個伸縮項目的主軸屬性是在主軸方向上的長或者寬屬性。

  • cross axis（交叉軸）

    • cross dimension（交叉軸方向）

    The axis perpendicular to the main axis is called the cross axis. It extends in the cross dimension.

    和主軸垂直的軸叫作交叉軸，它在交叉軸方向上延伸。

    • cross-start（交叉軸起點）cross-end（交叉軸終點）

    Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.

    包含伸縮元素的伸縮行從容器的交叉軸起點開始放置，直到交叉軸終點。

    • cross size（交叉軸尺寸）cross size property（交叉軸尺寸屬性）

    The width or height of a flex item, whichever is in the cross dimension, is the item’s cross size. The cross size property is whichever of width or height that is in the cross dimension.

    伸縮項目在交叉軸方向上的長或者寬是它的交叉軸尺寸。交叉軸尺寸屬性則是在交叉軸方向上的長或者寬屬性。

通常來講，Flex容器以及其子元素決定其佈局與尺寸主要通過如下三步：

  • 將元素切割到不一樣的行。首先會根據預測的元素尺寸將元素切分到不一樣的行。這主要是依賴flex-basis屬性。

  • 在每行中進行元素的縮放：對於每一行計算flex元素的最終尺寸

  • 排列行與元素

具體而言，會有如下步驟：

  • 首先根據每一個元素的flex-basis屬性計算每一個元素的可能的尺寸

  • 基於flex-wrap屬性分析應該將元素分配到幾行中

  • 根據flex-grow與flex-shrink屬性計算元素的最終尺寸

  • 根據justify-content屬性計算元素在主軸上的排布

  • 根據align-items、align-content、align-self屬性計算元素在交叉軸上的排布

Flex的瀏覽器支持狀況以下：

Chrome Safari Firefox Opera IE Android iOS
20- (old)21+ (new) 3.1+ (old)6.1+ (new) 2-21 (old)22+ (new) 12.1+ (new) 10 (tweener)11+ (new) 2.1+ (old)4.4+ (new) 3.2+ (old)7.1+ (new)

容器屬性

display:屬性定義

.container {
  display: flex; /* or inline-flex */
}

該display屬性會定義一個flex的容器，行內或者塊屬性取決於給定的值，它會爲直系子元素啓動flex容器。

flex-direction:子元素方向

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

該屬性用於定義主軸，即定義了子元素會以什麼方向被放置到容器中。

flex-wrap:行分割

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

一個flex容器默認狀況下是單行排布子元素的，即便會發生溢出的狀況。而經過修改flex-wrap屬性能夠是一個flex容器變成多行，即把子元素分割到多行顯示。相似於文本被分割到多行顯示，一個子元素會盡量的擴展來適應新的行。當一個新的行被建立以後，它會被對方到flex容器的交叉軸上。每一個行容器應該至少包含一個flex子元素，除非flex容器自己就是徹底爲空的。而若是flex-direction爲column，則各個屬性效果以下所示：

flex-flow:混合了flex-direction與flex-wrap

flex-flow是對於flex-direction與flex-wrap的縮寫，默認值是row nowrap

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

justify-content:元素的主軸排列

該屬性定義了元素在主軸上排列的方式，該屬性會輔助分配餘下的空白空間，在flex元素不可放大或者已經達到了最大值以後。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

  • flex-start (default): 元素被放置在行首

  • flex-end: 元素向行尾彙集

  • center:元素被放置在行中間

  • space-between: 元素被均衡分佈，第一個元素被放置在行首，最後一個元素被放置在行尾。

  • space-around: 元素被均勻放置在行中，全部的空白空間被均衡分配，注意有些元素兩邊的空白不對等，那是由於左右兩個元素的邊空白疊加了。

align-items:元素的交叉軸排列

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

  • flex-start: 元素被放置在交叉軸的首

  • flex-end: 元素向交叉軸尾彙集

  • center: 水平放置在交叉軸上

  • baseline: 基線對齊

  • stretch (default): 擴展以填充整個空間

元素屬性

flex:混合屬性

flex是flex-grow、flex-shrink以及flex-basis的組合縮寫，第二和第三個參數(flex-shrink、flex-basis)能夠省略，默認值爲0 1 auto。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

官方是推薦這種方式，畢竟它能夠設置默認值。

flex-basis(基準)

上文中已經說起，某個flex元素的尺寸主要有如下三個約束：

  • 由width、flex-basis決定的基礎尺寸

  • 由flex-grow、flex-shrink決定的不一樣容器尺寸狀況下的縮放尺寸

  • 由max-*、min-*決定的尺寸的上限與下限

flex basis是每一個flex元素的初始尺寸，即在空白空間被分配到每一個元素以前的尺寸。通常來講，flex-basis的取值有auto、content以及某個具體的值。咱們以一個具體的例子來講明不一樣的flex-basis的取值的效果：

  • flex-basis: 0 with width: 45px on each flex item results in the items having a 0px width.

  • flex-basis: 10px with width: 45px on each flex item results in the items having a 10px width.

  • flex-basis: auto with width: 45px on each flex item results in the items having a 45px width, and the items wrap because the sum of flex basis sizes exceeds the flex container's width.

  • flex-basis: content with width: 45px on each flex item should result in the flex items being sized exactly to their content, but this value is not supported as of the time I'm writing this.

flex-grow(放大) & flex-shrink(收縮)

flex-grow與flex-shrink都是用於控制flex元素的縮放，這兩個屬性都會接受一個單位的非負值，若是設置爲0的話就意味着不讓flex元素在所在的行上發生縮放行爲。一樣的，咱們以兩個例子來講明flex-grow與flex-shrink的計算過程。

flex-grow的計算

首先咱們作以下假設：

.flex-parent {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-basis: auto;
  width: 100px;
  height: 50px;
}
.one {
  flex-grow: 1;
  width: 10px;
  border: none; /* simplify calculations */
}
.two {
  flex-grow: 2;
  width: 20px;
  border: none;
}
<div class="flex-parent blue">
  <div class="one green">1</div><div class="two orange">2</div></div>
</div>

  • flex父容器的排布爲 flex-direction: row ,而且其尺寸爲100px

  • 而後有兩個子元素:

    • Item #1:

      • 基礎尺寸爲 10px (e.g. flex-basis: 10px或者 flex-basis: auto 加上 width: 10px)

      •  flex-grow 屬性值爲 1

    • Item #2:

      • 基礎尺寸爲 20px

      •  flex-grow 屬性值爲 2

那麼，根據算法，計算過程爲：

  • 首先，計算該行的空白距離 100px - 10px -20px = 70px

  • 肯定每一個元素的縮放比率，單元素的縮放比例爲其flex-grow的值/總的flex-grow值:

    • Item #1: 1/3

    • Item #2: 2/3

  • 將空白距離按比例分配給各個子元素.

    • Item #1 新的尺寸: 10px + 1/3 * 70px = 33.3333px

    • Item #2 新的尺寸: 20px + 2/3 * 70px = 66.6666px

最終效果以下所示：

flex-grow的計算

一樣的，咱們先作以下假設：

.flex-parent {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100px;
  height: 50px;
}
.one {
  flex-shrink: 1;
  width: 100px;
  border: none; /* simplify calculations */
}
.two {
  flex-shrink: 2;
  width: 100px;
  border: none;
}
<div class="flex-parent blue">
  <div class="one green">1</div><div class="two orange">2</div></div>
</div>

  • flex父容器的排布爲 flex-direction: row ,而且其尺寸爲100px

  • 而後有兩個子元素:

    • Item #1:

      • 基礎尺寸爲 100px (e.g. flex-basis: 100px或者 flex-basis: auto 加上 width: 100px)

      •  flex-shrink 屬性值爲 1

    • Item #2:

      • 基礎尺寸爲 100px

      •  flex-shrink 屬性值爲 2

那麼，根據算法，計算過程爲：

  • 首先，計算該行的空白距離 100px - 100px -100px = -100px

  • 肯定每一個元素的縮放比率，單元素的縮放比例爲其flex-shrink的值/總的flex-shrink值:

    • Item #1: 1/3

    • Item #2: 2/3

  • 將空白距離按比例分配給各個子元素.

    • Item #1 新的尺寸: 100px - 1/3 * 100px = 66.6666px

    • Item #2 新的尺寸: 100px - 2/3 * 100px = 33.3333px

align-self

用於爲每一個元素設置單獨的交叉軸排布方式：

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

注意，float、clear以及vertical-align對於flex元素沒有影響。

Flex-Polyfill:微信

Flex佈局新舊混合寫法詳解（兼容微信）

通過上文對於Box與Flex的介紹，你們確定已經發現了Flex的魅力所在，同時ReactNative中標準的佈局也是採用的Flex的規則，它能夠視做用來代替float與position的屬性。不過，在移動端的實踐中，不少的老版本瀏覽器，其中以微信內置的某自研瀏覽器爲典型表明，還有一些即將退出歷史舞臺的IE瀏覽器。

做爲一個懶人，筆者但願能經過相似於Polyfill的方式只要用最新的語法也能在各類瀏覽器內都達到一樣的效果。不過要兼容Flexbox的本質就是採用Box佈局中的相似的屬性的組合，所以，也能夠選擇直接寫兼容性的CSS。若是打算直接寫CSS的話，那就在每一個須要操做的DOM上加上對應屬性。不過筆者推薦使用SCSS的mixin功能，畢竟CSS的事情就在CSS的域內解決吧。

autoprefixer已經提供了面對部分老瀏覽器的Flexbox的Polyfill，它在官方文檔中說起的會產生以下的編譯方式：

a {
    display: flex;
}

會編譯成:

a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

筆者所使用的Webpack的配置文件爲：

var path = require('path');
var autoprefixer = require('autoprefixer');

module.exports = {
    entry: path.resolve(__dirname, 'demo.js'),
    output: {
        path: path.resolve(__dirname, ''),
        publicPath: '',
        filename: 'demo.dist.js',
    },
    module: {
        loaders: [
            {test: /\.jsx$/, exclude: /(libs|node_modules)/, loader: 'babel?stage=0'},
            {test: /\.js$/, exclude: /(libs|node_modules)/, loader: 'babel?stage=0'},
            {test: /\.(png|jpg|ttf|woff|svg|eot)$/, loader: 'url-loader?limit=8192'},// inline base64 URLs for <=8k images, direct URLs for the rest
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader!postcss-loader'
            },
            {
                test: /\.(scss|sass)$/,
                loader: 'style-loader!css-loader!postcss-loader!sass?sourceMap'
            }
        ],
    },
    postcss: [ autoprefixer({ browsers: ['last 10 versions',"> 1%"] }) ],
    externals: {
        jquery: "jQuery",
        pageResponse: 'pageResponse'
    },
    resolve: {
        alias: {
            libs: path.resolve(__dirname, 'libs'),
            nm: path.resolve(__dirname, "node_modules")
        }
    }
};

筆者在這裏對幾個經常使用的功能作了測試，肯定了autoprefixer仍是能夠很好地幫咱們自動完成Polyfill的，你們能夠放心使用。另外，對於老版本的IE瀏覽器，推薦flexibility，

.container {
    -js-display: flex;
    display: flex;
    align-contents: stretch;
}

Flexibility 主要用來實現 Flexible Box Layout Module Level 1.

子元素的顯示方向

子元素的顯示方向可經過 box-direction + box-orient + flex-direction 實現，下面請看實例：

  • 左到右

.box{
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}

  • 右到左

.box{
-webkit-box-pack: end;
-webkit-box-direction: reverse;
-webkit-box-orient: horizontal;
-moz-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}

這裏補充說明一點： box 寫法的 box-direction 只是改變了子元素的排序，並無改變對齊方式，須要新增一個 box-pack 來改變對齊方式。

  • 上到下

.box{
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-moz-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}

  • 下到上

.box{
-webkit-box-pack: end;
-webkit-box-direction: reverse;
-webkit-box-orient: vertical;
-moz-flex-direction: column-reverse;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
}

子元素主軸對齊方式

若是是手動寫，則是：

.box{
-webkit-box-pack: center;
/*
start | end | center | justify;
左對齊（默認） | 右對齊 | 居中對齊 | 左右對齊
*/
-moz-justify-content: center;
-webkit-justify-content: center;
justify-content: center;
}

若是是利用autoprefixer，則能夠查看以下的Demo，注意，Demo裏面的SCSS只是個擺設，實際中載入的是JS文件。

子元素交叉軸對齊方式

align-items: flex-start;
.box{
-webkit-box-align: center;
-moz-align-items: center;
-webkit-align-items: center;

box-align: start | end | center | baseline | stretch;
/*交叉軸對齊：頂部對齊（默認） | 底部對齊 | 居中對齊 | 文本基線對齊 | 上下對齊並鋪滿*/

align-items: flex-start | flex-end | center | baseline | stretch;
/*交叉軸對齊方式：頂部對齊（默認） | 底部對齊 | 居中對齊 | 上下對齊並鋪滿 | 文本基線對齊*/
}

子元素的顯示次序

.item{
-webkit-box-ordinal-group: 1;
-moz-order: 1;
-webkit-order: 1;
order: 1;
}

是否容許子元素伸縮

Demo

.item{
-webkit-box-flex: 1.0;
-moz-flex-grow: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
}

flex

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程