将多列桌面布局转换为单列移动布局 [英] Converting multi-column desktop layout to single-column mobile layout

问题描述

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

附加的css包含在网站的其他部分，因此我包含在内这一切。

我试图查找某些媒体查询，并试图围绕柔性包装我的头。任何帮助将不胜感激。

* {border：1px solid red; / *仅用于布局* /} * {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; 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 =imgsrc =http://placehold.it/300x300> < / DIV> < div class =col-4> < img class =imgsrc =http://placehold.it/300x300> < / DIV> < div class =col-4> < img class =imgsrc =http://placehold.it/300x300> < / DIV> < / div>< / header>  

解决方案

flex容器的初始设置是 flex-direction：row 。这意味着容器的子元素（flex items）将水平对齐，就像在代码中一样。

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

  .row {
 display：flex; 
 flex-direction：column; / *新* / 
} 
  

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

  @media screen和（max-width：500px）{
 .row {flex-direction：column; } 
} 
  

jsFiddle demo

I had an entire site created, but removed all the filler and left the 3-column divs. My goal is to have these 3 columns stack vertically as the image is resized.

The additional css is included as it was used with the rest of the site, so I included it all.

I tried looking up certain media queries and tried wrapping my head around flexbox. Any help would be appreciated.

  * {
  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>

解决方案

An initial setting of a flex container is flex-direction: row. That means that the children of the container ("flex items") will align horizontally, just like in your code.

To stack items vertically, switch to flex-direction: column.

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

If you want flex items to stack vertically on resize, change the flex-direction in a media query:

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

jsFiddle demo

这篇关于将多列桌面布局转换为单列移动布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！