建站
咨詢
售后
建站咨詢
新聞中心
簡要介紹
創(chuàng)新互聯(lián)公司服務(wù)項目包括萬州網(wǎng)站建設(shè)、萬州網(wǎng)站制作、萬州網(wǎng)頁制作以及萬州網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，萬州網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到萬州省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
flex 即 flexible box 彈性布局盒模型，,是2009年 w3c 提出的一種新型布局的屬性，引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。瀏覽器支持如下：
flex 盒子模型的出現(xiàn)主要是為了解決基于 display+position+float 的處理部分情況的不便，比如居中布局：
使用定位：
.father{
width: 400px;
height: 400px;
position: relative;
}
.children{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
height: 50%;
margin-left: -50px;
margin-top: -50px;
}
使用 flex 情況：
.father{
width: 400px;
height: 400px;
display: flex;
justify-content:center;
align-items:center;
}
.children{
width: 100px;
height: 100px;
}
可以看見如果使用了 flex，就很就簡單了。justify-content 和 align-items 分別定義了伸縮項目沿著主軸線的對齊方式和伸縮項目沿著縱軸對齊方式，F(xiàn)lex 的好處遠遠不止這些，下面我們來看下 w3c 定義的基本屬性。
基本概念
主軸（main axis）：沿著一個伸縮容器的主軸配置伸縮項目，主軸是主軸方向的延伸。
縱軸（cross axis）：與主軸垂直的軸稱作側(cè)軸，是側(cè)軸方向的延伸。
容器屬性
3.1 Flex-direction
flex-direction 會決定主軸的方向，它的值如下:
row（默認）：橫向排列（左對齊）。
row-reverse：反轉(zhuǎn)橫向排列。
column：縱向排列。
column-reverse：反轉(zhuǎn)縱向排列。
Flex-wrap
nowrap - 默認，彈性容器為單行。
wrap - 彈性容器為多行。
Flex-flow
flex-flow 是 flex-direction 和 flex-wrap 的簡寫，可同時賦值 ， 默認 row nowrap。
Justify-content
flex-start（默認值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊。
space-around：彈性項目平均分布在該行上，兩邊留有一半的間隔空間。
Align-items
flex-start：縱軸的起點對齊。
flex-end：縱軸的終點對齊。
center：縱軸的中點對齊。
baseline: 項目的第一行文字的基線對齊。
stretch（默認）：如果指定側(cè)軸大小的屬性值為'auto'，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸。
Align-conten
flex-start：與縱軸的起點對齊。
flex-end：與縱軸的終點對齊。
center：與縱軸的中點對齊。
space-between：與縱軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認值）：軸線占滿整個縱軸。
項目屬性
Flex
該屬性有兩個快捷值：auto (1 1 auto) ，none (00 auto)。
Order
屬性定義項目的排列順序。數(shù)值越小，排列越靠前，默認為0
Flex-grow
flex-grow 定義彈性盒子元素的擴展比率 ，默認為0，即如果存在剩余空間，也不放大，如果所有項目的 flex-grow 屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個項目的flex-grow 屬性為2，其他項目都為1，則前者占據(jù)的剩余空間將比其他項多一倍。
Flex-shrink
flex-shrink 屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小，如果所有項目的 flex-shrink 屬性都為1，當(dāng)空間不足時，都將等比例縮小。如果一個項目的 flex- shrink 屬性為0，其他項目都為1，則空間不足時，前者不縮小。負值對該屬性無效。
Flex-basis
flex-basis 定義彈性盒子元素的收縮比率，項目占據(jù)的主軸空間（mainsize）。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間。它的默認值為 auto，即項目的本來大小。它可以設(shè)為跟 width 或 height 屬性一樣的值（比如 350px），則項目將占據(jù)固定空間。
Align-self
align-self 在彈性子元素上使用。覆蓋容器的 align-items 屬性。默認值為 auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同于 stretch。align-self 除了 auto，其他與 align-items 屬性基本一致。
新聞標(biāo)題：前端知識|Flexbox布局模式
網(wǎng)站地址：http://fisionsoft.com.cn/article/jgcehd.html
