Вопрос по html, jquery, css, javascript, flexbox – Если это может быть динамическое количество элементов, например 3-5, до тех пор, пока мы не используем меньше, чем на 1 меньше, чем максимальное количество, это будет работать нормально.

4

отаю над галереей изображений на старом сайте. Я не могу использовать ничего, кроме обычного старого HTML / jQuery или JS / CSS. Я знаю, что это будет намного проще с Bootstrap или какой-нибудь сеткой.

Я строю это с flexbox. В каждом ряду четыре изображения, с несколькими рядами. Это выглядит великолепно, когда в каждом ряду есть четыре изображения. Когда у него 2 или 3, потому что я используюjustify-content: space-betweenЭто выглядит странно из-за большого разрыва между изображениями.

Причина я используюspace-between заключается в том, что я хочу, чтобы изображения были выровнены слева от родительского контейнера, а также справа.

Некоторые заметки:

Максимальная ширина каждого гибкого элемента составляет 150 пикселейЯ хочу поле между элементами, но мне все равно, изменяется ли это поле при изменении ширины области просмотрамаксимальная ширина гибкого контейнера позволяет размещать только четыре элемента шириной 150 пикселей

Мой вопрос: если в строке меньше набора элементов (в данном случае четыре), могу ли я изменитьjustify-content чтобы быть чем-то более подходящим, какflex-start?

В идеале я хочу сделать это без JavaScript / jQuery, но если это невозможно, я также открыт для этих решений.

Кроме того, не стесняйтесь, дайте мне знать, если я слишком обдумываю это и даже не нужно использоватьjustify-content: space-between, Вот рабочий пример:

/* outer container */
.flex-container {
  padding: 24px 0;
  background: white;
  border: solid 1px rgba(0,0,0,.1);
  max-width: 700px; /* or whatever */
  
  /* flex props */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* contains img block and title */
.thumb-grid {
  border: solid 1px rgba(0,0,0,.1);
  width: 150px;
  margin-bottom: 36px;
}

.thumb-grid:first-of-type { margin-left: 0; }
.thumb-grid:nth-of-type(4) { margin-right: 0; }

.thumb-grid p {
  text-align: center;
}

.img-block {
  background: black;
  height: 150px;
}

.img-block img {
  height: 150px;
  opacity: 1;
  transition: opacity 150ms;
}

.img-block:hover img {
  opacity: .9;
}
<div class="flex-container">
    
    <div class="thumb-grid">      
      <div class="img-block">        
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 1</p>      
    </div>
    
    <div class="thumb-grid">      
      <div class="img-block">        
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 2</p>      
    </div>
    
   <div class="thumb-grid">      
      <div class="img-block">        
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 3</p>      
    </div>
    
    <div class="thumb-grid">
      <div class="img-block">       
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 4</p>      
    </div>
    
    <div class="thumb-grid">      
      <div class="img-block">        
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 5</p>      
    </div>
    
    <div class="thumb-grid">      
      <div class="img-block">        
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 6</p>      
    </div>
    
   <div class="thumb-grid">      
      <div class="img-block">
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 7</p>      
    </div>
    
  </div>

@TylerH Это просто излишество для того, что мне нужно. Это одна страница примерно 50+ на сайте. kauffee000
Этот ответ кажется, чтобы решить проблему. cjl750
Если вы можете использовать JavaScript / jQuery, почему вы не можете использовать Bootstrap или другую библиотеку? TylerH
Возможный дубликатFlex-box: выровнять последний ряд по сетке cjl750
Я обновил свой вопрос. Меня не волнует размер полей, но я действительно хочу поля. kauffee000

Ваш Ответ

4   ответа
1

аже не будет существовать тогда. Вам не понадобятся какие-либо обходные пути или хаки, JavaScript или другие странные вещи, чтобы заставить его работать. С помощью CSS-макета вы легко добьетесь того, что вам нужно, с элегантным и понятным кодом.

Разметка CSS-сетки - это своего рода новая функция CSS, и на самом деле это первый законный способ создания разметки, который потрясающий. Читайте об этом:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layouthttps://css-tricks.com/snippets/css/complete-guide-grid/

Для вашего случая, особенно взгляните наauto-fill или жеauto-fit свойства. Вот еще одна полезная ссылка:https://gridbyexample.com/examples/example37/.

А вот краткий пример того, чего вы хотите достичь с помощью сетки CSS:https://codepen.io/anon/pen/YxbexQ?editors=1100, Посмотрите, как он реагирует на различную ширину экрана / контейнера. Это просто работает.

Flexbox isn't really created for layout. Это просто неправильно. Flexbox - это буквально модуль макета. TylerH
Нет. Flexbox является просто одномерным, а Css - двумерным. Макет двухмерный. ;] kamyl
Хорошо, я отредактировал ответ. Тем не менее, решение остается тем же, поскольку этот вариант использования представляет собой 2-мерное расположение. kamyl
Пожалуйста, смотритеназвание модуля: w3.org/TR/css-flexbox-1 "CSS Flexible Boxраскладка Модуль Уровень 1 "Акцент мой" TylerH
3

