为什么屏幕较宽时，两个p标签不会彼此相邻？ [英] Why is the two p-tags not beside each other when the screen is wide?
问题描述
当浏览器宽度超过1000像素时，div.flex-container会发生变化，使得p标记可以在彼此旁边。
When the browser width is more than 1000px the div.flex-container changes so that the to p-tags could be beside each others. They are however still above each other.
我可以做什么让他们在宽屏幕上彼此相邻，在更窄的屏幕上彼此上下？
What can I do to get them beside each other on wide screens and above each other on more narrow screens?
（对不起，我改变了这里的问题，虽然我真的不明白发生了什么，用flex-direction：column的p标签总是在彼此之上。他们彼此相爱。）
(Sorry, I changed the question here. Though I really can't understand what is happening. With "flex-direction: column" the p-tags are always above each other. Without it they are alwasy beside each other.)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.flex-container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
max-width: 800px;
min-height: 180px;
border: red 2px solid;
}
@media (max-width: 1000px) {
.flex-container {
max-width: 400px;
}
}
.flex-container p {
flex: 1;
-webkit-box-flex: 1;
display: block;
width: 300px;
margin: 0px;
margin-right: 20px;
margin-bottom: 10px;
border: red 2px solid;
}
</style>
</head>
<body>
<div class="flex-container">
<p>
This page is for setting up the W+ bookmarklet and adding it
to your brower's bookmarks bar.
</p>
<p>
The idea of this bookmark is to help searching when you find
something on a web page. Maybe you see a book
title that looks interesting? Then you can start the W+
bookmarklet and click the first word and the last word in
the title. That will give you a number of alternative
ways to search for it.
</p>
</div>
</body>
</html>
推荐答案
Flex是一个新的属性，之前。它非常依赖于您的网络浏览器，因此我将对每个主要浏览器进行细分：
Flex is somewhat of a new property, as you highlighted before. It is pretty highly dependent upon your web browser so I will break it down for each of the major browsers:
Internet Explorer：
此功能仅适用于IE 10+，实际上它只有一种类型的语法，如下所示：
Internet Explorer: This feature only works with IE 10+ and in fact, it only has one type of syntax which is below:
display:flexbox;
Safari：
此功能仅适用于Safari 3.1+并且实际上使用它的旧版本：
Safari: This feature only works with Safari 3.1+ and in fact.. uses the older versions of it:
display:box;
Chrome：
此功能有两种方式。首先，版本21+可以使用现代版本：
Chrome: This feature works in two ways. First, versions 21+ can use the modern version which is:
display:flex;
其次，版本20-只能使用旧版本（就像Safari）
Second, versions 20- can only use the older versions (just like Safari)
FireFox：
这也有两种方法。首先，版本2到21使用旧版本（同样，Safari和Chromes版本20-）。第二，版本22+将使用现代版本（正如Chromes版本21 +）。
FireFox: This is also works two ways. First, versions 2 through 21 use the old version (again, like Safari and Chromes Versions 20-). Second, versions 22+ will use the modern version(just as Chromes versions 21+).
Opera：
与12.1+，还支持现代版本（与Firefox的版本22+和Chromes版本21 +）相同。
Opera: This only works with 12.1+ and also supports the modern version (same as Firefox's versions 22+ and Chromes versions 21+).
有了这一点，你需要非常清楚到您使用的浏览器。要获得关于使用flex和flex框的更好的综合指南，我强烈建议年历，我链接的页面将给你一个基本的了解。
With that being said, you need to be very clear as to what browser you are using. To get a better comprehensive guide on the use of flex and flex boxes, I would highly suggest the Almanac, the page I have linked will give you a walk through with the basics.
这篇关于为什么屏幕较宽时，两个p标签不会彼此相邻？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
