CSS3 Flex 彈性布局實例代碼詳解

  發布時間:2018-11-01 14:54:13   作者:佚名   我要評論

這篇文章主要介紹了CSS3 Flex 彈性布局實例代碼,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧

一、基本概念

 //任何一個容器都可以指定為Flex布局。
 .box{
   display: flex;
 }
 //行內元素也可以使用Flex布局。
 .box{
   display: inline-flex;
 }
 //注意,設為Flex布局以后,子元素的float、clear和vertical-align屬性將失效。

二、容器屬性

1. flex-direction

flex-direction 決定項目的排列方向
 

 .box {
   flex-direction: row | row-reverse | column | column-reverse;
 }

2. flex-wrap

默認情況下,項目都排在一條線(又稱”軸線”)上。flex-wrap 屬性定義,如果一條軸線排不下,如何換行。

 .box{
   flex-wrap: nowrap | wrap | wrap-reverse;
 }

3. flex-flow

flex-flow 屬性是 flex-direction 屬性和 flex-wrap 屬性的簡寫形式,默認值為 row nowrap。

 .box {
   flex-flow: <flex-direction> || <flex-wrap>;
 }

4. justify-content

justify-content 屬性定義了項目在水平方向的對齊方式。

 .box {
   justify-content: flex-start | flex-end | center | space-between | space-around;
 }

5. align-item

align-item 屬性定義了項目在垂直方向的對齊方式。

 .box {
   align-items: flex-start | flex-end | center | baseline | stretch;
 }

3.6  align-content屬性

align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線,該屬性不起作用。

 .box {
   align-content: flex-start | flex-end | center | space-between | space-around | stretch;
 }

三、項目的屬性

1.  order

order屬性定義項目的排列順序。數值越小,排列越靠前,默認為0。
 

 .item {
   order: <integer>;
 }

2.  flex-grow

flex-grow屬性定義項目的放大比例,默認為0,即如果存在剩余空間,也不放大。

 .item {
   flex-grow: <number>; /* default 0 */
 }
 //如果所有項目的flex-grow屬性都為1,則它們將等分剩余空間(如果有的話)。如果一個項目的flex-grow屬性為2,其他項目都為1,則前者占據的剩余空間將比其他項多一倍。

3.  flex-shrink

flex-shrink屬性定義了項目的縮小比例,默認為1,即如果空間不足,該項目將縮小。

 .item {
   flex-shrink: <number>; /* default 1 */
 }

4. flex-basis

flex-basis屬性定義了在分配多余空間之前,項目占據的主軸空間(main size)。瀏覽器根據這個屬性,計算主軸是否有多余空間。它的默認值為auto,即項目的本來大小。
 

 .item {
   flex-basis: <length> | auto; /* default auto */
 }
 /*它可以設為跟width或height屬性一樣的值(比如350px),則項目將占據固定空間。*/

4.5  flex屬性

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫,默認值為0 1 auto。后兩個屬性可選。

    .item {
      flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    }

該屬性有兩個快捷值:auto (1 1 auto) 和 none (0 0 auto)。

4.6 align-self屬性

align-self 屬性允許單個項目有與其他項目不一樣的對齊方式,可覆蓋align-items 屬性。默認值為 auto,表示繼承父元素的 align-items 屬性,如果沒有父元素,則等同于 stretch。等同于 align-items
 

 .item {
   align-self: auto | flex-start | flex-end | center | baseline | stretch;
 }

總結

以上所述是小編給大家介紹的CSS3  Flex 彈性布局實例代碼詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!

相關文章

  • 純CSS3彈性框布局實現的漸變色波動列動畫效果源碼

    這是一款基于純CSS3彈性框布局實現的漸變色波動列動畫效果源碼。畫面中的5塊漸變色區域連續排列在一起,并呈現出此消彼漲的彈性波動變換動畫效果
    2018-08-07
  • css flex 彈性布局詳解

    這篇文章主要介紹了css flex 彈性布局詳解的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-02
  • CSS3彈性布局內容對齊(justify-content)屬性使用詳解

    這篇文章主要介紹了CSS3彈性布局內容對齊(justify-content)屬性使用詳解,具有一定的參考價值,有興趣的可以了解一下
    2017-07-31
  • CSS3彈性伸縮布局之box布局

    這篇文章主要為大家詳細介紹了CSS3彈性伸縮布局之box布局,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-07-12
  • 實例講解CSS3中的box-flex彈性盒屬性布局

    flex布局毫無疑問是當今Web頁面的最強大布局方式,box-flex彈性盒模型是其中的一個代表,這里我們就來以實例講解CSS3中的box-flex彈性盒模型布局
    2016-06-09
  • CSS3彈性盒模型flex box快速入門心得(必看篇)

    下面小編就為大家帶來一篇CSS3彈性盒模型flex box快速入門心得(必看篇)。小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-24
  • 幾個CSS3的flex彈性盒模型布局的簡單例子演示

    這篇文章主要介紹了幾個CSS3的flex彈性盒模型布局的簡單例子演示,flex布局是迄今為止最強大的web布局方式,需要的朋友可以參考下
    2016-05-12
  • 基礎的CSS3彈性盒Flexbox布局使用實例

    這篇文章主要介紹了基礎的CSS3彈性盒Flexbox布局使用實例,文中最后也提到了解決兼容性問題的基本方法,需要的朋友可以參考下
    2016-04-08
  • CSS中的EM屬性之彈性布局

    這篇教程將引導大家如何使用“em”來創建一個基本的彈性布局,從而學習其如何計算?又是如何使用“em”對層進行彈性擴展?又是如何擴展文本和圖像等內容?下在我們就一起帶
    2013-04-07

最新評論

时时彩包赢公式0369