亚洲区国产区激情区无码区,国产成人mv视频在线观看,国产A毛片AAAAAA,亚洲精品国产首次亮相在线

CSS3 彈性盒子布局

CSS3 flexible Box或flexbox是用于創(chuàng)建更靈活的用戶界面設(shè)計的新布局模型。

了解Flex布局模型

Flexible box，通常稱為flexbox，是CSS3中引入的一種新的布局模型，用于創(chuàng)建具有多行和多列的靈活用戶界面設(shè)計，而不使用百分比或固定長度值。CSS3 flex布局模型提供了一種簡單而強大的機制，可以通過樣式表自動處理空間分布和內(nèi)容對齊，而不會干擾實際的標(biāo)記。

以下示例演示如何使用flex布局模型創(chuàng)建三列布局，其中每一列的寬度和高度均相等。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS3 Three Equal Flex Column</title>
<style>
    .flex-container {
        width: 80%;
        min-height: 300px;
        display: -webkit-flex; /* Safari */     
        display: flex; 
        border: 1px solid #808080;
    }
    .flex-container div {
        background: #dbdfe5;
        -webkit-flex: 1; /* Safari */
        -ms-flex: 1; /* IE 10 */
        flex: 1; 
    }
</style>
</head>Item 1Item 2Item 3</html>
測試看看?/?

如果您仔細(xì)注意上面的示例代碼，您會發(fā)現(xiàn)我們沒有在.flex-container的內(nèi)部<div>上指定任何寬度，但是您可以在輸出中看到，每一列的寬度正好等于父元素.flex-container的三分之一。

Flex布局如何工作

Flexbox由Flex容器和Flex項目組成?？梢酝ㄟ^將display元素的屬性設(shè)置為flex（生成塊級 Flex容器）或inline-flex（生成類似于inline-block的內(nèi)聯(lián)Flex容器）來創(chuàng)建Flex容器。flex容器的所有子元素將自動成為flex項目，并使用flex布局模型進(jìn)行布局。的float，clear和vertical-align性質(zhì)有彈性的項目沒有影響。

伸縮項沿著該flex-direction屬性指定的伸縮線位于伸縮容器內(nèi)。默認(rèn)情況下，每個flex容器只有一條彈性線，其方向與當(dāng)前書寫模式的內(nèi)聯(lián)軸或文本方向相同。下圖將幫助您了解Flex布局術(shù)語。

Flexbox插圖

指定Flex容器內(nèi)部的流

在標(biāo)準(zhǔn)的CSS框模型中，元素通常按照它們在底層HTML標(biāo)記中出現(xiàn)的順序顯示。Flex布局允許您控制一個Flex容器內(nèi)的流的方向，這樣一來，元素就可以按照向左、向右、向下甚至向上的任何流方向進(jìn)行布局。

可以使用flex-direction屬性指定flex容器中的flex項目流。此屬性的默認(rèn)值row與文檔的當(dāng)前書寫模式或文本方向相同，例如，英語從左到右。

.flex-container {
    width: 80%;
    min-height: 300px;
    /* Safari */
    display: -webkit-flex;
    -webkit-flex-direction: row-reverse;
    
    display: flex;
    flex-direction: row-reverse;
    border: 1px solid #666;
}
測試看看?/?

類似地，您可以在彈性容器內(nèi)以列形式顯示彈性項，而不是使用flex-direction屬性的值列行，如下所示：

.flex-container {
    width: 80%;
    min-height: 300px;
    /* Safari */
    display: -webkit-flex;
    -webkit-flex-direction: column;
    
    display: flex;
    flex-direction: column;
}
測試看看?/?

控制伸縮項的尺寸

彈性布局的最重要方面是彈性項目改變其寬度或高度以填充可用空間的能力。這是通過flex屬性實現(xiàn)的。這是速記屬性flex-grow，flex-shrink而flex-basis屬性。

彈性容器將可用空間與其彈性生長因子成正比地分布到其項目，或收縮它們以防止溢出與其彎曲收縮系數(shù)成比例。

