彈性盒模型

時間  2019-11-12
標籤 彈性 模型 简体版
原文   原文鏈接

一，概念css

彈性盒模型是css3的一種新的佈局方式，是一種當前頁面須要適應不一樣屏幕大小及設備類型時確保擁有恰當的行爲的佈局方式。html

二，目的css3

引入盒模型的目的是提供一種更加有效的方式來對一個容器的子元素進行排列，對齊和分配空白空間。web

三 ，css3彈性盒子內容佈局

彈性盒子由彈性容器（Flex container）和彈性子元素(Flex item)組成。flex

彈性容器經過設置display屬性值爲flex或inline-flex將其定義爲彈性容器。spa

1，給父容器添加display:flex/inline-flex屬性，便可使容器內容採用彈性佈局顯示，而不是遵循常規文檔流的顯示方式。3d

2，容器添加彈性佈局後，僅僅是容器內容採用彈性佈局，而容器自身在文檔流中的定位方式依然遵循常規文檔流；code

3，③ display:flex; 容器添加彈性佈局後，顯示爲塊級元素；htm

display:inline-flex; 容器添加彈性佈局後，顯示爲行級元素；

4，設爲 Flex佈局後，子元素的float、clear和vertical-align屬性將失效。可是position屬性，依然生效。

 

注意： 彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內佈局。

1，彈性元素一般在彈性盒子內一行顯示，默認狀況每一個容器只有一行。

如下元素展現了彈性元素在一行內顯示，從左到右：

 

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
 
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>
 
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div> 
</div>

 

2，flex-direction

flex-direction屬性指定了彈性子元素在父容器中的位置。

語法：

flex-direction: row | row-reverse | column | column-reverse

flex-direction的值有:

  • row：橫向從左到右排列（左對齊），默認的排列方式。
  • row-reverse：反轉橫向排列（右對齊，從後往前排，最後一項排在最前面。
  • column：縱向排列。
  • column-reverse：反轉縱向排列，從後往前排，最後一項排在最上面。

如下實例演示了 column 的使用:

.flex-container{
    display:-webkit-flex;
    -webkit-flex-direction:column;
    flex-direction:column;
    display:flex;
    width:400px;
    height:250px;
    background-color: #e8eae9;
}

子元素的排列方式以下：

3，justify-content屬性

內容對齊（justify-content）屬性應用在彈性容器上，把彈性項沿着彈性容器的主軸線（main axis）對齊。

justify-content: flex-start | flex-end | center | space-between | space-around

各個值解析:

    • flex-start：

      彈性項目向行頭緊挨着填充。這個是默認值。第一個彈性項的main-start外邊距邊線被放置在該行的main-start邊線，然後續彈性項依次平齊擺放。

    • flex-end：

      彈性項目向行尾緊挨着填充。第一個彈性項的main-end外邊距邊線被放置在該行的main-end邊線，然後續彈性項依次平齊擺放。

    • center：

      彈性項目居中緊挨着填充。（若是剩餘的自由空間是負的，則彈性項目將在兩個方向上同時溢出）。

    • space-between：

      彈性項目平均分佈在該行上。若是剩餘空間爲負或者只有一個彈性項，則該值等同於flex-start。不然，第1個彈性項的外邊距和行的main-start邊線對齊，而最後1個彈性項的外邊距和行的main-end邊線對齊，而後剩餘的彈性項分佈在該行上，相鄰項目的間隔相等。

    • space-around：

      彈性項目平均分佈在該行上，兩邊留有一半的間隔空間。若是剩餘空間爲負或者只有一個彈性項，則該值等同於center。不然，彈性項目沿該行分佈，且彼此間隔相等（好比是20px），同時首尾兩邊和彈性容器之間留有一半的間隔（1/2*20px=10px）。

    • 一下 
       .flex-container{
            display:-webkit-flex;
            display:flex;
            -webkit-justify-content:center;
            justify-content:center;
            width:400px;
            height:250px;
            background-color: #e8eae9;
        }
        .flex-item{
            background-color:cornflowerblue;
            width:100px;
            height:100px;
            margin:10px;
        }

      效果以下圖所示：

    • 4,align-items屬性：
    • align-items設置或檢索彈性盒子元素在縱軸方向的對齊方式。
    • align-items: flex-start | flex-end | center | baseline | stretch

      各個值解析:

      • flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
      • flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
      • center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（若是該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
      • baseline：如彈性盒子元素的行內軸與側軸爲同一條，則該值與'flex-start'等效。其它狀況下，該值將參與基線對齊。
      • stretch：若是指定側軸大小的屬性值爲'auto'，則其值會使項目的邊距盒的尺寸儘量接近所在行的尺寸，但同時會遵守'min/max-width/height'屬性的限制。

