Для начала нужно вставить 3 карточки в разметку вместо одной.
Потом уточнить, у них должна быть одинаковая ширина или высота.
Потому что с одной стороны вы задаете flex-direction: column;, а с другой, не указываете высоту обертки и запретили flex-grow элементам.
В итоге:
Если речь про три в ряд: то нужно убрать про column.
Если про три в столбик, то проще перейти на гриды и единицы fr.
Разметка - смысл.
Украшения - стили.
Если вы посмотрите на страницу без стилей, вам всё будет понятно? Ничего лишнего не будет?
Вот и вся логика.
Если картинка контентная, например, изображение конкретного товара в интернет магазине, то это img.
Если это украшение, то в стили. Например, иконки соц.сетей это украшения ссылок. Картинка ставится фоном и/или псевдоэлементом, а внутрь ссылки добавляется спан с классом visually-hidden (гуглится по "паттерн visually-hidden") и поясняющим текстом типа "наша группа в ВК".
Ответом считается то, что может помочь вам или другому страждущему решить аналогичную проблему.
Разумно отметить этот ответ и еще дописать свой и тоже отметить решением.
1. Зачем?
2. Если грид может так разложить элементы сложенные в одну обертку, то флекс так не умеет.
Вам нужно создать дополнительные обертки.
3. Если сложности останутся, то выложить код на codepen.io и описать что именно не выходит.
Я, конечно, не вижу макета, но очень вряд ли эти картинки являются контентными.
А значит, должны быть сделаны стилями (с помощью background и/или псевдоэлементов).
И просто меняете этот фон с помощью селекторов.
Если изображения должны быть вставлены через CMS, то прописываете пути к ним не в src тега img, а в атрибут style родительской ссылки как кастомное свойство.
jsfiddle в России не работает.
Т.е. помочь вам могут либо находящиеся не в России либо те, кому не лень включать VPN.
Если вас устраивает такая "аудитория", то можете продолжать с jsfiddle.
Иван Куликов, ко всему вышесказанному: и вместо таблицы (<table>) тоже сотворите грид. Таблицами сетку делали только в начале века.
Сейчас их используют только для верстки табличных данных.
Сначала нужно убедиться в том, что вам действительно нужны отдельные псевдоэлементы, а не, например, множественные фоны.
Если всё таки нужны именно они, то да, придется городить лишние элементы.
Хотелось бы знать, как bg связан с выравниванием текста внутри кнопки...
Впрочем вопросов на самом деле больше.
Например, зачем для каждой кнопки по два селектора, когда достаточно одного?
Какая вообще разметка?
И почему это кнопки, а не ссылки?
Но черт с ними с вопросами.
Короче:
делаете две кнопки (вероятнее ссылки)
задаете каждой по два класса
в первом, одинаковом для обеих, пишете одинаковые свойства
во втором, классе-модификаторе, разном для разного вида кнопок, пишете отличающиеся свойства типа цветов.
Для начала нужно вставить 3 карточки в разметку вместо одной.
Потом уточнить, у них должна быть одинаковая ширина или высота.
Потому что с одной стороны вы задаете
flex-direction: column;, а с другой, не указываете высоту обертки и запретили flex-grow элементам.В итоге:
Если речь про три в ряд: то нужно убрать про column.
Если про три в столбик, то проще перейти на гриды и единицы fr.