CSS旋转的Flex布局90上移动

Question

度

我试图得到一个响应的布局，在桌面上的样子：

和移动基本上是这样的，该90度旋转：

我已经拿到了桌面上的工作，与手机版几乎工作，但我的方法来移动版本觉得不妥。这感觉就像一个'重做'关闭弯曲和使用浮动。当我真的只想把我的“行”到“列”，但我已经尝试和失败使用我从这里拿了宽度和流动方向的组合： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

另外我有一个次要问题，这个HTML是'响应'当我调整大小屏幕，但它不工作时，我使用铬到模拟移动设备！

总之，我感到困惑，感觉我做的都是错的！什么是正确的方法？

这是我当前的代码：

body { 
 
    display: flex; 
 
} 
 

 
.game-area { 
 
    padding-top: 24px; 
 
    padding-left: 54px; 
 
    width: 1156px; 
 
    /*display: flex; 
 
    flex-direction: row;*/ 
 
    margin: auto; 
 
    background-color: #27332F; 
 
} 
 

 
.tile { 
 
    float: left; 
 
    height: 100px; 
 
    width: 100px; 
 
    margin-left: 20px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    background-color: orange; 
 
    color: white; 
 
} 
 

 
.row { 
 
    display: flex; 
 
    width: 100%; 
 
    clear: left; 
 
    padding: 5px; 
 
    justify-content: space-evenly; 
 
} 
 

 
#highest { 
 
    float: left; 
 
} 
 

 
#lowest { 
 
    float: right; 
 
} 
 

 
@media screen and (max-width: 1200px) { 
 
    .game-area { 
 
    width: 1156px; 
 
    } 
 
    .tile { 
 
    margin-left: 20px; 
 
    } 
 
} 
 

 
@media screen and (max-width: 960px) { 
 
    .game-area { 
 
    width: 916px; 
 
    } 
 
} 
 

 
@media screen and (max-width: 768px) { 
 
    .game-area { 
 
    width: 724px; 
 
    } 
 
} 
 

 
@media screen and (max-width: 600px) { 
 
    .game-area { 
 
    width: 556px; 
 
    } 
 
} 
 

 
@media screen and (max-width: 420px) { 
 
    .game-area { 
 
    padding-left: 15px; 
 
    padding-top: 27px; 
 
    } 
 
    .row { 
 
    width: 33%; 
 
    display: block; 
 
    clear: none; 
 
    float: left; 
 
    flex-direction: column; 
 
    justify-content: space-evenly; 
 
    } 
 
    .tile { 
 
    float: none; 
 
    height: 50px; 
 
    font-size: 8pt; 
 
    } 
 
} 
 

 
@media screen and (max-width: 320px) { 
 
    .game-area { 
 
    width: 290px; 
 
    } 
 
}

<meta name="viewport" content="width=device-width"> 
 
<div class="game-area" id="game-area-div"> 
 

 
    <div id="number-row" class="row"> 
 
    <div class="tile">1</div> 
 
    <div class="tile">2</div> 
 
    <div class="tile">3</div> 
 
    <div class="tile">4</div> 
 
    <div class="tile">5</div> 
 
    <div class="tile">6</div> 
 
    <div class="tile">7</div> 
 
    </div> 
 
    <div id="answer-row-1" class="row"> 
 
    <div class="tile">2</div> 
 
    <div class="tile">4</div> 
 
    <div class="tile">6</div> 
 
    </div> 
 
    <div id="answer-row-2" class="row"> 
 
    <div class="tile">1</div> 
 
    <div class="tile">3</div> 
 
    <div class="tile">5</div> 
 
    <div class="tile">7</div> 
 
    </div> 
 
</div>

UPDATE 由于this answer媒体标签现在正常工作:)使用：

<meta name="viewport" content="width=device-width"> 

Answer 1

这可以使用flexbox完成，只需设置flex-direction列。

.wrap { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-evenly; 
 
    margin-bottom: 25px; 
 
} 
 

 
.wrap--mobile { 
 
    flex-direction: column; 
 
    float: left; 
 
    width: 50px; 
 
    height: 400px; 
 
    margin-right: 25px; 
 
} 
 

 
.block { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: red; 
 
}

<!-- Horizontal layout !--> 
 
<div class="wrap"> 
 
    <div class="block">1</div> 
 
    <div class="block">2</div> 
 
</div> 
 

 
<div class="wrap"> 
 
    <div class="block">1</div> 
 
    <div class="block">2</div> 
 
    <div class="block">3</div> 
 
    <div class="block">4</div> 
 
</div> 
 

 
<div class="wrap"> 
 
    <div class="block">1</div> 
 
    <div class="block">2</div> 
 
    <div class="block">3</div> 
 
</div> 
 

 
<hr> 
 

 
<!-- Vertical layout !--> 
 
<div class="wrap wrap--mobile"> 
 
    <div class="block">1</div> 
 
    <div class="block">2</div> 
 
</div> 
 

 
<div class="wrap wrap--mobile"> 
 
    <div class="block">1</div> 
 
    <div class="block">2</div> 
 
    <div class="block">3</div> 
 
    <div class="block">4</div> 
 
</div> 
 

 
<div class="wrap wrap--mobile"> 
 
    <div class="block">1</div> 
 
    <div class="block">2</div> 
 
    <div class="block">3</div> 
 
</div>

希望这有助于。