Flex媒体查询：从左到右自上而下

Question

有没有办法让它在767px和1列480px上成为2列？当转向1列时，是否可以使柔性相同？

这是我到目前为止所做的：

＆＃13;

＆＃13;

.col-container {
	display: flex;
	width: 100%;
}
.col-container>.col {
	padding:10px;
	width:100%;
	margin:0;
}
.col:nth-child(odd) {
	background-color:green;
}
.col:nth-child(even) {
	background-color:blue;
}

@media only screen and (max-width: 767px) {
	.col-container { 
		flex-wrap: wrap;    
	}
}

＆＃13;

<div class="col-container">
	<div class="col">
		<h2>Column 1</h2>
		<p>Hello World</p>
	</div>
	
	<div class="col">
		<h2>Column 2</h2>
		<p>Hello World!</p>
		<p>Hello World!</p>
		<p>Hello World!</p>
		<p>Hello World!</p>
	</div>
	
	<div class="col">
		<h2>Column 3</h2>
		<p>Some other text..</p>
		<p>Some other text..</p>
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;

此flex显示四列

到全宽到767px

Answer 1

只需将您的css代码更改为以下代码即可。

我想我认为你在容器上使用width:50%，就像我在评论中所说的那样，它应该是代码中的子元素，.col。我希望这能解决你所寻找的问题。 ：）

我已在codepen上添加了您的代码，以防您需要它=＆gt; https://codepen.io/anon/pen/gKgWgm

    .col-container {
      display: flex;
      width: 100%;
    }
    .col-container>.col {
      display:block;
      padding:10px;
      width:100%;
      margin:0;
      border:1px solid red;
    }
    .col:nth-child(odd) {
      background-color:green;
    }
    .col:nth-child(even) {
      background-color:blue;
    }

    @media only screen and (max-width: 767px) {
      .col-container { 
        flex-wrap: wrap;    
      }
      .col-container .col{
        width:50%;
        min-height:250px;
      }
    }

    @media only screen and (max-width: 460px) {
      .col-container .col{
        width:100%;
        min-height:200px;
      }
    }