爲什麼Flex項目擴展全高而沒有flex-grow？

我有以下代碼：爲什麼Flex項目擴展全高而沒有flex-grow？

.ai-container, 
 
.ai-overlay { 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.ai-overlay { 
 
    background-color: black; 
 
    opacity: .2; 
 
    z-index: 1000; 
 
} 
 
.ai-dialog { 
 
    z-index: 1001; 
 
    display: flex; 
 
    flex-direction: column; 
 
    border: 1px solid darkgray; 
 
    border-radius: 5px; 
 
    background-color: white; 
 
    min-width: 300px; 
 
    box-shadow: 0px 0px 15px #444; 
 
    overflow: hidden; 
 
} 
 
.ai-header, 
 
.ai-footer, 
 
.ai-body { 
 
    padding: 10px; 
 
} 
 
.ai-header { 
 
    background-color: hsl(0, 0%, 20%); 
 
    color: white; 
 
    display: flex; 
 
    font-size: 1.1em; 
 
    justify-content: space-between; 
 
} 
 
.ai-footer { 
 
    display: flex; 
 
    background-color: lightgray; 
 
    justify-content: space-between; 
 
}

<div class="ai-container"> 
 
    <div class="ai-overlay"></div> 
 
    <div class="ai-dialog"> 
 
    <div class="ai-header"> 
 
     <span>This is the header</span> 
 
     <span>X</span> 
 
    </div> 
 
    <div class="ai-body">This is the body</div> 
 
    <div class="ai-footer"> 
 
     <span> 
 
      <button>Submit</button> 
 
      <button>Lookup</button> 
 
     </span> 
 
     <button>Cancel</button> 
 
    </div> 
 
    </div> 
 
</div>

您可以在這裏看到的結果：http://plnkr.co/edit/5SOxkMV9qQ86m6d2jyT0?p=preview

然而，由此產生的「對話」被拉伸以填充整個垂直空間。

我期待這個，如果我有flex-grow: 1，但我沒有。

如果您添加以下的CSS：

.ai-container, .ai-overlay { 
    ... /*all the previous settings */ 
    align-items: center; 
}

然後在對話框看起來像我所期望的......只是高到足以適應內容。我認爲刪除align-items只是將對話框移到瀏覽器窗口的頂部而不影響高度。

我在這裏錯過了什麼？

來源

2016-12-28 RHarris

我嘗試添加'柔性基礎：content'和'柔性成長：0'到我所有的孩子班，但沒有任何變化。 – RHarris

我認爲刪除align-items只是將對話框移到瀏覽器窗口的頂部而不影響高度。

你就近了。您假定默認值爲align-items爲flex-start。其實，默認值是stretch。

這意味着Flex項目將始終展開以覆蓋容器橫軸的全部長度，除非初始設置被覆蓋。

您可以覆蓋與align-items: flex-start，center默認等

這裏有一些更多的細節：How to disable equal height columns in Flexbox?

來源

2016-12-28 20:00:38

謝謝噸！它做到了。我忽略了默認值！ – RHarris

爲什麼Flex項目擴展全高而沒有flex-grow？

回答

相關問題