我正在try 为Flex编写响应式CSS.我已经使用了灵活的方向行和列响应.但它不起作用.所以，如何显示这个div框灵活的移动和标签设备.
For mobile: Div boxes should be like one below one(vertical).
For Tab: Div boxes should be like(horizontal) over boxes it should be like next line.
演示:https://stackblitz.com/edit/flex-box-example-e2fqif?file=src%2Fapp%2Fapp.component.css
.flex-container {
display: flex;
}
.flex-child {
flex: 1;
border: 2px solid yellow;
background-color: blueviolet;
width: 150px;
height: 150px;
}
/* For Tablet View */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.flex-container {
flex-direction: row;
}
}
/* For Mobile Portrait View */
@media screen and (max-device-width: 480px) and (orientation: portrait) {
.flex-container {
flex-direction: column;
}
}
/* For Mobile Landscape View */
@media screen and (max-device-width: 640px) and (orientation: landscape) {
.flex-container {
flex-direction: row;
}
}
/* For Mobile Phones Portrait or Landscape View */
@media screen and (max-device-width: 640px) {
.flex-container {
flex-direction: row;
}
}<div class="flex-container">
<div class="flex-child magenta">Flex Column 1</div>
<div class="flex-child green">Flex Column 2</div>
<div class="flex-child green">Flex Column 3</div>
<div class="flex-child green">Flex Column 4</div>
<div class="flex-child green">Flex Column 5</div>
<div class="flex-child green">Flex Column 6</div>
</div>