2017-11-11 7 views
0

こんにちは、フレックスを使ってdivボックスの余分な幅をイメージ間のマージンとして均等に分配しようとしています。私はフレックスベースを使用してみました:30%;画像にマージンを均等に分配する代わりに、画像を互いの上に垂直に積み重ねる。CSS imagesフレックスボックスマージン

.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>

答えて

2

justify-content: space-betweenあなたがしようとしていることを正確に行います。あなたのイメージの周りに別のdivを置くので、あなたのコードでは動作しません。あなたはdivの「画像」を削除した場合、それが動作します:

.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>

あなたは余分なdiv要素を維持したい場合は、画像のdivがあなたのフレックスコンテナであるように、あなたのCSSを変更する必要があります。

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

.images DIVあるのみONE子要素を持っている.images-containerあなたのフレックスコンテナ。

フレックスで画像自体に影響を与えたい場合は、.images-containerではなくを.imagesに適用する必要があります。

0

これを試してみてください。

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