что вам нужно поддерживать, может иметь смысл использовать CSS-макеты сетки (как указал TylerH, CSS-гриды не имеют универсальной поддержки браузера). Проверьте документацию для получения дополнительной информации:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

.flex-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
<div class="flex-container">
    
    <div class="thumb-grid">      
      <div class="img-block">        
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 1</p>      
    </div>
    
    <div class="thumb-grid">      
      <div class="img-block">        
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 2</p>      
    </div>
    
   <div class="thumb-grid">      
      <div class="img-block">        
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 3</p>      
    </div>
    
    <div class="thumb-grid">
      <div class="img-block">       
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 4</p>      
    </div>
    
    <div class="thumb-grid">      
      <div class="img-block">        
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 5</p>      
    </div>
    
    <div class="thumb-grid">      
      <div class="img-block">        
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 6</p>      
    </div>
    
   <div class="thumb-grid">      
      <div class="img-block">
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 7</p>      
    </div>
    
  </div>

@ kauffee000 Помните, что Microsoft Edge еще не полностью поддерживает макет сетки (хотя через месяц или два). Кроме того, IE не поддерживает эту реализацию компоновки сетки, но IE11 поддерживает более старую (другую) реализацию. Просто предупреждение для производственных сред. TylerH
Это на самом деле работает очень хорошо для меня, но я должен был добавить свои желоба. Я должен буду поработать над отзывчивостью, но это только начало. Спасибо!рабочая корзина kauffee000
Спасибо за примечание @TylerH, обновил мой ответ, чтобы отразить неуниверсальную поддержку Rob M.
Это интересно. Я посмотрю, увижу ли это то, что мне нужно. Я никогда не использовал это. kauffee000
1

margin вместоjustify-content:space-between получить расстояние?

/* outer container */
.flex-container {
  padding: 24px 0;
  background: white;
  border: solid 1px rgba(0,0,0,.1);
  max-width: 700px; /* or whatever */
  
  /* flex props */
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
}

/* contains img block and title */
.thumb-grid {
  border: solid 1px rgba(0,0,0,.1);
  width: 150px;
  margin: 0 12px 36px;
}

.thumb-grid:first-of-type { margin-left: 0; }
.thumb-grid:nth-of-type(4) { margin-right: 0; }

.thumb-grid p {
  text-align: center;
}

.img-block {
  background: black;
  height: 150px;
}

.img-block img {
  height: 150px;
  opacity: 1;
  transition: opacity 150ms;
}

.img-block:hover img {
  opacity: .9;
}
<div class="flex-container">
    
    <div class="thumb-grid">      
      <div class="img-block">        
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 1</p>      
    </div>
    
    <div class="thumb-grid">      
      <div class="img-block">        
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 2</p>      
    </div>
    
   <div class="thumb-grid">      
      <div class="img-block">        
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 3</p>      
    </div>
    
    <div class="thumb-grid">
      <div class="img-block">       
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 4</p>      
    </div>
    
    <div class="thumb-grid">      
      <div class="img-block">        
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 5</p>      
    </div>
    
    <div class="thumb-grid">      
      <div class="img-block">        
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 6</p>      
    </div>
    
   <div class="thumb-grid">      
      <div class="img-block">
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 7</p>      
    </div>
    
  </div>

ОП упоминает, что они хотят, чтобы незаполненные строки были выровнены по левому и правому краям, а не по центруThe reason I'm using space-between is that I want the images to align to the left of the parent container, and also to the right. TylerH
1

которое вы можете использовать с Flexbox, которое предоставит более широкое кросс-браузерное решение, чем CSS Grid (сегодня).

Основная хитрость заключается в том, чтобы иметьпризрак элементов, на 1 меньше, чем количество элементов в строке.

Они занимают то же горизонтальное пространство, что и обычный элемент, но не имеют высоты, и поэтому толкают любое число меньше 4 влево.

Поскольку мы можем использовать псевдоэлементы, в этом случае нам нужен только 1 дополнительный элемент, действующий какпризрак

Фрагмент стека

