顯示器的精確度如何：容器div上的flex屬性和內部div上的flex屬性？

-1

正如你可以在此佈局看到存在具有ID =「COM」外部的div容器，並有這個CSS：

.com { 
    align-items: stretch; 
    display: flex; 
    height: 100vh; 
    overflow: hidden; 
}

所以設置了顯示：彎曲;加上align-items：stretch;屬性。所以，在閱讀這裏：

在我看來，它是定義在該元素被放在一個旁邊其他的容器，但我絕對不知道如果我失去了一些東西。

然後，該容器，該容器限定具有ID = 「com__content」裏面的內容，這一個：

<div class="com__content">

具有關聯下面的CSS設置：

.com__content { 
    background: #404855 none repeat scroll 0 0; 
    flex: 8 1 0; 
    padding: 10vh 10vw; 
    position: relative; 
}

同樣在該內部部件有與flex行爲有關的內容。

究竟是什麼flex：8 1 0;這個div的屬性是什麼意思？

首先，你似乎混淆了ID和類。尋求代碼幫助的問題必須包含在問題本身**中重現它所需的最短代碼**。儘管您已經提供了一個示例鏈接，但如果鏈接無效，那麼您的問題對於其他未來具有相同問題的SO用戶將沒有任何價值。 –

請拼寫檢查您的問題標題。 –

flex: 8 1 0;
是快捷立場 '柔性成長'， '彈性收縮' 和 '柔性基礎'
第一個Flex-增長8種手段：這個div完全有8 /總空間

例如：你有一個div.first flex-grow: 1; 和另一個div.second flex-grow: 2;
第一個div在這一行只有1/3 psace，剩下的就是第二個div的地方。

flex-shrink 這定義瞭如果需要收縮Flex項目的能力。
值1意味着收縮1次

最後flex-basis 定義了一個元素的默認大小的剩餘空間被分配之前。
你可以設置，因爲它可以是長度（20％或100像素），它規定了撓性項目

的初始大小爲你提到的文章A Complete Guide to Flexbox有求佛

柔性這是flex-grow，flex-shrink和flex-basis相結合的簡寫。第二個和第三個參數（flex-shrink和flex-basis）是可選的。默認值是0 1 auto。

2016-03-14 12:16:32 Anami

回答