Flexible Box(彈性盒子)能讓頁面的分布更合理和方便,
這是之前使用常規(guī)的布局方式所做不到的。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
<div class="warp">
<div class="modular">1</div>
<div class="modular">2</div>
<div class="modular">3</div>
<div class="modular">4</div>
</div>
display:flex和display:box有什么區(qū)別?
前者是flex 2012年的語法,也將是以后標(biāo)準(zhǔn)的語法,大部分瀏覽器已經(jīng)實現(xiàn)了無前綴版本。
CSS Code復(fù)制內(nèi)容到剪貼板
/*父級*/
.warp{
width: 100%;
height: 100px;
/*這個是用來定義伸縮容器,是內(nèi)聯(lián)還是塊取決于設(shè)置的值。*/
/*這個時候,他的所有子元素將變成flex文檔流,稱為伸縮項目。*/
/*————————————————————-*/
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
/*————————————————————-*/
/*一起使用box-align 和 box-pack 屬性,對子元素進(jìn)行居中*/
-webkit-box-pack:justify;
-webkit-box-align: ustify;
-moz-box-pack:justify;
-moz-box-align:justify;
box-pack:justify;
新聞熱點
疑難解答