当浏览器宽度超过1000px时,div.flex-container会发生变化,因此to-p-tags可能会彼此相邻.然而,他们仍然在彼此之上.
我可以做些什么来让他们在更宽的屏幕上在宽屏幕上彼此相邻？
(对不起,我在这里更改了问题.虽然我真的无法理解发生了什么.使用"flex-direction:column",p-tag总是在彼此之上.没有它,它们彼此相邻.)
<!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>
cim*_*non 13
使用Flexbox的列方向需要显式高度才能使包装正常工作(请参阅:http://codepen.io/cimmanon/pen/oyilE ).
如果您想要报纸样式列而不使用明确的高度,那么多列模块就是您正在寻找的.
http://codepen.io/cimmanon/pen/CcGlE
.flex-container {
-webkit-columns: 20em;
-moz-columns: 20em;
columns: 20em;
}