MAM TO ! LUDZIE BOOSTRAP I KOLUMNY TO LIPA ! Flex box to przyszłość
A tak na serio to osiągnąłem to co chciałem po takich zmianach.
.
.container {
width: 100%;
max-width: 1000px;
display:flex;
margin: 0 auto;
flex-wrap: wrap;
align-content:center;
align-items: center;
.box{
align-self: center;
width:100%;
min-width: 210px;
flex-grow: 1;
flex-basis: 25%;
padding: 1%;
img{
margin: 0;
padding: 0;
width:100%;
min-width: 180px;
}
}
<section class="portfolio">
<h1>Portfolio</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, in est voluptatibus.</p>
<div class="container">
<div class="box"><img src="images/1.jpg" alt="MyWork Here"></div>
<div class="box"><img src="images/2.jpg" alt="MyWork Here"></div>
<div class="box"><img src="images/singolo_15.jpg" alt="MyWork Here"></div>
<div class="box"><img src="images/singolo_21.jpg" alt="MyWork Here"></div>
<div class="box"><img src="images/singolo_27.jpg" alt="MyWork Here"></div>
<div class="box"><img src="images/singolo_29.jpg" alt="MyWork Here"></div>
<div class="box"><img src="images/singolo_30.jpg" alt="MyWork Here"></div>
<div class="box"><img src="images/singolo_32.jpg" alt="MyWork Here"></div>
<div class="box"><img src="images/singolo_38.jpg" alt="MyWork Here"></div>
<div class="box"><img src="images/singolo_40.jpg" alt="MyWork Here"></div>
<div class="box"><img src="images/singolo_42.jpg" alt="MyWork Here"></div>
<div class="box"><img src="images/singolo_44.jpg" alt="MyWork Here"></div>
</div>
http://scr.hu/6hqa/cxb9o i tak wyszło .
Dla przyszłych pokoleń
https://www.youtube.com/watch?v=Y8zMYaD1bz0
. ten gośc mi to wytłumaczył w 15 minut. Nawet nie musze nic robić w media queries. jest idealnie.
cheatsheet
https://css-tricks.com/snippets/css/a-guide-to-flexbox/