Как прижать элементы к краям родителя вертикально на flex-box

256

12 августа 2017, 01:22

.projects-wrapper{ 
     min-width: 250px; 
     max-width: 250px; 
     min-height: 250px; 
     display: flex; 
     justify-content: space-between; 
     align-items: center; 
     flex-wrap: wrap; 
     background: grey; 
} 
.project-item{ 
    min-width: 100px; 
    min-height: 50px; 
    background: red; 
}

<div class="colum projects-wrapper"> 
    <div class="project-item" style="background-image: url(css/img/projects/h_f_students_of_kpi.png)"></div> 
    <div class="project-item" style="background-image: url(css/img/projects/h_clubs_nagoruny.png)"></div> 
    <div class="project-item" style="background-image: url(css/img/projects/r_complex_campus.png)"></div> 
    <div class="project-item" style="background-image: url(css/img/projects/h_f_students_of_kpi2.png)"></div> 
</div>

Здравствуйте, у flex-box есть чудесное свойство justify-content: space-between;, которое прижимает элементы к краям горизонтально. Есть ли что-то подобное, когда надо прижать вертикально? или есть другой способ не flex-box?

Answer 1

align-content: space-between;

.projects-wrapper{ 
     min-width: 250px; 
     max-width: 250px; 
     min-height: 250px; 
     display: flex; 
     justify-content: space-between; 
     align-items: center; 
     flex-wrap: wrap; 
     background: grey;     
     align-content: space-between; 
} 
.project-item{ 
    min-width: 100px; 
    min-height: 50px; 
    background: red; 
}

<div class="colum projects-wrapper"> 
    <div class="project-item" style="background-image: url(css/img/projects/h_f_students_of_kpi.png)"></div> 
    <div class="project-item" style="background-image: url(css/img/projects/h_clubs_nagoruny.png)"></div> 
    <div class="project-item" style="background-image: url(css/img/projects/r_complex_campus.png)"></div> 
    <div class="project-item" style="background-image: url(css/img/projects/h_f_students_of_kpi2.png)"></div> 
</div>

Answer 2

Добавьте что вы хотите построить , row или column:

  flex-direction: column;
   justify-content: space-between;

Или если у вас row , и надо прижать верху то :

align-items: start;

Answer 3

Нет, во флексбоксе так нельзя, потому что у него есть всего одна ось, а вы хотите сделать двумерную раскладку. Для этого используется сетка (CSS Grid Layout).

Разверните на весь экран, сможете увидеть как эта раскладка работает на любом разрешении.

.projects-wrapper { 
  min-height: 100vh; 
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  grid-template-rows: repeat(2, 1fr); 
  grid-gap: 15px; 
  background: grey; 
} 
 
.project-item { 
  min-width: 100px; 
  min-height: 50px; 
  background: red; 
} 
 
.project-item--1, 
.project-item--2 { 
  align-self: start; 
} 
 
.project-item--3, 
.project-item--4 { 
  align-self: end; 
}

<div class="colum projects-wrapper"> 
  <div class="project-item project-item--1" style="background-image: url(css/img/projects/h_f_students_of_kpi.png)"></div> 
  <div class="project-item project-item--2" style="background-image: url(css/img/projects/h_clubs_nagoruny.png)"></div> 
  <div class="project-item project-item--3" style="background-image: url(css/img/projects/r_complex_campus.png)"></div> 
  <div class="project-item project-item--4" style="background-image: url(css/img/projects/h_f_students_of_kpi2.png)"></div> 
</div>

Что касается не-флексбокс решения: если имелось в виду, что это надо сделать каким-нибудь древним способом, то к ваши услугам абсолютное позиционирование :-)

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

получение адреса

Есть блоки:

193

HTML

Ломается меню при ctrl+f5

Ломается меню при нажатии ctrl+f5 (игнорировании кеширования) ломается меню, начинает красить по несколько sub элементовС чем это может быть связано,...

278

HTML