Ich habe 4 Divs, die Anzeige haben: Flex-Reihe, die nach links schwebt. Ich versuche, dass es reagiert, wenn die Bildschirmgröße verkleinert wird. Die Blöcke bewegen sich jedoch nicht. Die .box soll brechen, wenn sie den Rand berührt. Hier ist der Code:
body{
background-color:grey;
}
.outer {
display: flex;
flex-direction: row;
float:left;
}
.box {
color: white;
text-align: center;
font-family: 'Courier New';
background-color: skyblue;
width: 180px;
height: 200px;
margin: 10px;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out, transform .2s;
}
.box:hover {
background-color: #4aa8ea;
}
.zoom {
display: flex;
flex-direction: column;
text-align: center;
width: 50%;
height: 50%;
transition: transform 2s, filter 2s;
margin: 10px;
}
.box:hover .zoom {
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
-ms-transform: scale(1.1);
/* IE 9 */
-webkit-transform: scale(1.1);
/* Safari 3-8 */
transform: scale(1.1);
}
.centerImg {
display: block;
margin-left: auto;
margin-right: auto;
}
.ttl {
background-color: black;
font-weight: bold;
font-family:monospace;
font-size:20px;
}
.desc {
color: black;
width: 100%;
height: 30%;
box-sizing: border-box;
word-wrap: break-word;
font-size:10px;
padding:10px;
overflow:hidden;
background-color:white;
}
.wrapper {
-webkit-column-width: 150px;
column-width: 150px;
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Animal Collection</h1>
<p>Get a look at all the species!</p>
<div class="outer">
<div class="box">
<img src="http://www.owlsecurity.com.mx/wp-content/uploads/2018/02/buho.png" class="zoom centerImg">
<div class="ttl">OWL</div>
<div class="desc">
<div class="wrapper"> The owl is a very fascinating species that is nocturnal. It is considered as a predator</div>
</div>
</div>
<div class="box">
<img src="https://i.pinimg.com/originals/70/a1/58/70a1580630e2233978c0755f7215a3a2.png" class="zoom centerImg">
<div class="ttl">CAT</div>
<div class="desc"><div class="wrapper"> The cat or feline is a descendant of a lion. It can jump as high as 13 feet </div></div>
</div>
<div class="box">
<img src="https://s-media-cache-ak0.pinimg.com/originals/63/d7/3a/63d73ab34ef22437a2525e0e715f68c8.png" class="zoom centerImg">
<div class="ttl">TOUCAN</div>
<div class="desc"><div class="wrapper"> The Toucan is an exotic bird that comes from Brazil. It eats fruits and vegetables and is considered a herbivore.</div></div>
</div>
<div class="box">
<img src="https://s-media-cache-ak0.pinimg.com/originals/63/d7/3a/63d73ab34ef22437a2525e0e715f68c8.png" class="zoom centerImg">
<div class="ttl">TOUCAN</div>
<div class="desc"><div class="wrapper"> The Toucan is an exotic bird that comes from Brazil. It eats fruits and vegetables and is considered a herbivore.</div></div>
</div>
</div>
</body>
</html>
Was mache ich hier falsch? Bitte helfen Sie, hier ist die Geige: Geige
LÖSUNG: Hinzufügen von Flex-Wrap: Wrap; an die .outer-Klasse behebt das Problem
4 Antworten
Versuche dies:
.outer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
Beim Flex-Wrap wird der Inhalt in die übergeordnete Flexbreite des Displays eingeschlossen, wodurch die des Kindes verkleinert wird, um sie an die übergeordnete Breite anzupassen, sodass sie in eine Zeile passen.
flex-wrap: wrap
Der Inhalt wird genauso umbrochen wie der Zeilenumbruch. Wenn der Inhalt außerhalb des übergeordneten Bereichs fließt, werden sie in eine andere Zeile eingeschlossen.
Hier finden Sie die vollständige Anleitung zur Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-4 gibt Ihnen einen Überblick über alle Flexbox-Eigenschaften.
Ändern Sie flex-direction:row
in flex-flow: row wrap;
:
body{
background-color:grey;
}
.outer {
display: flex;
flex-flow:row wrap;
float:left;
}
.box {
color: white;
text-align: center;
font-family: 'Courier New';
background-color: skyblue;
width: 180px;
height: 200px;
margin: 10px;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out, transform .2s;
}
.box:hover {
background-color: #4aa8ea;
}
.zoom {
display: flex;
flex-direction: column;
text-align: center;
width: 50%;
height: 50%;
transition: transform 2s, filter 2s;
margin: 10px;
}
.box:hover .zoom {
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
-ms-transform: scale(1.1);
/* IE 9 */
-webkit-transform: scale(1.1);
/* Safari 3-8 */
transform: scale(1.1);
}
.centerImg {
display: block;
margin-left: auto;
margin-right: auto;
}
.ttl {
background-color: black;
font-weight: bold;
font-family:monospace;
font-size:20px;
}
.desc {
color: black;
width: 100%;
height: 30%;
box-sizing: border-box;
word-wrap: break-word;
font-size:10px;
padding:10px;
overflow:hidden;
background-color:white;
}
.wrapper {
-webkit-column-width: 150px;
column-width: 150px;
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Animal Collection</h1>
<p>Get a look at all the species!</p>
<div class="outer">
<div class="box">
<img src="http://www.owlsecurity.com.mx/wp-content/uploads/2018/02/buho.png" class="zoom centerImg">
<div class="ttl">OWL</div>
<div class="desc">
<div class="wrapper"> The owl is a very fascinating species that is nocturnal. It is considered as a predator</div>
</div>
</div>
<div class="box">
<img src="https://i.pinimg.com/originals/70/a1/58/70a1580630e2233978c0755f7215a3a2.png" class="zoom centerImg">
<div class="ttl">CAT</div>
<div class="desc"><div class="wrapper"> The cat or feline is a descendant of a lion. It can jump as high as 13 feet </div></div>
</div>
<div class="box">
<img src="https://s-media-cache-ak0.pinimg.com/originals/63/d7/3a/63d73ab34ef22437a2525e0e715f68c8.png" class="zoom centerImg">
<div class="ttl">TOUCAN</div>
<div class="desc"><div class="wrapper"> The Toucan is an exotic bird that comes from Brazil. It eats fruits and vegetables and is considered a herbivore.</div></div>
</div>
<div class="box">
<img src="https://s-media-cache-ak0.pinimg.com/originals/63/d7/3a/63d73ab34ef22437a2525e0e715f68c8.png" class="zoom centerImg">
<div class="ttl">TOUCAN</div>
<div class="desc"><div class="wrapper"> The Toucan is an exotic bird that comes from Brazil. It eats fruits and vegetables and is considered a herbivore.</div></div>
</div>
</div>
</body>
</html>
JSFiddle aktualisiert:
https://jsfiddle.net/s479vovz/145/
HTML:
<h1>Animal Collection</h1>
<p>Get a look at all the species!</p>
<div class="outer">
<div style="width:25%;margin-right:1%;">
<div class="box">
<img src="http://www.owlsecurity.com.mx/wp-content/uploads/2018/02/buho.png" class="zoom centerImg">
<div class="ttl">OWL</div>
<div class="desc">
<div class="wrapper"> The owl is a very fascinating species that is nocturnal. It is considered as a predator</div>
</div>
</div>
</div>
<div style="width:23%;margin-right:1%;">
<div class="box">
<img src="https://i.pinimg.com/originals/70/a1/58/70a1580630e2233978c0755f7215a3a2.png" class="zoom centerImg">
<div class="ttl">CAT</div>
<div class="desc"><div class="wrapper"> The cat or feline is a descendant of a lion. It can jump as high as 13 feet </div></div>
</div>
</div>
<div style="width:23%;margin-right:1%;">
<div class="box">
<img src="https://s-media-cache-ak0.pinimg.com/originals/63/d7/3a/63d73ab34ef22437a2525e0e715f68c8.png" class="zoom centerImg">
<div class="ttl">TOUCAN</div>
<div class="desc"><div class="wrapper"> The Toucan is an exotic bird that comes from Brazil. It eats fruits and vegetables and is considered a herbivore.</div></div>
</div>
</div>
<div style="width:23%;margin-right:1%;">
<div class="box">
<img src="https://s-media-cache-ak0.pinimg.com/originals/63/d7/3a/63d73ab34ef22437a2525e0e715f68c8.png" class="zoom centerImg">
<div class="ttl">TOUCAN</div>
<div class="desc"><div class="wrapper"> The Toucan is an exotic bird that comes from Brazil. It eats fruits and vegetables and is considered a herbivore.</div></div>
</div>
</div>
<div style="width:23%;margin-right:1%;">
<div class="box">
<img src="https://s-media-cache-ak0.pinimg.com/originals/63/d7/3a/63d73ab34ef22437a2525e0e715f68c8.png" class="zoom centerImg">
<div class="ttl">TOUCAN</div>
<div class="desc"><div class="wrapper"> The Toucan is an exotic bird that comes from Brazil. It eats fruits and vegetables and is considered a herbivore.</div></div>
</div>
</div>
</div>
CSS:
body{
background-color:grey;
}
div {
display: block;
}
.outer {
display: flex;
flex-flow: row wrap;
float:left;
width: 100%;
}
.box {
color: white;
text-align: center;
font-family: 'Courier New';
background-color: skyblue;
/* width: 180px; */
height: 250px;
margin: 10px;
-webkit-transition: background-color 1s ease-out;
-moz-transition: background-color 1s ease-out;
-o-transition: background-color 1s ease-out;
transition: background-color 1s ease-out, transform .2s;
}
.box:hover {
background-color: #4aa8ea;
}
.zoom {
display: flex;
flex-direction: column;
text-align: center;
width: 50%;
height: 50%;
transition: transform 1s, filter 1s;
margin: 10px;
}
.box:hover .zoom {
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
-ms-transform: scale(1.1);
/* IE 9 */
-webkit-transform: scale(1.1);
/* Safari 3-8 */
transform: scale(1.1);
}
.centerImg {
display: block;
margin-left: auto;
margin-right: auto;
width: 77px;
height: 100px;
padding: 13px;
}
.ttl {
background-color: black;
font-weight: bold;
font-family:monospace;
font-size:20px;
}
.desc {
color: black;
width: 100%;
height: 30%;
box-sizing: border-box;
word-wrap: break-word;
font-size:10px;
padding:10px;
overflow:hidden;
background-color:white;
}
.wrapper {
-webkit-column-width: 150px;
column-width: 150px;
height: 100%;
}
Verwandte Fragen
Neue Fragen
html
HTML (HyperText Markup Language) ist die Auszeichnungssprache zum Erstellen von Webseiten und anderen Informationen, die in einem Webbrowser angezeigt werden sollen. Fragen zu HTML sollten ein minimal reproduzierbares Beispiel und eine Vorstellung davon enthalten, was Sie erreichen möchten. Dieses Tag wird selten alleine verwendet und häufig mit [CSS] und [Javascript] gepaart.