- Katılım
- 30 Kasım 2018
- Mesajlar
- 5.726
- Makaleler
- 2
- Çözümler
- 14
Merhabalar
display:flex yöntemini kullanarak divleri yan yana sıralayıp yan tarafta sığmayan divin alt tarafta gözükmesini istiyorum. Bu divler içeriği farklı olduğu için yükseklik değeri aynı olamayacağı için align-items:flex-start yaptım. Flex-direction ve Flex wrap kullandığım zaman 2 div yan yana sıralanıyor ve alt boşluk çok yüksek oluyor nasıl düzeltebilirim?
HTML:
<section class="branch-area">
<div class="branch-container">
<div class="branch">
<div class="branch-title">A</div>
<ul class="branch-category-list">
<li class="branchListFor"><a class="edit">Ağız ve Diş Sağlığı</a></li>
<li class="branchListFor"><a class="edit">Algoloji</a></li>
<li class="branchListFor"><a class="edit">Anestezi ve Reanimasyon</a></li>
<li class="branchListFor"><a class="edit">Acil Servis</a></li>
<li class="branchListFor"><a class="edit">Aile Hekimliği</a></li>
<li class="branchListFor"><a class="edit">Alerji ve İmmünoloji</a></li>
</ul>
</div>
<div class="branch">
<div class="branch-title">B</div>
<ul class="branch-category-list">
<li class="branchListFor"><a class="edit">Beyin ve Sinir Cerrahisi (Nöroşirürji)</a></li>
<li class="branchListFor"><a class="edit">Beslenme ve Diyet</a></li>
<li class="branchListFor"><a class="edit">Biyokimya</a></li>
</ul>
</div>
<div class="branch">
<div class="branch-title">Ç</div>
<ul class="branch-category-list">
<li class="branchListFor"><a class="edit">Çocuk Sağlığı ve Hastalıkları</a></li>
<li class="branchListFor"><a class="edit">Çocuk Cerrahisi</a></li>
<li class="branchListFor"><a class="edit">Çocuk Kardiyolojisi</a></li>
<li class="branchListFor"><a class="edit">Çocuk Nörolojisi</a></li>
<li class="branchListFor"><a class="edit">Çocuk ve Ergen Psikiyatrisi</a></li>
<li class="branchListFor"><a class="edit">Çocuk Hematolojisi</a></li>
<li class="branchListFor"><a class="edit">Çocuk Nefrolojisi</a></li>
<li class="branchListFor"><a class="edit">Çocuk İmmünoloji ve Alerji</a></li>
<li class="branchListFor"><a class="edit">Çocuk Enfeksiyon Hastalıkları</a></li>
<li class="branchListFor"><a class="edit">Çocuk Onkolojisi</a></li>
<li class="branchListFor"><a class="edit">Çocuk Ürolojisi</a></li>
<li class="branchListFor"><a class="edit">Çocuk Gastroenteroloji, Hepatoloji ve Beslenme</a></li>
<li class="branchListFor"><a class="edit">Çocuk Endokrinolojisi</a></li>
<li class="branchListFor"><a class="edit">Çocuk Romatolojisi</a></li>
</ul>
</div>
<div class="branch">
<div class="branch-title">D</div>
<ul class="branch-category-list">
<li class="branchListFor"><a class="edit">Dermatoloji (Cildiye)</a></li>
</ul>
</div>
</div>
</section>
CSS:
.branch-area
{
width: 100%;
height: 2300px;
background-color: #FFB469;
}
.branch-container
{
width: 1300px;
height: 2200px;
position: relative;
top: 20px;
left: 25px;
background-color: #fff;
display: flex;
align-items: flex-start;
flex-direction: row;
flex-wrap: wrap;
}
.branch
{
width: 370px;
min-width: 370px;
text-align: center;
line-height: 46px;
margin: 32px;
}
.branch-title
{
width: 100%;
height: 50px;
text-align: center;
line-height: 50px;
border: 2px solid #ededed;
font-family: 'Source Sans Pro', sans-serif;
font-size: 28px;
font-weight: 600;
}
.branch-category-list
{
list-style-type: none;
}
.branchListFor
{
width: 100%;
background-color: darkorange;
border-bottom: 1px solid #d5d5d5;
margin-top: 5px;
height: 30px;
}
.branchListFor:first-child
{
border-top: 1px solid #d5d5d5;
}
.edit
{
padding-left: 15px;
position: relative;
top: -31%;
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
font-weight: 400;
}