/* outer container */
.flex-container {
  padding: 24px 0;
  background: white;
  border: solid 1px rgba(0,0,0,.1);
  max-width: 700px; /* or whatever */
  
  /* flex props */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* contains img block and title */
.thumb-grid {
  border: solid 1px rgba(0,0,0,.1);
  width: 150px;
  margin-bottom: 36px;
}

.thumb-grid:empty,               /*  the ghost elements  */
.flex-container::before,
.flex-container::after {
  content: '';
  border: solid 1px rgba(0,0,0,0);
  width: 150px;
  margin-bottom: 36px;
  order: 1;
}

.thumb-grid:first-of-type { margin-left: 0; }
.thumb-grid:nth-of-type(4) { margin-right: 0; }

.thumb-grid p {
  text-align: center;
}

.img-block {
  background: black;
  height: 150px;
}

.img-block img {
  height: 150px;
  opacity: 1;
  transition: opacity 150ms;
}

.img-block:hover img {
  opacity: .9;
}
<div class="flex-container">
    
    <div class="thumb-grid">      
      <div class="img-block">        
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 1</p>      
    </div>
    
    <div class="thumb-grid">      
      <div class="img-block">        
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 2</p>      
    </div>
    
   <div class="thumb-grid">      
      <div class="img-block">        
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 3</p>      
    </div>
    
    <div class="thumb-grid">
      <div class="img-block">       
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 4</p>      
    </div>
    
    <div class="thumb-grid">      
      <div class="img-block">        
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 5</p>      
    </div>
    
    <div class="thumb-grid">      
      <div class="img-block">        
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 6</p>      
    </div>
    
   <div class="thumb-grid">      
      <div class="img-block">
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 7</p>      
    </div>


   <div class="thumb-grid"></div>

  </div>

Если в строке максимум 3 элемента, нам нужны только псевдоэлементы

/* outer container */
.flex-container {
  padding: 24px 0;
  background: white;
  border: solid 1px rgba(0,0,0,.1);
  max-width: 550px; /* or whatever */
  
  /* flex props */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* contains img block and title */
.thumb-grid {
  border: solid 1px rgba(0,0,0,.1);
  width: 150px;
  margin-bottom: 36px;
}

.flex-container::before, .flex-container::after {
  content: '';
  border: solid 1px rgba(0,0,0,0);
  width: 150px;
  margin-bottom: 36px;
  order: 1;
}


.thumb-grid:first-of-type { margin-left: 0; }
.thumb-grid:nth-of-type(4) { margin-right: 0; }

.thumb-grid p {
  text-align: center;
}

.img-block {
  background: black;
  height: 150px;
}

.img-block img {
  height: 150px;
  opacity: 1;
  transition: opacity 150ms;
}

.img-block:hover img {
  opacity: .9;
}
<div class="flex-container">
    
    <div class="thumb-grid">      
      <div class="img-block">        
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 1</p>      
    </div>
    
    <div class="thumb-grid">      
      <div class="img-block">        
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 2</p>      
    </div>
    
   <div class="thumb-grid">      
      <div class="img-block">        
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 3</p>      
    </div>
    
    <div class="thumb-grid">
      <div class="img-block">       
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 4</p>      
    </div>
    
    <div class="thumb-grid">      
      <div class="img-block">        
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 5</p>      
    </div>    
    
  </div>

Если это может быть динамическое количество элементов, например 3-5, до тех пор, пока мы не используем меньше, чем на 1 меньше, чем максимальное количество, это будет работать нормально.

/* outer container */
.flex-container {
  padding: 24px 0;
  background: white;
  border: solid 1px rgba(0,0,0,.1);
  max-width: 850px; /* or whatever */
  
  /* flex props */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* contains img block and title */
.thumb-grid {
  border: solid 1px rgba(0,0,0,.1);
  width: 150px;
  margin-bottom: 36px;
}

.thumb-grid:empty,               /*  the ghost elements  */
.flex-container::before,
.flex-container::after {
  content: '';
  border: solid 1px rgba(0,0,0,0);
  width: 150px;
  margin-bottom: 36px;
  order: 1;
}

.thumb-grid:first-of-type { margin-left: 0; }
.thumb-grid:nth-of-type(4) { margin-right: 0; }

.thumb-grid p {
  text-align: center;
}

.img-block {
  background: black;
  height: 150px;
}

.img-block img {
  height: 150px;
  opacity: 1;
  transition: opacity 150ms;
}

.img-block:hover img {
  opacity: .9;
}
<div class="flex-container">
    
    <div class="thumb-grid">      
      <div class="img-block">        
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 1</p>      
    </div>
    
    <div class="thumb-grid">      
      <div class="img-block">        
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 2</p>      
    </div>
    
   <div class="thumb-grid">      
      <div class="img-block">        
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 3</p>      
    </div>
    
    <div class="thumb-grid">
      <div class="img-block">       
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 4</p>      
    </div>
    
    <div class="thumb-grid">      
      <div class="img-block">        
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 5</p>      
    </div>
    
    <div class="thumb-grid">      
      <div class="img-block">        
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 6</p>      
    </div>
    
   <div class="thumb-grid">      
      <div class="img-block">
        <a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>        
      </div>      
      <p>Image 7</p>      
    </div>


   <div class="thumb-grid"></div>
   <div class="thumb-grid"></div>

  </div>

Похожие вопросы