HTML5-响应式的实现方式-弹性布局浅谈
生活随笔
收集整理的這篇文章主要介紹了
HTML5-响应式的实现方式-弹性布局浅谈
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1.彈性布局的使用：
① 給父容器添加display:flex;或inline-flex;可以設(shè)置在當(dāng)前容器內(nèi)使用彈性布局進(jìn)行排列； ② flex表示當(dāng)前容器為塊級，inline-flex表示當(dāng)前容器為行級； ③ （重點）當(dāng)前容器內(nèi)一但使用彈性布局，則子元素的float和clear屬性將會失效，但是position仍然可以使用 注意：容器-父元素 項目-子元素2.作用于容器的屬性：
① flex-direction: 設(shè)置主軸方向 row（默認(rèn)值）：主軸為水平方向，起點在左端。 row-reverse：主軸為水平方向，起點在右端。 column：主軸為垂直方向，起點在上沿。 column-reverse：主軸為垂直方向，起點在下沿。 ② flex-wrap: 當(dāng)主軸空間不足時，是否斷行顯示； nowrap（默認(rèn)）：不換行。 wrap：換行，第一行在上方。 wrap-reverse：換行，第一行在下方。 ③ flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認(rèn)值為row nowrap。 ④（常用，非常重要） justify-content:定義項目在主軸上的顯示方式 flex-start（默認(rèn)值）：左對齊 flex-end：右對齊 center： 居中 space-between：兩端對齊，項目之間的間隔都相等。 space-around：每個項目兩側(cè)的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。 ⑤ align-items屬性定義‘單行’項目在交叉軸上如何對齊。 flex-start：交叉軸的起點對齊。 flex-end：交叉軸的終點對齊。 center：交叉軸的中點對齊。 baseline: 項目的第一行文字的基線對齊。 stretch（默認(rèn)值）：如果項目未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度。 ⑥ align-content 屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。 flex-start：與交叉軸的起點對齊。 flex-end：與交叉軸的終點對齊。 center：與交叉軸的中點對齊。 space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。 space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。 stretch（默認(rèn)值）：軸線占滿整個交叉軸。代碼實例一：
<body><div id="div"><div>1</div><div id="div2">2</div><div>3</div><div>4</div> </div> </body> ? #div{width: 800px;height: 400px;background-color: lightpink; display: flex; flex-flow: row nowrap;justify-content: space-between; } #div div{width: 100px;height: 100px;background-color: greenyellow;font-size: 36px;line-height: 100px;text-align: center; }?
運行：
?
3.項目的屬性
① order屬性定義項目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。 ② flex-grow屬性定義項目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。 ③ flex-shrink屬性定義了項目的縮小比例，默認(rèn)為1，即如果空間不足，該項目將縮小。 ④ （不常用）flex-basis屬性定義了在分配多余空間之前，項目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間。它的默認(rèn)值為auto，即項目的本來大小。 ⑤ align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可'覆蓋'align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。?代碼實例二（在實例一的基礎(chǔ)上添加）：
#div #div2{background-color: skyblue;order: 1;flex-grow: 1; }?
運行：
轉(zhuǎn)載于:https://www.cnblogs.com/hjcblog/p/8599060.html
總結(jié)
以上是生活随笔為你收集整理的HTML5-响应式的实现方式-弹性布局浅谈的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python的学习笔记（0）之循环的使用
- 下一篇： GVIM工具之gvim的配色方式