align-content無法在flex項目上工作

我有一個行方向flexbox嵌套在列方向flexbox中，但是當我想在子項中使用align-content時，它不起作用。align-content無法在flex項目上工作

當我將父母的display:flex替換爲display:block時，它起作用。

在下面的代碼中，我們可以看到.rowalign-content: flex-end;不起作用。但如果我用display: block;代替.columndisplay: flex;，則align-content: flex-end;起作用。

請問可以解決這個問題嗎？

body { 
 
    background-color: grey; 
 
} 
 

 
.column { 
 
    display: flex; 
 
    flex-flow: column nowrap; 
 
    justify-content: flex-start; 
 
    align-items: stretch; 
 
    background-color: green; 
 
} 
 

 
.row { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: space-around; 
 
    align-content: flex-end; 
 
    align-items: center; 
 
    background-color: red; 
 
} 
 

 
.row-test { 
 
    min-height: 200px; 
 
} 
 

 
span { 
 
    width: 30%; 
 
    background-color: orange; 
 
}

<body class="column"> 
 
    <section class="row row-test"> 
 
     <span>Test Test Test Test Test Test Test Test Test</span> 
 
     <span>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test</span> 
 
    </section> 
 
</body>

來源

2016-05-14 Jean-Louis De La Marre

-1

您需要添加柔性包裝：包裝;工作對齊內容

來源

2016-05-14 13:09:30

已經完成！：/ –

當主flex容器切換到display: block時align-content「工作」的事實只是一個瀏覽器錯誤。

它根據需要將彈性項目移動到底部，但僅在Firefox中使用。

在Chrome中，它什麼都不做，這是正確的行爲（根據規範）。

而在IE11中，它將項目轉移到頂部（也不合格）。

這些錯誤和不一致之處不應作爲指導依據，因爲它們無助於解釋align-content屬性如何工作。

在單線柔性容器，像在的問題，align-content沒有效果。要使用的財產是align-items。

在多線柔性容器，使用屬性是align-content。

另外，align-self屬性與align-items密切相關。一個旨在覆蓋另一個。它們都起作用。

從規格：

8.3. Cross-axis Alignment: the align-items and align-self properties

align-items設置所有的柔性容器的項目的默認對齊方式，包括匿名彎曲的物品。 align-self允許爲各個彈性項目覆蓋此默認對齊方式。

8.4. Packing Flex Lines: the align-content property

的align-content財產對齊柔性容器內的柔性容器的線路時存在交叉軸額外的空間，類似如何justify-content對齊的主軸線內的各個項目。 請注意，此屬性對單行flex容器沒有影響。

在這個問題上來講，忘記align-content。這是沒用的（除非你的flex項目包裝）。

只需使用align-items: flex-end（或align-self: flex-end在span的）：

body { background-color: grey; } .column { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: stretch; background-color: green; } .row { display: flex; flex-flow: row wrap; justify-content: space-around; align-content: flex-end; /* will work when items have wrapped */ align-items: flex-end; /* adjusted; works when items in one line */ background-color: red; } .row-test { min-height: 200px; } span { width: 30%; background-color: orange; /* align-self: flex-end; this would also work on single line container */ }

<body class="column"> <section class="row row-test"> <span>Test Test Test Test Test Test Test Test Test</span> <span>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test</span> </section> </body>

來源

2016-05-15 01:28:01

align-content無法在flex項目上工作

回答

相關問題