İki satırda görüntüleri flexbox ile hizalama

Sayfanın karşısına çıkan 6 kutulu bir flexbox oluşturmaya çalışıyorum. Ancak, bazı nedenlerden dolayı farklı boyutlarda olması gerektiği gibi davranmayacaktır.İki satırda görüntüleri flexbox ile hizalama

onlar böyle davranmasına gerekir:

/* ================================= 
 
     Base Styles 
 
    ==================================== */ 
 

 
body { 
 
    display: flex; 
 
    flex-direction: column; 
 
    min-height: 100vh; 
 
} 
 
.row { 
 
    flex: 1; 
 
} 
 
/* ================================= 
 
     Media Queries 
 
    ==================================== */ 
 

 
@media (min-width: 769px) { 
 
    .main-header, 
 
    .main-nav, 
 
    .row { 
 
    display: flex; 
 
    } 
 
    .main-header { 
 
    flex-direction: column; 
 
    align-items: center; 
 
    } 
 
    .col { 
 
    flex: 1 50%; 
 
    } 
 
    .row { 
 
    flex-wrap: wrap; 
 
    } 
 
    .item-2 { 
 
    order: -1; 
 
    } 
 
} 
 
@media (min-width: 1025px) { 
 
    .main-header { 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
    } 
 
    .col { 
 
    flex-basis: 0; 
 
    } 
 
    .item-1 { 
 
    flex-grow: 1.4; 
 
    } 
 
}

<div class="row"> 
 

 
    <div class="item-1 col"> 
 
    <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png"> 
 
    </div><!--/.primary--> 
 

 
    <div class="item-2 col"> 
 
    <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png"> 
 
    </div><!--/.secondary--> 
 

 
    <div class="item-3 col"> 
 
    <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png"> 
 
    </div><!--/.tertiary--> 
 

 
    <div class="item-4 col"> 
 
    <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png"> 
 
    </div><!--/.tertiary--> 
 

 
    <div class="item-5 col"> 
 
    <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png"> 
 
    </div><!--/.tertiary--> 
 

 
    <div class="item-6 col"> 
 
    <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png"> 
 
    </div><!--/.tertiary--> 
 

 
</div>

BURADA JSFIDDLE GEÇEBİLİRSİNİZ: https://jsfiddle.net/ju157mnj/2/

kaynak

2016-05-26 Kimberly Wright

"o ekranların küçük boyutlarda geldiğinde bir blok seviyesinde" Sen ne demek istiyorsunuz? Bağladığınız resim, resimlerin her zaman 2 satırda kalmasını istediğinizi gösterir. Bu doğru mu? – whipdancer

Resimleriniz oldukça muazzamdı ve medya sorgunuzda düzenleme yapmak biraz zordu. Ancak,, flex, ortam sorgularına gereksinim duymamanız için yeterince güçlüdür. Aşağıda, resimlerinizi nasıl sunabileceğinize dair iki örnek verilmiştir (bunları nasıl istediğinizden emin değildiniz).

sarar:

.row { 
    display: flex; 
    flex-wrap: wrap; 
} 

.col { 
    flex-grow: 1; 
    margin: 5px; 
    text-align: center; 
} 

.col img { 
    height: 60px; 
    width: 90px; 
}

Fiddle: https://jsfiddle.net/awvpezbt/

3 Başına Satır (hayır sarma):

.row { 
    display: flex; 
} 

.col { 
    flex-grow: 1; 
    margin: 5px; 
    text-align: center; 
} 

.col img { 
    height: 60px; 
    width: 90px; 
}

Fiddle: https://jsfiddle.net/awvpezbt/1/

kaynak

2016-05-26 13:24:47 theblindprophet

burada çalıştı ancak bazı nedenlerle kutular arasındaki boşluk iyi değil ve ekranda düzgün ortalanmış değil. Bakınız fiddle: https://jsfiddle.net/ju157mnj/5/ –

İşte ben http://prnt.sc/b8ogjp –

demek istediğim, aynı zamanda duyarlı değiller. Küçük boyutlardaki ekranlar söz konusu olduğunda blok seviyesinde olmalılar: http://prntscr.com/b8ohf5 –

.row { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
} 
 

 
.col { 
 
    flex: 0 0 calc(33.33% - 30px); /* flex-basis adjustment for margin */ 
 
    margin: 5px; 
 
} 
 

 
img { 
 
    width: 100%; 
 
}

<div class="row"> 
 

 
    <div class="item-1 col"> 
 
     <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png"> 
 
    </div><!--/.primary--> 
 

 
    <div class="item-2 col"> 
 
     <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png"> 
 
    </div><!--/.secondary--> 
 

 
    <div class="item-3 col"> 
 
     <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png"> 
 
    </div><!--/.tertiary--> 
 

 
    <div class="item-4 col"> 
 
     <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png"> 
 
    </div><!--/.tertiary--> 
 

 
    <div class="item-5 col"> 
 
     <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png"> 
 
    </div><!--/.tertiary--> 
 

 
    <div class="item-6 col"> 
 
     <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png"> 
 
    </div><!--/.tertiary--> 
 

 
</div>

Revised Fiddle

kaynak

2016-05-26 13:31:15

burada denedi ancak bazı nedenlerle kutular arasındaki boşluk iyi değil ve ekranda düzgün ortalanmış değil. Bakınız fiddle: https://jsfiddle.net/ju157mnj/5/ –

İşte demek istediğim: http://prnt.sc/b8ogjp –

ayrıca yanıt vermiyorlar. Küçük boyuttaki ekranlar söz konusu olduğunda blok seviyesinde olmalıdırlar: http://prntscr.com/b8ohf5 –

sizin css bu değişiklikleri yapılmış:

img { 
    max-width: 100%; //Keeps the img in its container 
} 
.col { 
    padding: 0 1em; 
    flex: 1; 
    min-width: 200px; 
} 
.row { 
    flex: 1; 
    display: flex; 
    flex-wrap: wrap; 
}

https://jsfiddle.net/v2tuoojd/

kaynak

2016-05-26 13:37:04 wdickerson

burada denedi ancak bazı nedenlerle kutular arasındaki boşluk iyi değil ve ekranda düzgün ortalanmış değil. Bakınız fiddle: https: // jsfiddle.net/ju157mnj/5/ –

da yanıt vermiyorlar. Küçük boyutlardaki ekranlarda blok seviyesinde olmalılar: http://prntscr.com/b8ohf5 –

İki satırda görüntüleri flexbox ile hizalama

cevap

İlgili konular