.flex-container {
    width: 80%;
    min-height: 300px;
    display: -webkit-flex; /* Safari */     
    display: flex; 
}
.flex-container div {
    padding: 10px;
    background: #dbdfe5;
}
.item1, .item3 {
    -webkit-flex: 1; /* Safari */
    flex: 1; 
}
.item2 {
    -webkit-flex: 2; /* Safari */
    flex: 2; 
}
測試看看?/?

在上面的示例中，第一個和第三個伸縮項目將占用1/4，即1/(1+1+2)的自由空間，而第二個伸縮項目將占用1/2，即2/(1+1+2)的自由空間。類似地，您可以使用這個簡單的技術(shù)創(chuàng)建其他靈活的布局。

注意：強烈建議使用速記屬性，而不是單獨的flex屬性，因為它可以正確重置未指定的組件。

在Flex容器中對齊Flex項目

有四個屬性justify-content，align-content，align-items和align-self其目的是為了指定彈性容器內(nèi)的彈性項目的對準(zhǔn)。其中的前三個適用于flex容器，而最后一個適用于單個flex項目。

沿主軸對齊Flex項目

使用justify-content屬性，可以將伸縮項沿伸縮容器的主軸（即在水平方向上）對齊。通常在彈性項目未使用主軸上所有可用空間的情況下使用。

justify-content屬性接受以下值：

  • flex-start-默認(rèn)值。彈性項目放置在主軸的起點。

  • flex-end -Flex項目位于主軸的末端。

  • center  - Flex的項目放置在主軸線的與等量的自由空間在兩端的中心。如果剩余的自由空間為負(fù)，即項目溢出，則彈性項目將在兩個方向上均等溢出。

  • space-between -的Flex項都沿著主軸線，其中第一項放置在主起始沿和最后一個放置在主端均勻地分布。如果項目溢出或只有一項，則此值等于flex-start。

  • space-around -Flex項在兩端均以一半大小的空間均勻分布。如果它們溢出或只有一項，則此值等于center。

下面的示例將向您展示不同justify-content屬性值對具有固定寬度的多列flex容器的影響。

.flex-container {
    width: 500px;
    min-height: 300px;
    border: 1px solid #666;
    /* Safari */
    display: -webkit-flex;
    -webkit-justify-content: space-around;
    
    display: flex;
    justify-content: space-around;
}
.item1 {
    width: 75px;
    background: #e84d51;
}
.item2 {
    width: 125px;
    background: #7ed636;
}
.item3 {
    width: 175px;
    background: #2f97ff;
}
測試看看?/?

沿橫軸對齊Flex項目

可以使用align-items或align-self屬性沿Flex容器的橫軸（即垂直方向）對齊Flex項目。但是，在將align-items應(yīng)用于flex容器時，該align-self屬性將應(yīng)用于單個flex項目，并覆蓋align-items。這兩個屬性均接受以下值：

  • flex-start — Flex項目位于交叉軸的起點。

  • flex-end — Flex項目位于交叉軸的末端。

  • center —伸縮項放置在橫軸的中心，兩端具有相等的可用空間。如果剩余的自由空間為負(fù)，即項目溢出，則彈性項目將在兩個方向上均等溢出。

  • baseline —每個彈性項目的文本基準(zhǔn)（或內(nèi)聯(lián)軸）與最大的彈性項目的基線對齊font-size。

  • Stretch —伸縮項目將拉伸以填充當(dāng)前行或列，除非由最小和最大寬度或高度阻止。align-items屬性的默認(rèn)值。

以下示例將向您展示不同align-items屬性值對具有固定高度的多列flex容器的影響。

.flex-container {
    width: 500px;
    min-height: 300px;
    border: 1px solid #666;
    /* Safari */
    display: -webkit-flex;
    -webkit-align-items: center;
    
    display: flex;
    align-items: center;
}
.item1 {
    width: 75px;
    height: 100px;
    background: #e84d51;
}
.item2 {
    width: 125px;
    height: 200px;
    background: #7ed636;
}
.item3 {
    width: 175px;
    height: 150px;
    background: #2f97ff;
}
測試看看?/?

您還可以在多行或多列flex容器的橫軸上分配可用空間。該屬性align-content用于對齊flex容器的行，例如，如果橫軸上有多余的空間，則將多行flex容器中的行justify-content對齊，類似于將單個項目對齊主軸。

