flex属性值----弹性盒子布局
里面的屬性都 是在有display: flex的情況 下才生效。
兼容性寫法： ??display: -webkit-box; /*老版本語法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本語法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本語法: IE 10 */
display: -webkit-flex; /* 新版本語法: Chrome 21+ */
display: flex; /* 新版本語法: Opera 12.1, Firefox 22+ */
?
display : flex ?彈性盒子 給元素加這一屬性，它的子元素將進(jìn)行彈性布局，其子元素會(huì)以橫向（默認(rèn)）方式布局；
flex-direction: 屬性是指定多個(gè)元素的排列方向： row(橫向排列，默認(rèn)) ,row-reserse（橫向反向排列）,column（縱向排列）,column-reserse（縱向反向排列）；
justify-content(在水平方向上)：在使用fle值時(shí)，可以使用這個(gè)屬性，flex-start(從前面開始布局所有子元素)，flex-start(元素整體向右移，直到最后的元素到父元素的右邊框 ),center(居中布局所有子元素)，space-between（ 將第一個(gè)子元素放在最前面，最后一個(gè)元素放在最后面，將空白部分平均分配在所有子元素與元素之間），spase-around (將空白部分平均分配在開頭、結(jié)尾、以及各元素之間)。
align-content（垂直方向上）：center（居中布局所有元素），其它還有很多屬性，可以去了解。
常用套路：justify-content：center（使里面元素水平居中）;align-content: center(使里面元素垂直居中)。一起用可以水平垂直居中。
其子元素屬性：
flex: 取值為數(shù)字，表示這個(gè)可自動(dòng)填滿多余空間。flex:1（基本都是取1）;
order: 表示元素排列順序.order:1,order:2;1排在2的前面，注意: 沒有設(shè)order值的元素排在最前面；
flex-wrap： 控件換行方式 ，nowrap (不換行)，wrap(換行)，wrap-reserve(雖然換行最方向與wrap時(shí)方向向反)。
align- items是寫在父元素上，，控制所有的子元素對(duì)齊方式，align-self是寫在子元素上控制單個(gè)元素的對(duì)齊方式 。
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>div.flex1{flex-direction:flex;height: 300px;width: 600px;}.flex1>div:nth-child(1){/*width:100px;*/padding:20px;margin:10px;/*order:2;*/background: blue;}.flex1>div:nth-child(2){flex:1;padding:20px;/*order:1;*/background: red;}.flex1>div:nth-child(3){/*width:100px;*//*flex:1;*/margin:10px;padding: 20px;border:1px solid green;background: #eee;}/*.flex1>div{*//*box-sizing: border-box;*//*}*/</style> </head> <body> <div class="flex1"><div ><h2>一</h2><p>sdafggg地方薩芬大法師短發(fā) 模壓暗示的發(fā)生模壓暗示</p></div><div><h2>二</h2><p>sdfasdf靺大法師地方薩芬大法師短發(fā) 模壓暗示的發(fā)生模壓暗示的發(fā)地左塔頂房間愛視頻地方就是偏低回復(fù)你撒潑法案房</p></div><div><h2>三</h2><p>dsfaa地方薩芬大法師短發(fā) 模壓暗示的發(fā)生模壓暗示</p></div> </div> </body> </html>?
一
sdafggg地方薩芬大法師短發(fā) 模壓暗示的發(fā)生模壓暗示
二
sdfasdf靺大法師地方薩芬大法師短發(fā) 模壓暗示的發(fā)生模壓暗示的發(fā)地左塔頂房間愛視頻地方就是偏低回復(fù)你撒潑法案房
三
dsfaa地方薩芬大法師短發(fā) 模壓暗示的發(fā)生模壓暗示
轉(zhuǎn)載于:https://www.cnblogs.com/flxy-1028/p/6093737.html
總結(jié)
以上是生活随笔為你收集整理的flex属性值----弹性盒子布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： BIEE建模参考规范
- 下一篇： 在线用户管理－－ESFramework