Warum stehen die beiden p-Tags nicht nebeneinander, wenn der Bildschirm breit ist?
Wenn die Browser-Breite mehr als 1000 Pixel beträgt, ändert sich der div.flex-Container, sodass die to p-Tags nebeneinander liegen können. Sie stehen jedoch noch übereinander.
Was kann ich tun, um sie auf Breitbildschirmen nebeneinander und auf schmaleren Bildschirmen übereinander zu stellen?
(Entschuldigung, ich habe die Frage hier geändert. Obwohl ich wirklich nicht verstehen kann, was passiert. Bei "flex-direction: column" sind die p-tags immer übereinander. Ohne sie sind sie immer nebeneinander.)
<!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>