Intereting Posts
Является ли CSS ошибкой? Как открыть скрытый div, когда хеш находится в URL-адресе? Макет с фиксированным верхним и нижним колонтитулом, боковой панель с фиксированной шириной и гибким контентом Как вручную запускать событие click в ReactJS? Как получить UnderlineSpan с другим цветом в Android? Как отправить объект JSON с использованием данных формы html Устранение утечки памяти из дерева DOM Как создать шаблон для композитного представления Динамически Таймер обратного отсчета, построенный на PHP и jQuery? R markdown html (tabular ()) Вывод управляющих символов и таблиц разбивки Функция запуска после завершения одной функции – JQuery animate Как обновить / обновить элементы MDL Google, которые я добавляю на свою страницу динамически? CSS – Несколько текстовых украшений со стилем и цветом Какие версии IE поддерживаются загрузкой? Ошибка: не удается найти управление с помощью пути: «x» угловой 2

Несогласованный запас между элементами гибкости в последней строке

Я использую flex . Кажется, что существует неожиданная разница в разнице между двумя элементами div третья строка имеет разницу между разделителями, чем первые две строки:

введите описание изображения здесь

Как изменить код так, чтобы край третьей строки был таким же, как первые две строки?

 .container { display: flex; flex-wrap: wrap; justify-content: space-between; } .container:after { flex: 1; content: ''; } .container form { width: 100%; display: flex; } .container .comment { flex: 1; } .square { padding: 10px; width: calc(100% / 9); margin: 0.7vw 0 0.7% 1vw; background: red; } 
 

JsFiddle: https://jsfiddle.net/4ydyoqmx/

Существует несколько различных способов сделать это, в зависимости от того, как вы хотите, чтобы «квадраты» отвечали:

flex-grow :

 .square { flex-grow: 1; padding: 10px; width: calc(100% / 9); margin: 0.7vw 0 0.7% 1vw; background: red; } 

Скрипт: https://jsfiddle.net/4ydyoqmx/2/

inline-block :

 .square { display: inline-block; padding: 10px; width: calc(100% / 9); margin: 0.7vw 0 0.7% 1vw; background: red; } 

Скрипт: https://jsfiddle.net/4ydyoqmx/4/

Третий вариант:

Удалено content: '' из .container:after как это вызывало проблемы

Проблема в том, что ваш псевдоэлемент потребляет все доступное пространство в последней строке.

введите описание изображения здесь

Да, это делается для нейтрализации эффекта justify-content: space-between двумя элементами flex, что заставляет их появляться на противоположных концах …

введите описание изображения здесь

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

Пока спецификация Flex не будет изменена с использованием свойств выравнивания последней строки, вы можете реализовать хак, который решает эту проблему:

Добавьте невидимые элементы гибкости после последнего реального элемента.

В приведенном ниже примере я добавил семь фантомных элементов в ваш код.

 .container { display: flex; flex-wrap: wrap; justify-content: space-between; } /* .container:after { flex: 1; content: ''; } */ .invisible { visibility: hidden; } .container form { width: 100%; display: flex; } .container .comment { flex: 1; } .square { padding: 10px; width: calc(100% / 9); margin: 0.7vw 0 0.7% 1vw; background: red; } 
 

Это параметр justify-content: space-between на .container который делает это (в сочетании с flex-wrap: wrap; ): он регулярно распределяет элементы в тех строках, которые заполнены, но в последней строке, которая не выглядела бы хорошо , поэтому он оставляет предопределенное / по умолчанию поле между этими элементами. (Это похоже на оправданный текстовый абзац)

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

https://jsfiddle.net/h8ejaob7/

Это делается так, потому что вы оправдываете контент, используя пробел между ними. Таким образом, на экране он не может разместить 7-й div, поэтому он помещает только 6 div на экран и помещает равное пространство между 6 элементами div. Но в последней строке есть только 2 div, так что ваша 3-я строка не будет полностью заполнена элементами div , Вот почему он не кладет пространство, как на верхних строках div.

Если вы добавите еще 4 div, вы получите точный эффект, как на верхней строке.

Эта проблема может быть решена путем добавления этого fragmentа кода в ваш css.

 *{margin:0px; padding:0px} 

Надеюсь, что это работает..