CSS fr單位的詳解

 

青春須早為，豈能長少年。——孟郊《勸學》

這周在逆戰班中學了許多東西。例如：flex布局、CSS Grid 網格布局、移動端rem布局、移動端流式布局、移動端flex布局、移動端響應式布局等等。幾天寫的是關於CSS Grid 網格布局的fr單位。

CSS中有不少屬性是以長度作為值的。盒模型的屬性就是一些很明顯的值屬性：width、height、margin、padding、border。除此之外還有很多其他的CSS屬性的值同樣也是長度值，像字體的大小、間距等。CSS中有哪些長度單位可以作為屬性的值呢？這樣的單位有很多。如px、em、rem、vw等等。今天要講的就是“fr”。

fr單位被用於在一系列長度值中分配剩余空間，如果多個已指定了多個部分，則剩下的空間根據各自的數字按比例分配。彈性尺寸使用fr尺寸單位，其來自 “fraction”這個單詞的前兩個字母，表示整體空間的一部分。

css代碼示例

 

#box{ width:300px; height: 300px; border:1px black solid; margin:100px;
        display:grid;
        grid-template: 
        "a1 a1 a1" 1fr
        "a3 a3 a2" 1fr
        "a3 a3 a2" 1fr
        /1fr 1fr 1fr;
    }
    #box div{ background:red; border:1px yellow dashed;}
    #box div:nth-of-type(1){ grid-area: a1;}
    #box div:nth-of-type(2){ grid-area: a2;}
    #box div:nth-of-type(3){ grid-area: a3;}

　　

HTML部分

 

<div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>

　　

用fr分配空間得到的網格如下：