該align-content屬性接受與相同的值justify-content，但將其應(yīng)用于橫軸而不是主軸。它還接受另一個價值：

  • Stretch可用空間在所有行或列之間平均分配，以增加其交叉大小。如果剩余的自由空間為負(fù)，則此值等于flex-start。

以下示例將向您展示不同align-content屬性值對具有固定高度的多行flex容器的影響。

.flex-container {
    width: 500px;
    min-height: 300px;
    margin: 0 auto;
    font-size: 32px;
    border: 1px solid #666;
    /* Safari */
    display: -webkit-flex;
    -webkit-flex-flow: row wrap;
    -webkit-align-content: space-around;
    
    display: flex;
    flex-flow: row wrap;
    align-content: space-around;
}
.flex-container div {
    width: 150px;
    height: 100px;
    background: #dbdfe5;
}
測試看看?/?

重新排序各個Flex項目

除了更改flex容器內(nèi)的流之外，您還可以更改使用order屬性顯示單個flex項的順序。此屬性接受正整數(shù)或負(fù)整數(shù)作為值。默認(rèn)情況下，所有的flex項目都是按照它們在HTML標(biāo)記中出現(xiàn)的順序顯示和布局的，因為order默認(rèn)值是0。

以下示例將向您展示如何指定單個彈性項目的順序。

.flex-container {
    width: 500px;
    min-height: 300px;
    border: 1px solid #666;
    display: -webkit-flex; /* Safari 6.1+ */
    display: flex;
}
.flex-container div {
    padding: 10px;
    width: 130px;
}
.item1 {
    background: #e84d51;
    -webkit-order: 2; /* Safari 6.1+ */
    order: 2;
}
.item2 {
    background: #7ed636;
    -webkit-order: 1; /* Safari 6.1+ */
    order: 1;
}
.item3 {
    background: #2f97ff;
    -webkit-order: -1; /* Safari 6.1+ */
    order: -1;
}
測試看看?/?

注意：具有最低階值的項目放在最前面，而具有最高階值的項目放在最后。具有相同order值的項目將按照它們在源文檔中出現(xiàn)的順序顯示。

Flexbox的水平和垂直中心對齊

通常，內(nèi)容塊的垂直對齊涉及使用JavaScript或一些簡陋的CSS技巧。但是，使用flexbox可以輕松進(jìn)行此操作，而無需進(jìn)行任何調(diào)整。

以下示例將向您展示如何使用CSS3靈活框功能輕松地在中間將內(nèi)容塊垂直和水平對齊。

.flex-container {
    width: 500px;
    min-height: 300px;
    border: 1px solid #666;
    display: -webkit-flex; /* Safari 6.1+ */
    display: flex; 
}
.item {
    width: 300px;
    padding: 25px;
    margin: auto;
    background: #f0e68c;
}
測試看看?/?

啟用彈性項目換行

默認(rèn)情況下，彈性容器僅顯示彈性項目的單行或單列。但是flex-wrap如果在一條伸縮行上沒有足夠的空間，則可以使用flex容器上的屬性來指定其伸縮項是否換成多行。

該flex-wrap屬性接受以下值：

  • nowrap-默認(rèn)值。伸縮項目放在一行中。如果伸縮線上沒有足夠的空間，則可能會導(dǎo)致溢出。

  • wrap — flex容器將其flex項目分解為多行，類似于文本太寬而無法容納在當(dāng)前行上時如何將其分解到新行上。

  • wrap-reverse —伸縮項目將在必要時進(jìn)行換行，但順序相反，即，交叉起點(cross-start)和交叉終點(cross-end)方向會互換。

以下示例將向您展示如何使用flex-wrap屬性在flex容器中的一行或多行中顯示flex項目。

.flex-container {
    width: 500px;
    min-height: 300px;
    border: 1px solid #666;
    /* Safari */
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    
    display: flex;
    flex-wrap: wrap;  
}
.flex-container div{
    width: 130px;
    padding: 10px;    
    background: #dbdfe5;
}
測試看看?/?

注意：您還可以使用簡寫CSS屬性在單個聲明中flex-flow設(shè)置flex-direction和flex-wrap。它接受與各個屬性相同的值，并且值可以為任意順序。