CSS Flexbox订单

Question

我正在使用Flexbox进行响应式网页设计，并根据显示尺寸更改div框的顺序。

对于PC-View，我使用两种类型的设计：左侧的图片（向左浮动;向左清除）右侧的图片（向右浮动;向右清除）浮动文字。

对于Mobile-View，我使用“order”将其更改为列flexbox设计（Top on Top，然后是图片，然后是文本）。这适用于右侧图片，没有任何问题。对左侧图片使用相同的代码会将图片放在底部，而无需更改它。

有谁知道为什么？

@media only screen and (max-width: 900px) {
div.wrap_content_pic_left, div.wrap_content_pic_right {
	     width: 97%;
				
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-align-items: center;
		align-items: center;
		-webkit-justify-content: center;
		justify-content: center
				
	}			

	div.wrap_content_pic_right h1, wrap_content_pic_left h1, {
		-webkit-order: 1;
		order: 1;
	}

	div.wrap_content_pic_right h3, wrap_content_pic_left  h3, {
		-webkit-order: 3;
		order: 3;
	}

	div.wrap_content_pic_left div#pic, div.wrap_content_pic_right div#pic {
		float: none;
			
		-webkit-order: 2;
		order: 2;
	
		width: auto;
		text-align:  center;
			
	}
}


   div.wrap_content_pic_right, div.wrap_content_pic_left {
		/*Position*/
		position: relative;
		padding: 1%;
		margin-bottom: 1%;
		clear: both;
	}

	div.wrap_content_pic_right div#pic {
		/*Size*/
		width: 30%;
						
		/*Position*/
		float: right;
		clear: right;
						
	}
		
		
	div.wrap_content_pic_left div#pic {
		/*Size*/
		width: 30%;

		/*Position*/
		float: left;
		clear: left;
	}

<div class = "wrap_content_pic_left">
    <div id="pic">
       <a href = "URL"><img src="PIC"/></a>
       <h3><a href = "URL">Text</a></h3>
    </div>
   <h1>Title</h1>
   <h3>Text</h3>
   <div id="mobile" ><h3><a href = "URL">Text</a></h3></div>
   <div style="clear: both"></div> 
</div>

	

Answer 1

使用display: flex;时会忽略浮点数。相反，你应该看看如何使用flex。这是How to understand Flexbox上的一个很好的链接。我一次又一次地回归到这一次又一次，它非常简短，让你更好地理解Flex。

使用flex时存在问题，尤其是在使用百分比来确定整体宽度时。然而，你可以在SO

找到一些很棒的工作