将桌面布局转换为单列移动布局

Posted 2023-03-06

【中文标题】将桌面布局转换为单列移动布局

【英文标题】：Converting desktop layout to single-column mobile layout

【发布时间】：2016-01-05 08:37:13

【问题描述】：

我创建了一个完整的网站，但删除了所有填充物并留下了 3 列 div。我的目标是在调整图像大小时让这 3 列垂直堆叠。

附加的 css 包含在网站的其余部分中，因此我将其全部包含在内。

我尝试查找某些媒体查询，并尝试将我的头包裹在 flexbox 上。任何帮助将不胜感激。

  * 
  border: 1px solid red;
  /*For layout purposes only*/


* 
  max-width: 980px;
  font-family: 'Lato', sans-serif;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 0px;


* 
  box-sizing: border-box;


.container 
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;


.row 
  width: 100%;
  display: flex;


.img 
  display: block;
  margin: auto;


.col-1 
  width: 8.33%;


.col-2 
  width: 16.66%;


.col-3 
  width: 25%;


.col-4 
  width: 33.33%;


.col-5 
  width: 41.66%;


.col-6 
  width: 50%;


.col-7 

<header class="container">
  <div class="row">
    <div class="col-4">
      <img class="img" src="http://placehold.it/300x300">
    </div>
    <div class="col-4">
      <img class="img" src="http://placehold.it/300x300">
    </div>
    <div class="col-4">
      <img class="img" src="http://placehold.it/300x300">
    </div>
  </div>
</header>

【问题讨论】：

而不是margin: 0 auto，放'float:left'。当屏幕变窄时它应该堆叠。

【参考方案1】：

弹性容器的初始设置是flex-direction: row。这意味着容器的子项（“flex items”）将水平对齐，就像在您的代码中一样。

要垂直堆叠项目，请切换到flex-direction: column。

.row 
    display: flex;
    flex-direction: column; /* NEW */

如果您希望 flex 项目在调整大小时垂直堆叠，请在媒体查询中更改 flex-direction：

@media screen and ( max-width: 500px )  
     .row  flex-direction: column; 
   

jsFiddle demo

【讨论】：

你明白了，最后一件事。当屏幕尺寸减小时，我无法将 div 居中。他们现在 stack ，但由于某种原因，图像似乎向右浮动，但我的链接居中。当我试图证明内容居中时，它是无响应的。

问题是width: 33.33% on .col-4，在媒体查询触发后仍然存在。通过将媒体查询中的规则调整为width: 100%，问题似乎得到了解决。 jsfiddle.net/nkc1wqhn/1