CSS Bilder flexbox margin

Hallo Ich versuche Flex zu verwenden, um die zusätzliche verfügbare Breite der Div-Box als Marge zwischen den Bildern zu verteilen. Ich habe versucht, Flex Basis zu verwenden: 30%; Anstatt den Rand jedoch gleichmäßig auf die Bilder zu verteilen, stapelt er stattdessen die Bilder vertikal übereinander.CSS Bilder flexbox margin

.images-container{ 
 
\t max-width: 1400px; 
 
\t margin: 40px auto 0 auto; 
 
\t display: flex; 
 
\t background: #595959; 
 
\t justify-content: space-between; 
 
} 
 
.images{ 
 
\t /* flex-basis: 30%; <- Issue */ 
 
}

<!DOCTYPE html> 
 
    
 
    <head> 
 
    \t <link rel="stylesheet" type="text/css" href="test.css"> 
 
    \t <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> 
 
    </head> 
 
    <body> 
 
    \t <div class="images-container"> 
 
\t \t <div class="images"> 
 
\t \t \t <img src="https://i.vimeocdn.com/portrait/58832_300x300" alt="Maths"> 
 
\t \t \t <img src="https://i.vimeocdn.com/portrait/58832_300x300" alt="ComputerScience"> 
 
\t \t \t <img src="https://i.vimeocdn.com/portrait/58832_300x300" alt="Physics"> 
 
\t \t </div> 
 
\t </div> 
 
</body>

Quelle

2017-11-11 user7808079

justify-content: space-between macht genau das, was Sie versuchen zu tun. Es funktioniert nicht in Ihrem Code, weil Sie ein anderes Div um Ihre Bilder legen. Wenn Sie die div „Bilder“ entfernen, es funktioniert:

.images-container{ 
 
\t max-width: 1400px; 
 
\t margin: 40px auto 0 auto; 
 
\t display: flex; 
 
\t background: #595959; 
 
\t justify-content: space-between; 
 
} 
 
.images{ 
 

 
}

<!DOCTYPE html> 
 
    
 
    <head> 
 
    \t <link rel="stylesheet" type="text/css" href="test.css"> 
 
    \t <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> 
 
    </head> 
 
    <body> 
 
    \t <div class="images-container"> 
 
\t \t \t <img src="https://i.vimeocdn.com/portrait/58832_300x300" alt="Maths"> 
 
\t \t \t <img src="https://i.vimeocdn.com/portrait/58832_300x300" alt="ComputerScience"> 
 
\t \t \t <img src="https://i.vimeocdn.com/portrait/58832_300x300" alt="Physics"> 
 
\t </div> 
 
</body>

Wenn Sie die extra div behalten möchten, müssen Sie Ihre CSS ändern, so dass die Bilder div Ihr Flex Container ist:

.images-container{ 
     max-width: 1400px; 
     margin: 40px auto 0 auto; 
     background: #595959; 
    } 
    .images{ 
     display: flex; 
     justify-content: space-between; 
    }

Quelle

2017-11-11 23:46:24

Flex-Container .images-container nur ein untergeordnetes Element hat, das die .images DIV ist. Wenn Sie wollen, dass Flex die Bilder selbst beeinflusst, müssen Sie display: flex auf .images, nicht auf .images-container anwenden

Quelle

2017-11-11 23:46:02 Johannes

versuchen Sie dies:

img {width: 30%;height: 30%;}

Quelle

2017-11-11 23:50:55 ratmalwer

CSS Bilder flexbox margin

Antwort

Verwandte Themen