-1
Kendimi esnek kutu düzeni hakkında öğretiyorum ve iki "esnek öğe" öğesinin, biri diğerinin üstünde, 600 pikselin altındaki ekran genişliklerinde dikey bir sütunda gösterilmesini istiyorum.Hangi flexbox özelliği, yığılmış öğelerin dikey sütununu zorlar?
Benim izlenimim, aşağıdaki "esnek yön: sütun" özelliğinin bununla ilgilenmesi gerektiğiydi, ancak bu özelliğin amacını veya ayrıntılarını yanlış anlamış gibi görünüyor.
Birisi bu davranışa izin verebilecek bir özellik önerebilir mi?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
html{background:gray; display:flex}
.flex-container{background:brown; display:flex; height:100vh; width:600px; margin:auto; border:1px solid black;}
.flex-item{background:white; width:250px; min-height:100px; margin:auto; font-size:14px;}
@media (max-width:600px){
.flex-container{width:100%; flex-direct:column;}
.flex-item{width:100%; font-size:20px;}
}
</style>
</head>
<body class="flex-container">
<div class="flex-item">
This is a flex item.
</div>
<div class="flex-item">
This is a flex item. I expect it to move below the first on screens less than 600px;
</div>
</body>
</html>
Yazım hatası var: 'flex-direct: column;' Özellik ismini düzeltin ('flex-direction') sonra çalışır. –