Переход на flexbox

2845

26 ноября 2016, 09:15

Делаю теги для сайта. Раньше использовал display: inline-block

Но нужно, чтобы выравнивание было не слева а по ширине. Такое можно сделать если использовать flexbox

.myclass {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

Но проблема в том, что последняя строка смотрится не красиво с выравниванием по ширине:

А если вместо justify-content: space-between использовать justify-content: flex-start, тогда уже не будет выравнивания по ширине при уменьшении разрешения:

Вопрос: Возможно ли в flexbox обратиться к последней строке? Мне нужно чтобы выравнивание было по ширине, а в последней строке по левой стороне. Решение может быть реализовано с помощью javascript

Все получилось благодаря ответу пользователя Vadim Ovchinnikov, за что ему большое спасибо. Вот как выглядит то что мне нужно было:

Answer 1

То же самое как и ответ @Qwertiy только без

div:after {
  content: "";
  display: inline-block;
  width: 100%;
}

div { 
  text-align: justify; 
} 
 
span { 
  display: inline-block; 
  border: 1px solid; 
  padding: .25em; 
  border-radius: .5em; 
  margin-top: .5em; 
}

<div> 
  <span>Assembler</span> 
  <span>C</span> 
  <span>C#</span> 
  <span>C++</span> 
  <span>CorelDraw</span> 
  <span>HTML & CSS</span> 
  <span>Java</span> 
  <span>JavaScript</span> 
  <span>Microsoft Office</span> 
  <span>Pascal</span> 
  <span>Photoshop</span> 
  <span>PHP</span> 
  <span>Sketch</span> 
  <span>SQL</span> 
  <span>База данных</span> 
  <span>Графика</span> 
</div>

Answer 2

div { 
  text-align: justify; 
} 
 
span { 
  display: inline-block; 
  border: 1px solid; 
  padding: .25em; 
  border-radius: .5em; 
  margin-top: .5em; 
} 
 
div:after { 
  content: ""; 
  display: inline-block; 
  width: 100%; 
}

<div> 
  <span>html</span> 
  <span>css</span> 
  <span>верстка</span> 
  <span>flexbox</span> 
  <span>html</span> 
  <span>css</span> 
  <span>верстка</span> 
  <span>flexbox</span> 
  <span>html</span> 
  <span>css</span> 
  <span>верстка</span> 
  <span>flexbox</span> 
  <span>html</span> 
  <span>css</span> 
  <span>верстка</span> 
  <span>flexbox</span><!-- no spaces here 
--></div>

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

Все вопросы

ТОП-10

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

div Блок имеет свой контент, но его высота 0

Доброго дня! Столкнулся с такой проблемойИмеется блок для слайдера, он имеет контент, но его высота все равно равна нулю, если не задать ее фиксированно,...

1403

javascript

Ожидание загрузки картинки [дубликат]

На данный вопрос уже ответили:

1446

javascript

Имя сохраняемой страницы php

Имеется код:

1397

javascript

не запускается скрипт

не получается запустить скрипт, нужен для автоматической вставки даты, при изменение данных в ячейке:

2337