1.box-flex屬性規定框的子元素是否可伸縮其尺寸。
父元素必須要聲明display:box;子元素才可以用box-flex。
文法：box-flex:value;
示例：
.test_box {display: -moz-box;display: -webkit-box;display:box;width: 800px;margin: 40px auto;padding: 20px;
background: #f0f3f9;}
.list {padding: 0 1em; font: bold 36px/200px monaco;text-shadow: 1px 1px #eee;}
.list_one { -moz-box-flex: 1;-webkit-box-flex: 1;box-flex: 1;background-color: yellow;}
.list_two{-moz-box-flex: 2;-webkit-box-flex: 2;box-flex: 2;background-color: #99CC00;}
.list_three {-moz-box-flex: 1;-webkit-box-flex: 1;box-flex: 1;background-color: paleturquoise;}
1 2 3
結果： 圖檔
可以指定某個子元素的寬度，剩下的部分平分。
示例：
.test_box {display: -moz-box;display: -webkit-box;display: box;width: 800px;margin: 40px auto;padding: 20px;
background: #f0f3f9;}
.list {padding: 0 1em;font: bold 36px/200px monaco;
text-shadow: 1px 1px #eee;}
.list_one {-moz-box-flex: 1;-webkit-box-flex: 1;box-flex: 1;background: #00CC99;}
.list_two {-moz-box-flex: 2;-webkit-box-flex: 2;box-flex: 2;background: #99FF00;}
.list_w300 { width: 300px; background: #CCCCFF}
1 2 3
結果： 圖檔
2.box-orient
用來确定子元素的方向，是橫着還是豎着。
可選值：horizontal | vertical | inline-axis | box-axis | inherit inline-axis是預設的 horizonta inline-axis 是一樣的讓元素橫着 vertical
box-axis 是一樣的讓元素縱列。
示例：
.test_box {width: 300px; margin: 0 auto;display: -moz-box;
display: -webkit-box;display: box;box-orient:horizontal;padding: 20px;background: #f0f3f9;}
.list{padding: 0 1em;font: bold 36px/120px monaco; text-shadow: 1px 1px #eee;-webkit-box-flex: 1;}
.one{background: #99FF00;}
.two{background: #00CC99}
.three{background:#CCCC00}
1 2 3
結果：如圖
3.box-direction
用來确定子元素的排列順序。可選值：
onrmal | revers | inherit onrmal是預設值按着正常順序排列，從左到右
從前到後,revers表示反轉。
示例：
.test_box {display: -moz-box;display: -webkit-box;display: box;-moz-box-direction:reverse;-webkit-box-direction:reverse;
box-direction:reverse;width: 300px;margin: 20px auto;padding: 10px;background: #f0f3f9;}
.list {padding: 0 1em;font: bold 36px/150px monaco;text-shadow: 1px 1px #eee;}
.list_one {-moz-box-flex: 1;-webkit-box-flex: 1;box-flex: 1;background: yellow;}
.list_two{-moz-box-flex: 2;-webkit-box-flex: 2;box-flex: 2;background: #99CC00;}
.three{background: #CCCCFF}
1 2 3
結果： 如圖
4.box-align與box-pack
決定盒子内部剩餘空間怎麼使用，行為效果為對齊方式。
box-align 為垂直方向上的空間利用，box-pack 為水準方向上的空間利用。
box-align 可選參數： start | end | center | baseline | stretch
stretch為預設父标簽的高度有多高，子元素就有多高。start表示底邊對齊
end 為底部對齊，center居中對齊，baseline 基線對齊。
示例：
.test_box {margin: 0 auto;display: -moz-box;display: -webkit-box;
display: -o-box;display: box;-moz-box-align:end;
-webkit-box-align:end; -o-box-align:end; box-align:end;
width: 300px;height: 200px;padding: 20px;background: #f0f3f9;}
.list {padding: 0 1em;font: bold 36px/120px monaco;text-shadow: 1px 1px #eee;}
.one{background: #99FF00;}
.two{background: #00CC99}
.three{background:#CCCC00}
1 2 3
結果：如圖
box-pack可選值： start | end | center | justify
start為預設值， justify表示兩端對齊。
示例：
.test_box {margin: 0 auto;display: -moz-box;display: -webkit-box;
display: -o-box;display: box;-moz-box-pack:justify;
-webkit-box-pack:justify; -o-box-pack:justify; box-pack:justify;
width: 300px;height: 200px;padding: 20px;background: #f0f3f9;}
.list {padding: 0 1em;font: bold 36px/120px monaco;
text-shadow: 1px 1px #eee;}
.one{background: #99FF00;}
.two{background: #00CC99}
.three{background:#CCCC00}
1 2 3
結果：如圖
5.box-lines
用來決定子元素是否可以換行顯示，有兩個可以選的值：single | mutiple
single 預設值，不換行。mutiple 換行多行顯示。
示例：
.test_box {margin: 0 auto;display: -moz-box;display: -webkit-box;
display: -o-box;display: box;-moz-box-lines:multiple;
-webkit-box-lines:multiple;-o-box-lines:multiple;
box-lines:multiple; width: 300px;
height: 200px;padding: 20px;background: #f0f3f9;}
.list {padding: 0 1em;font: bold 36px/120px monaco;text-shadow: 1px 1px #eee;}
.one{background: #99FF00;}
.two{background: #00CC99}
.three{background:#CCCC00}
1 2 3
結果：如圖
6.box-ordinal-group
改變子元素的順序，值為數字，數字越小越排在前面。
示例：
.test_box {display: -moz-box;display: -webkit-box;display: box;
width: 300px;margin: 40px auto;padding: 20px;background: #f0f3f9;}
.list {padding: 0 1em;font: bold 36px/200px monaco;text-shadow: 1px 1px #eee;}
.list_one {-moz-box-flex: 1;-webkit-box-flex: 1; box-flex: 1;
-moz-box-ordinal-group: 1;-webkit-box-ordinal-group: 1;box-ordinal-group: 1;background: #99CC00;}
.list_two{-moz-box-flex: 2;-webkit-box-flex: 2;box-flex: 2;-moz-box-ordinal-group: 2;-webkit-box-ordinal-group: 2;
box-ordinal-group: 2;background: #CC33CC;}
.three{ background: #CCCC00}
1 2 3
結果：如圖
demo下載下傳https://github.com/ningmengxs/css3.git
css3彈性盒子模型之box-flex
css3彈性盒子模型之box-flex 浏覽器支援 目前沒有浏覽器支援 box-flex 屬性. Firefox 支援替代的 -moz-box-flex 屬性. Safari.Opera 以及 Chr ...
css3彈性盒子模型
當下各種手機,平闆尺寸不一,如果盒模型隻能固定尺寸,不能随意壓縮,将不能很好的迎合這個時代.是以css3推出了新的盒模型——彈性盒子模型(Flexible Box Model). 彈性盒模型可以水準布 ...
CSS3中的彈性盒子模型
介紹 在css2當中,存在标準模式下的盒子模型和IE下的怪異盒子模型.這兩種方案表示的是一種盒子模型的渲染模式.而在css3當中,新增加了彈性盒子模型,彈性盒子模型是一種新增加的強大的.靈活的布局方案 ...
CSS3彈性盒模型flexbox布局基礎版
原文連結:http://caibaojian.com/using-flexbox.html 最近看了社群上的一些關于flexbox的很多文章,感覺都沒有我這篇文章實在,最重要的相容性問題好多人都沒有提 ...
css3基礎教程：CSS3彈性盒模型
今天給大家分享一篇關于CSS3基礎教程 文章,主要是講CSS3彈性盒模型.彈性布局的主要思想是讓容器有能力來改變項目的寬度和高度,以填滿可用空間(主要是為了容納所有類型的顯示裝置和螢幕尺寸)的能力. ...
CSS3彈性盒模型布局子產品介紹
來源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-in ...
flexbox彈性盒子模型
這幾天在做移動端的web開發,遇到了一些問題,之前沒有折騰過這方面的東西,這次好好吸收下 css3的flexbox--彈性盒子模型,這個盒模型決定了一個盒子在其他盒子中的分布方式及如何處理可用的空間. ...
CSS box-flex屬性，然後彈性盒子模型簡介
今天做項目的時候發現一個css3的新屬性flex 一.什麼是flex 它的作用是能夠按照設定好的規則來排列容器内的項目,而不必去計算每一個項目的寬度和邊距.甚至是在容器的大小發生改變的時候,都可以重新 ...
CSS box-flex屬性，然後彈性盒子模型簡介(轉)
一.淡淡的開頭語 昨天趁着不想工作的時間間隙閑逛24ways,在My CSS Wish List一文中,見到了個新鮮的CSS屬性,就是題目中的box-flex,以前沒有見過,頓生疑惑,不知是騾子還是馬 ...
随機推薦
day11---異步IO\資料庫\隊列\緩存
一.RabbitMQ隊列 RabbitMQ是一個在AMQP基礎上完整的,可複用的企業消息系統.他遵循Mozilla Public License開源協定. MQ全稱為Message Queue, 消息 ...
Ogre1.8地形和天空盒的建立(一塊地形)
轉自:http://www.cnblogs.com/WindyMax/ 研究Ogre的程式筆記 編譯環境 WIN7 32 VS2008 Ogre的版本 1.8 Ogre的地形算法是采用Geome ...
String類源碼分析(JDK1.7)
以下學習根據JDK1.7String類源代碼做注釋 public final class String implements java.io.Serializable, Comparable
Python的基本文法，涵蓋資料類型、循環判斷、清單、map和set等
以#開頭的語句是注釋 當語句以冒号“:”結尾時,縮進的語句視為代碼塊.一般縮進4個空格 Python程式是大小寫敏感的,如果寫錯了大小寫,程式會報錯. Python的資料類型 整型 浮點型 字元串 布 ...
protocol buffer介紹(protobuf)
一.理論概述0.參考資料入門資料:https://developers.google.com/protocol-buffers/docs/javatutorial更詳細的資料:For more det ...
bzoj(矩陣快速幂)
題意:定義Concatenate(1,N)=1234567……n.比如Concatenate(1,13)=12345678910111213.給定n和m,求Concatenate(1,n)%m. (1 ...
Hibernate的dynamic-insert和dynamic-update的使用
Hibernate在初始化的時候,預設按照配置為表預定義insert,delete,update,select(by id)的SQL語句放在session中,其中insert,update,selec ...
maven pom添加本地jar，不送出私庫
taobao-sdktaobaosdk
C++ 字面量
https://docs.microsoft.com/en-us/cpp/cpp/string-and-character-literals-cpp?view=vs-2017 C++ supports ...
卡方分布 | t檢驗 | F檢驗 | 卡方檢驗 | 假設檢驗 | 各種檢驗持續總結
Chi-square distribution introduction 這個視訊真的好,完美地解釋了卡方統計量是怎麼來的! 我們有一個标準正态分布的總體,我們從其中抽一次,取該值的平方就是Q1統計量 ...