如下實例演示了stretch（默認值）的使用：---效果跟什麼都不設置的原始狀態 ,flex-start效果相似：

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: stretch;
    align-items: stretch;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

 

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

效果以下所示:

5.flex-wrap屬性：

flex-wrap 屬性用於指定彈性盒子的子元素換行方式。
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

各個值解析：

nowrap-默認，彈性容器爲單行，該狀況下彈性子項可能會溢出容器。

wrap:彈性容器爲多行，該狀況下彈性子項溢出部門會被放置到新行，子項內部會發生斷行

wrap-reverse 反轉wrap排列。

1，默認狀況

<style>

        .flex-container{
            display:-webkit-flex;
            display:flex;
            width:400px;
            height:250px;
            background-color: #e8eae9;
        }
        .flex-item{
            background-color:cornflowerblue;
            width:100px;
            height:100px;
            margin:10px;
        }
    </style>

<div class="flex-container"> <div class="flex-item">flex item 1</div> <div class="flex-item">flex item 2</div> <div class="flex-item">flex item 3</div> <div class="flex-item">flex item 4</div> <div class="flex-item">flex item 5</div> </div>

效果以下圖：

2，

 .flex-container{
            display:-webkit-flex;
            display:flex;
            -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
            width:400px;
            height:250px;
            background-color: #e8eae9;
        }
        .flex-item{
            background-color:cornflowerblue;
            width:100px;
            height:100px;
            margin:10px;
        }

效果圖以下所示：

6，align-content屬性：

align-content屬性用於修改flex-wrap屬性的行爲，相似於align-items,但它不是設置彈性子元素的對齊，而是設置各個行的對齊。

語法：

align-content: flex-start | flex-end | center | space-between | space-around | stretch

各個值解析:

  • stretch - 默認。各行將會伸展以佔用剩餘的空間。
  • flex-start - 各行向彈性盒容器的起始位置堆疊。
  • flex-end - 各行向彈性盒容器的結束位置堆疊。
  • center -各行向彈性盒容器的中間位置堆疊。
  • space-between -各行在彈性盒容器中平均分佈。
  • space-around - 各行在彈性盒容器中平均分佈，兩端保留子元素與子元素之間間距大小的一半。

 

 四，彈性元素子元素

上面介紹的一些屬性，disply,flex-direction,justify-content,align-items,flex-wrap,align-content都是做用在父元素上的。

下面介紹一下，一些彈性子元素屬性。

1,order

各個值解析:

<integer>：用整數值來定義排列順序，數值小的排在前面。能夠爲負值。

order屬性設置彈性容器內彈性子元素的屬性：

flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
 
.first {
    -webkit-order: -1;
    order: -1;
}
<div class="flex-container">
    <div class="flex-item ">flex item 1</div>
    <div class="flex-item first">flex item 2</div>
    <div class="flex-item">flex item 3</div>
</div>

2，完美居中：

使用彈性盒子，居中變的很簡單，只想要設置 margin: auto; 可使得彈性子元素在兩上軸方向上徹底居中:

.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: auto;
}

 

3,align-self

align-self屬性用於設置彈性元素自身在縱軸方向上的對齊方式。

語法：

align-self: auto | flex-start | flex-end | center | baseline | stretch

各個值解析：

auto:若是'align-self'的值爲‘auto’,則其計算值爲元素的父元素的'align-items'值，若是其沒有父元素，則計算值爲‘stretch’.

  • flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
  • flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
  • center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（若是該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
  • baseline：如彈性盒子元素的行內軸與側軸爲同一條，則該值與'flex-start'等效。其它狀況下，該值將參與基線對齊。
  • stretch：若是指定側軸大小的屬性值爲'auto'，則其值會使項目的邊距盒的尺寸儘量接近所在行的尺寸，但同時會遵守'min/max-width/height'屬性的限制。

4,flex

flex屬性用於指定彈性盒子子元素如何分配空間

flex: auto | initial | none | inherit |  [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

各個值解析:

  • auto: 計算值爲 1 1 auto
  • initial: 計算值爲 0 1 auto
  • none：計算值爲 0 0 auto
  • inherit：從父元素繼承
  • [ flex-grow ]：定義彈性盒子元素的擴展比率。
  • [ flex-shrink ]：定義彈性盒子元素的收縮比率。
  • [ flex-basis ]：定義彈性盒子元素的默認基準值。

另外：放幾篇博客連接：

Flex 佈局教程：語法篇

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程