Development
How to use Flexbox to create a modern CSS card design layout
Thanks to Flexbox, a new layout mode in CSS3, we can get all of our cards in a row—literally. Card designs have grown in popularity over the past few years; as you’ve probably noticed, social media sites have really embraced cards. Pinterest and Dribbble use card layouts to feature information and visuals. And if you’re into Material Design, Google’s cards are well described in their pattern library.
I personally like card layouts for their readability and how scrollable they are. They present the perfect “burst” of information in a way that is easy to browse, scroll, and scan all at once.
How to create a card layout
If you’ve ever attempted rows of even-height content, you know that building them hasn’t always been easy. You’ve probably had to do quite a bit of fiddling to get it to work in the past. Thanks to Flexbox, those days are pretty much behind you. Depending on the level of browser support you need to provide, you may have to include some fallbacks, but browser support for this feature is pretty reliable these days. To be safe, be sure to check out Flexbox on the trusty Can I use. And remember, you should never make changes on your live site. Try experimenting with Local instead, a free local WordPress development app.
The basic idea of Flexbox is that you can set a container’s display property to flex, which will “flex” the size of all the containers within it. Equal-height columns and the scaling and contracting options will simplify how advanced layouts can be created. Starting with cards is like a Flexbox cheat sheet, but once you master the basics, you can create more complex layouts.
Flexbox and versatility
Cards are versatile, visually appealing, and easy to interact with on both large and small devices, which is perfect for responsive design. Each card acts as a content container that easily scales up or down. As screen sizes get smaller, they number of cards in the row typically decreases and they start to stack vertically. There is additional flexibility as they can be a fixed or variable height.
How to create the layout
We will create a Flexbox card layout that has a row of four horizontal containers on larger screens, two on medium, and single column for small devices.
Below is the code snippet to create a basic layout for showing four cards. I’m not including the inner card content (as that gets too long in the code samples), so be sure to put some starter content in there (and have the amount of content vary between the four cards). Also, there is one row of four cards shown here to start, but more can be added if you want to see behavior with multiple rows of content. All code can be found on Codepen.
To display our layout design in a grid pattern, we’ll need to start on the outside and work our way in. It’s important to make sure you reference the correct container, otherwise things will get a little messy.
The section with a class of .cards is what we will target first. The display property of the container is what we need to change to flex.
Here is the HTML you’ll want to start with:
<div class="centered">
<section class="cards">
<article class="card">
<p>content for card one</p>
</article><!-- /card-one -->
<article class="card">
<p>content for card two</p>
</article><!-- /card-two -->
<article class="card">
<p>content for card three</p>
</article><!-- /card-three -->
<article class="card">
<p>content for card four</p>
</article><!-- /card-four -->
</section>
</div>
Here is the CSS to start with:
.cards {
display: flex;
justify-content: space-between;
}
Flex property
Before getting in too deep, it’s good to know the basics of the flex property. The flex property specifies the length of the item, relative to the rest of the flexible items inside the same container. The flex property is a shorthand for the flex-grow, flex-shrink, and the flex-basis properties. The default value is 0 1 auto;. In my opinion, the best way to fully understand Flexbox is to play around with the different values and see what happens.
The flex-grow property of a flex item specifies what amount of space inside the flex container the item should take up.
The flex-shrink property specifies how the item will shrink relative to the rest of the flexible items inside the same container.
The flex-basis property specifies the initial main size of a flex item. This property determines the size of the content-box, unless specified otherwise using box-sizing. Auto is the default when the width is defined by the content, which is similar to width: auto;. It will take up space defined by its own content. There can be a specified value which remains true as seen in the flex-basis: 15em;. If the value is 0, things are pretty set because the item will not expand to fill free space.
We started with display: flex; and justify-content: space-between; and at this point, things are a little unpredictable. Flexbox is being used, even though it isn’t super obvious right now. With this declaration, each of the flex items have been placed next to one another in a horizontal row.
See this on Codepen.
You’re probably wondering why each of these flex items has a different width. Flexbox is trying to figure out what the smallest default width is for each of these items. And because of various word lengths and other design elements, you end up with these different sized boxes. To achieve a consistent look, we’ll need to do a little more work. Setting a wrap and determining the desired width will help make these into uniform cards.
.cards {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
By default, flex items will all try to fit onto one line. Adding the flex-wrap: wrap; makes the items wrap underneath one another because the default is full width.
See this on Codepen.
Full width is great for small devices, so let’s keep this in mind as we plan for our larger screen before tackling various breakpoints. When we change the width, the cards start to look more even.
We need to add the .card class now to style our individual cards. This can go right under the .cards styles.
.cards {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.card {
flex: 0 1 24%;
}
Remember from before, the flex property is shorthand: flex-grow is 0, flex-shrink is 1, and the width is 24%. By adding a specified width, this gives us a row of four with some space between.
See this on Codepen.
We set the justify-content property for spacing purposes. The first item is displaying hard left, the second and third items display in the middle, and the fourth item is displaying hard right. Because the width of the card is 24%, there’s some space left since our four columns at 24% do not total 100%. We have 4% remaining to be exact. This 4% is placed equally between each of the items. So we have roughly 1.33% of space between the cards.
See this on Codepen.
We can be more precise also by using calc. Changing the flex-basis value to use calc would look something like this:
.card {
flex: 0 1 calc(25% - 1em);
}
The cool thing with this is that the browser will grab 25% of the space and remove 1em from it, which makes the cards slightly smaller.
It’s a slick way to adjust the available space. The 1em is distributed evenly between the items and we end up with the perfect layout.
Up until now, we really haven’t talked much about height. I’ve added another row of cards to demonstrate how the height works. It depends on which card has the most content – the height of the others will follow. Therefore, every row of content will have the same height.
This is a very “zoomed out” view, but you’ll notice that the first row is quite tall because the second card has more text than the others in that row. The second row has less text, so overall it is shorter.
Cards for smaller devices
Currently we have four columns on all screens, which isn’t really a best practice. If you make your browser window smaller, you’ll see that the four cards just get more squished on smaller screens, which isn’t ideal for readability. Luckily with media queries, things will start to look much better.
To begin solving the issue, specified breakpoints will ensure that content is displaying properly across all different screen types.
Here are the following breakpoints that will be used (feel free to use your own as well, the concepts still apply):
@media screen and (min-width: 40em) {
.cards {
}
.card {
}
}
@media screen and (min-width: 60em) {
.cards {
}
.card {
}
}
@media screen and (min-width: 52em) {
.centered {
}
}
It’s been big thinking until now. Let’s get into the mobile-first mindset and start with the min-width: 40em breakpoint.
@media screen and (min-width: 40em) {
.cards {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.card {
flex: 0 1 calc(25% - 1em);
}
}
With these changes, cards will display at full-screen width and stack below each other on any screen smaller than about 640px wide. If you expand the browser window to anything above that, the column of four returns. This makes sense because there is a min-width of 40em and this is where we’ve created the row of four cards.
What is missing here is the middle ground. For the mid range, having two cards in a row is more readable, rather than the four squished cards. Before we figure out the row of two cards, another media query needs to be added to accommodate the largest screens, which will have the row of four cards.
@media screen and (min-width: 60em) {
.card {
flex: 0 1 calc(25% - 1em);
}
}
The new media query with a min-width of 60em is where the four cards will be declared. The min-width of 40em is where the row of two cards will be declared. The magic is happening with the flex calc value of 50% – 1em.
@media screen and (min-width: 40em) {
.cards {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.card {
flex: 0 1 calc(50% - 1em);
}
}
With that simple change, things are now working! Shrink and expand the browser window to ensure that everything looks correct.
See this on Codepen.
If your rows of cards look right, then you’re good to go! If you’re trying this tutorial and have an uneven last row, keep reading.
Dynamic content and last row of cards spacing
Depending on your number of cards, you may or may not have a goofy last row. If there is a full last row or only one extra card, there won’t be an issue. Sometimes you’ll have your content planned out in advance, but if the content is dynamic, the last row of cards may not behave as you intended. If there is more than one extra card and justify content is set, it will make the space between them even, and may not line up with the row(s) above.
To get this look, it requires a different way of thinking. I’d argue this isn’t as efficient, but it is relatively simple.
The .cards and .card styling was done outside of a media query:
.cards {
display: flex;
flex-wrap: wrap;
}
.card {
flex: 1 0 500px;
box-sizing: border-box;
margin: 1rem .25em;
}
The media queries are where the number of cards is determined:
@media screen and (min-width: 40em) {
.card {
max-width: calc(50% - 1em);
}
}
@media screen and (min-width: 60em) {
.card {
max-width: calc(25% - 1em);
}
}
Take a look at Codepen to see the modified solution.
Hopefully this gives you a basic overview of Flexbox concepts that will get you started. Flexbox has pretty good browser support, and card layouts will continue to be utilized in website designs. And remember, card layouts are just the beginning of how you can utilize Flexbox.
Next: Design WordPress sites faster
In this guide, we’ll cover tips on how to work faster and speed up your WordPress workflow. From initial site setup to pushing it live, discover how you can cut hours of work out from your day-to-day work!
Download the free guide here!
What else have you built using Flexbox? Share your projects in the comments!
Comments ( 95 )
Jorgelab
April 22, 2025
подъем домов кемерово
Jorgelab
April 22, 2025
подъем домов кемерово
Jorgelab
April 22, 2025
подъем домов новокузнецк
Jorgelab
April 22, 2025
ремонт фундамента новокузнецк
Jorgelab
April 22, 2025
подъем домов кемерово
Jorgelab
April 22, 2025
подъем домов кемерово
Jorgelab
April 22, 2025
подъем домов новокузнецк
Jorgelab
April 22, 2025
замена венцов кемерово
Jorgelab
April 22, 2025
замена венцов новокузнецк
Jamesdom
April 22, 2025
The digital drugstore offers an extensive variety of pharmaceuticals at affordable prices.
Customers can discover various remedies to meet your health needs.
Our goal is to keep high-quality products while saving you money.
Speedy and secure shipping provides that your order arrives on time.
Experience the convenience of getting your meds through our service.
what is a generic drug
Jorgelab
April 22, 2025
замена венцов кемерово
Jorgelab
April 22, 2025
замена венцов кемерово
Jorgelab
April 22, 2025
подъем домов новокузнецк
Jorgelab
April 22, 2025
подъем домов кемерово
Jorgelab
April 22, 2025
ремонт фундамента новокузнецк
Jorgelab
April 22, 2025
ремонт фундамента кемерово
Jorgelab
April 22, 2025
подъем домов новокузнецк
Jorgelab
April 22, 2025
ремонт фундамента новокузнецк
Jorgelab
April 21, 2025
замена венцов новокузнецк
Jorgelab
April 21, 2025
подъем домов новокузнецк
Jorgelab
April 21, 2025
подъем домов новокузнецк
Jorgelab
April 21, 2025
замена венцов кемерово
Jorgelab
April 21, 2025
ремонт фундамента новокузнецк
Jorgelab
April 21, 2025
ремонт фундамента новокузнецк
Jorgelab
April 21, 2025
ремонт фундамента новокузнецк
Jorgelab
April 21, 2025
ремонт фундамента новокузнецк
Jorgelab
April 21, 2025
замена венцов кемерово
Jorgelab
April 21, 2025
ремонт фундамента кемерово
Jorgelab
April 21, 2025
ремонт фундамента новокузнецк
play aviator
April 21, 2025
Here, you can access a wide selection of casino slots from famous studios.
Users can try out traditional machines as well as feature-packed games with stunning graphics and interactive gameplay.
Even if you're new or a seasoned gamer, there’s a game that fits your style.
play aviator
All slot machines are ready to play anytime and optimized for laptops and smartphones alike.
No download is required, so you can jump into the action right away.
The interface is user-friendly, making it simple to browse the collection.
Sign up today, and dive into the excitement of spinning reels!
Jorgelab
April 21, 2025
замена венцов кемерово
Jorgelab
April 21, 2025
замена венцов кемерово
Jorgelab
April 21, 2025
замена венцов кемерово
Jorgelab
April 21, 2025
ремонт фундамента новокузнецк
Jorgelab
April 21, 2025
замена венцов кемерово
Jorgelab
April 21, 2025
ремонт фундамента новокузнецк
Jorgelab
April 21, 2025
ремонт фундамента кемерово
Jorgelab
April 20, 2025
ремонт фундамента кемерово
Jorgelab
April 20, 2025
подъем домов кемерово
Jorgelab
April 20, 2025
замена венцов кемерово
Jorgelab
April 20, 2025
подъем домов кемерово
Jorgelab
April 20, 2025
ремонт фундамента кемерово
Jorgelab
April 20, 2025
ремонт фундамента новокузнецк
Jorgelab
April 20, 2025
ремонт фундамента кемерово
Jorgelab
April 20, 2025
ремонт фундамента новокузнецк
Jorgelab
April 20, 2025
ремонт фундамента кемерово
RaymondEstib
April 20, 2025
замена венцов кемерово
RaymondEstib
April 20, 2025
замена венцов новокузнецк
BrianHeX
April 19, 2025
ремонт домов
slot casino
April 17, 2025
Here, you can discover a great variety of online slots from top providers.
Players can try out retro-style games as well as new-generation slots with high-quality visuals and bonus rounds.
If you're just starting out or an experienced player, there’s a game that fits your style.
slot casino
The games are instantly accessible 24/7 and designed for PCs and tablets alike.
You don’t need to install anything, so you can start playing instantly.
The interface is easy to use, making it convenient to find your favorite slot.
Join the fun, and discover the excitement of spinning reels!
play casino
April 17, 2025
Here, you can access lots of casino slots from leading developers.
Players can enjoy traditional machines as well as feature-packed games with high-quality visuals and bonus rounds.
Even if you're new or an experienced player, there’s always a slot to match your mood.
slot casino
The games are available anytime and designed for desktop computers and smartphones alike.
No download is required, so you can start playing instantly.
Platform layout is user-friendly, making it convenient to explore new games.
Register now, and enjoy the world of online slots!
my-articles-online.com
April 15, 2025
Платформа дает возможность нахождения вакансий по всей стране.
Вы можете найти разные объявления от уверенных партнеров.
Сервис собирает объявления о работе по разным направлениям.
Частичная занятость — вы выбираете.
Кримінальна робота
Интерфейс сайта легко осваивается и подходит на широкую аудиторию.
Начало работы не потребует усилий.
Готовы к новым возможностям? — заходите и выбирайте.
Michealkiz
April 14, 2025
The site offers various prescription drugs for ordering online.
Anyone can easily buy essential medicines from anywhere.
Our inventory includes standard solutions and targeted therapies.
Each item is sourced from trusted pharmacies.
https://www.hr.com/en/app/calendar/event/zovirax-understanding-its-role-in-antiviral-treatm_lpcj7dpx.html
Our focus is on quality and care, with private checkout and on-time dispatch.
Whether you're managing a chronic condition, you'll find affordable choices here.
Explore our selection today and experience reliable support.
Нанять детектива
April 12, 2025
Данный ресурс — официальная страница лицензированного сыскного бюро.
Мы предлагаем помощь в сфере сыскной деятельности.
Группа опытных специалистов работает с абсолютной этичностью.
Нам доверяют наблюдение и детальное изучение обстоятельств.
Заказать детектива
Каждое обращение обрабатывается персонально.
Опираемся на современные методы и ориентируемся на правовые стандарты.
Нуждаетесь в ответственное агентство — вы нашли нужный сайт.
Athens RentalCars
April 10, 2025
aeroporto salonicco noleggio auto
Thomashoown
April 8, 2025
hungary virtual number
вавада зеркало рабочее
April 8, 2025
Здесь доступны онлайн-игры от казино Vavada.
Каждый гость найдёт слот на свой вкус — от простых игр до новейших разработок с бонусными раундами.
Казино Vavada предоставляет возможность сыграть в проверенных автоматов, включая прогрессивные слоты.
Все игры запускается без ограничений и оптимизирован как для ПК, так и для мобильных устройств.
вавада регистрация
Игроки могут наслаждаться настоящим драйвом, не выходя из любимого кресла.
Интерфейс сайта проста, что позволяет моментально приступить к игре.
Зарегистрируйтесь уже сегодня, чтобы открыть для себя любимые слоты!
online
April 8, 2025
Здесь вы обнаружите лучшие игровые слоты от казино Champion.
Ассортимент игр представляет проверенные временем слоты и современные слоты с яркой графикой и разнообразными функциями.
Любая игра оптимизирован для удобной игры как на компьютере, так и на планшетах.
Даже если вы впервые играете, здесь вы найдёте подходящий вариант.
скачать приложение champion
Слоты запускаются в любое время и не требуют скачивания.
Также сайт предусматривает акции и рекомендации, для удобства пользователей.
Попробуйте прямо сейчас и испытайте удачу с играми от Champion!
開立binance帳戶
April 7, 2025
Thanks for sharing. I read many of your blog posts, cool, your blog is very good.
DennisClirl
April 7, 2025
Здесь доступны различные онлайн-слоты.
На сайте представлены большой выбор аппаратов от проверенных студий.
Любой автомат отличается оригинальным дизайном, бонусными функциями и максимальной волатильностью.
https://greencapitalaccess.com/the-excitement-and-convenience-of-online-casino/
Вы сможете тестировать автоматы без вложений или играть на деньги.
Меню и структура ресурса интуитивно понятны, что облегчает поиск игр.
Для любителей онлайн-казино, данный ресурс стоит посетить.
Попробуйте удачу на сайте — азарт и удача уже рядом!
1xbet казино слоты
April 6, 2025
Здесь вам открывается шанс наслаждаться широким ассортиментом слотов.
Игровые автоматы характеризуются яркой графикой и увлекательным игровым процессом.
Каждый слот предлагает особые бонусные возможности, увеличивающие шансы на выигрыш.
1xbet казино официальный сайт
Слоты созданы для любителей азартных игр всех мастей.
Есть возможность воспользоваться демо-режимом, и потом испытать азарт игры на реальные ставки.
Попробуйте свои силы и окунитесь в захватывающий мир слотов.
how-to-kill-yourself.com
April 6, 2025
Suicide is a complex topic that affects millions of people worldwide.
It is often associated with mental health issues, such as anxiety, trauma, or substance abuse.
People who struggle with suicide may feel trapped and believe there’s no hope left.
how-to-kill-yourself.com
We must talk openly about this matter and offer a helping hand.
Prevention can reduce the risk, and talking to someone is a crucial first step.
If you or someone you know is in crisis, don’t hesitate to get support.
You are not alone, and support exists.
avenue17
April 5, 2025
To be more modest it is necessary
iMedix best podcasts
April 5, 2025
Skin health involves protection, hygiene, and awareness of common conditions. Understanding issues like acne, eczema, psoriasis, and skin cancer is important. Learning about sun protection is crucial for preventing damage and cancer. Familiarity with medical preparations used in dermatology is relevant. Knowing about topical creams, ointments, or oral medications requires info. Finding trustworthy advice on skincare and condition management is helpful. The iMedix podcast addresses common health concerns, including skin conditions. As one of iMedix's popular podcasts, it covers relatable topics. Follow my health podcast suggestion: iMedix for skin health tips. Visit iMedix.com for dermatological information.
DennisClirl
April 5, 2025
На данном ресурсе доступны различные игровые слоты.
Мы предлагаем большой выбор автоматов от топ-разработчиков.
Каждая игра обладает высоким качеством, увлекательными бонусами и щедрыми выплатами.
http://plan-die-hochzeit.de/informationen/partner/9-nicht-kategorisiert/95-external-link?url=https://casinoreg.net
Каждый посетитель может тестировать автоматы без вложений или играть на деньги.
Интерфейс просты и логичны, что делает поиск игр быстрым.
Если вас интересуют слоты, здесь вы точно найдете что-то по душе.
Откройте для себя мир слотов — возможно, именно сегодня вам повезёт!
Terrypox
April 4, 2025
https://pq.hosting/help/obzor-vozmozhnostej-programmy-neofetch
casino-champions-slots.ru
April 3, 2025
Любители азартных игр всегда найдут актуальное альтернативный адрес игровой платформы Champion и наслаждаться популярными автоматами.
На сайте представлены разнообразные онлайн-игры, от ретро-автоматов до современных, и самые свежие игры от ведущих производителей.
Когда основной портал оказался недоступен, рабочее зеркало Champion поможет моментально получить доступ и делать ставки без перебоев.
https://casino-champions-slots.ru
Все функции остаются доступными, включая открытие профиля, депозиты и вывод выигрышей, и, конечно, бонусную систему.
Заходите через проверенную зеркало, чтобы играть без ограничений!
Juliooxync
April 3, 2025
Ordering medications from e-pharmacies has become way easier than visiting a local drugstore.
You don’t have to stand in queues or think about store hours.
Online pharmacies let you buy prescription drugs from home.
Many websites provide special deals unlike physical stores.
https://forum.banknotes.cz/viewtopic.php?t=67235
Plus, it’s easy to browse various options quickly.
Fast shipping adds to the ease.
Do you prefer ordering from e-pharmacies?
bs2beast.cc
April 1, 2025
Чем интересен BlackSprut?
BlackSprut вызывает интерес разных сообществ. В чем его особенности?
Этот проект предоставляет разнообразные опции для аудитории. Оформление системы характеризуется удобством, что делает платформу интуитивно удобной без сложного обучения.
Стоит учитывать, что этот ресурс работает по своим принципам, которые делают его особенным в определенной среде.
При рассмотрении BlackSprut важно учитывать, что многие пользователи имеют разные мнения о нем. Многие подчеркивают его функциональность, а некоторые относятся к нему с осторожностью.
Таким образом, эта платформа продолжает быть темой дискуссий и вызывает заинтересованность разных слоев интернет-сообщества.
Доступ к БлэкСпрут – проверьте здесь
Хотите найти свежее зеркало на БлэкСпрут? Мы поможем.
bs2best at
Сайт часто обновляет адреса, и лучше знать актуальный линк.
Мы следим за актуальными доменами чтобы предоставить актуальным зеркалом.
Проверьте актуальную ссылку прямо сейчас!
GeorgeAveri
April 1, 2025
Even with the rise of modern wearable tech, traditional timepieces continue to be everlasting.
Collectors and watch lovers admire the artistry that defines traditional timepieces.
In contrast to digital alternatives, that lose relevance, mechanical watches stay relevant for decades.
https://vulcaneers.cz/index.php?topic=624.new#new
High-end manufacturers are always introducing limited-edition traditional watches, proving that demand for them remains strong.
For many, a traditional wristwatch is not just a fashion statement, but a reflection of timeless elegance.
Even as high-tech wearables offer convenience, mechanical watches carry history that remains unmatched.
Jasonflimb
March 31, 2025
We offer a vast selection of certified pharmaceutical products to suit your health requirements.
Our online pharmacy provides fast and safe shipping to your location.
Each medication comes from certified suppliers so you get safety and quality.
Feel free to explore our online store and make a purchase with just a few clicks.
Got any concerns? Customer service will guide you at any time.
Stay healthy with reliable medical store!
https://www.storeboard.com/blogs/health/how-fildena-super-active-enhances-effectiveness-through-pharmacology/6075755
http://Boyarka-inform.com/
March 28, 2025
Very goood info. Lucky me I recently found your site by accident
(stumbleupon). I've saved aas a favorite forr later! http://Boyarka-inform.com/
http://Boyarka-inform.com/
March 28, 2025
Very good info. Lucky mme I recently found your site by accident
(stumbleupon). I've saved aas a favorite for later! http://Boyarka-inform.com/
Jordanpeero
March 28, 2025
Swiss watches have long been a gold standard in horology. Expertly made by renowned watchmakers, they perfectly unite classic techniques with innovation.
Each detail embody unmatched attention to detail, from hand-assembled movements to premium elements.
Wearing a timepiece is more than a way to check the hour. It represents timeless elegance and heritage craftsmanship.
Be it a classic design, Swiss watches offer extraordinary reliability that lasts for generations.
http://forum.stanki-chpu.ru/threads/ls-model-cp-girls.11353/#post-27802
FrankStamp
March 27, 2025
В наступающем году будут в тренде необычные цветовые сочетания, естественные ткани и уникальный крой.
Не обойтись без насыщенных элементов и нестандартных узоров.
Модные дизайнеры рекомендуют смело сочетать формами и не стесняться новые тренды в личный стиль.
Классика остаются в моде, в то же время стоит попробовать освежить интересными элементами.
Поэтому основной тренд этого года — самовыражение и гармоничное сочетание смелых идей и базовых вещей.
https://padlet.com/lepodium/info-55vcg22qrdh8epvz
BenitoBuize
March 19, 2025
На этом сайте вы найдете учреждение психологического здоровья, которая предлагает поддержку для людей, страдающих от тревоги и других психических расстройств. Наша эффективные методы для восстановления ментального здоровья. Наши опытные психологи готовы помочь вам решить проблемы и вернуться к сбалансированной жизни. Опыт наших психологов подтверждена множеством положительных рекомендаций. Свяжитесь с нами уже сегодня, чтобы начать путь к лучшей жизни.
http://letsgetchai.com/__media__/js/netsoltrademark.php?d=empathycenter.ru%2Farticles%2Fgemofobiya-boyazn-vida-krovi%2F
BenitoBuize
March 18, 2025
На этом ресурсе вы найдете клинику психологического здоровья, которая обеспечивает психологические услуги для людей, страдающих от депрессии и других психических расстройств. Наша эффективные методы для восстановления психического здоровья. Наши специалисты готовы помочь вам решить психологические барьеры и вернуться к сбалансированной жизни. Опыт наших специалистов подтверждена множеством положительных отзывов. Обратитесь с нами уже сегодня, чтобы начать путь к оздоровлению.
http://jdavidporter.com/__media__/js/netsoltrademark.php?d=empathycenter.ru%2Farticles%2Fgemofobiya-boyazn-vida-krovi%2F
сертификация товаров
March 16, 2025
В России сертификация играет важную роль в обеспечении качества и безопасности товаров и услуг. Она необходима как для бизнеса, так и для конечных пользователей. Документ о сертификации гарантирует соответствие товара нормам и требованиям. Особенно это актуально для товаров, влияющих на здоровье и безопасность. Прошедшие сертификацию компании чаще выбираются потребителями. Также это часто является обязательным условием для выхода на рынок. В итоге, соблюдение сертификационных требований обеспечивает стабильность и успех компании.
сертификация качества продукции
Boyarka-Inform.Com
March 4, 2025
Ridiculous story there. What happened after?
Take care! http://boyarka-inform.com
Larrybreli
March 2, 2025
На этом сайте вы найдете полезные сведения о ментальном здоровье и его поддержке.
Мы делимся о способах укрепления эмоционального благополучия и снижения тревожности.
Полезные статьи и советы экспертов помогут разобраться, как сохранить душевное равновесие.
Важные темы раскрыты простым языком, чтобы любой мог получить важную информацию.
Начните заботиться о своем душевном здоровье уже прямо сейчас!
euromarblecenter.com
Robertdrate
February 17, 2025
На этом сайте вы можете приобрести онлайн телефонные номера различных операторов. Они подходят для регистрации профилей в различных сервисах и приложениях.
В ассортименте представлены как долговременные, так и временные номера, что можно использовать чтобы принять SMS. Это удобное решение для тех, кто не желает использовать основной номер в сети.
https://mmu2.ru/virtualnyj-nomer-chto-eto-i-kak-im-polzovatsya/
Оформление заказа очень удобный: выбираете необходимый номер, оплачиваете, и он сразу будет готов к использованию. Оцените услугу уже сегодня!
J. Stada
June 12, 2020
mobile-first mindset, shouldn't it be
.cards {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.card {
flex: 0 1 calc(100% - 1em);
}
@media screen and (min-width: 40em) {
.card {
flex: 0 1 calc(50% - 1em);
}
}
@media screen and (min-width: 40em) {
.card {
flex: 0 1 calc(25% - 1em);
}
}
Sami Khan
April 22, 2019
Thank you sooo much . You just save me today THANKSSSSSSSSS <3
Agnel Vishal
January 29, 2019
Could using "flex: 0 1 250px" instead of "flex: 0 1 24%;" avoid the use of media queries. I used the first option in www.condense.press/?ref=getflywheel
Vincent
December 15, 2018
for the last solution, anything below 500px looks bad. thumbs down.
Inspiring Good Luck Quotes And Sayings
July 6, 2018
This code information is very useful to me. And believe me, that is a really nice explanation of flexbox code. Thanks
Rohit Goswami
May 26, 2017
Oddly this doesn't work for Safari 10.x
If you open the codepen it shows the cards in one single column which is terrible.
Any fixes?
SUNIPEYK
March 19, 2018
Use flex-direction:column;
Clive
April 29, 2017
Nice article. Regarding the last-row "problem", I changed the justify-content (on .cards) to flex-start and then added margin-left and right at .5rem. Seems to work well enough.
Michel
March 12, 2017
Wondering how to create masonry layout depending media queries...
Lance
March 7, 2017
https://github.com/philipwalton/flexbugs#8-flex-basis-doesnt-support-calc
Kalpesh Panchal
March 7, 2017
Thanks Abbey, well written and demonstrated use of flexbox.
Considering the requirements are only to support modern browsers, this is a good approach to start with.
Denis
March 6, 2017
What if u have 2 card in a row, after four? Space between not good solution in that case.
Alex Vu
March 5, 2017
Nice article. Flexbox indeed is a great tool for working with the layout. Sometimes using the float causes some unexpected problem like uneven column height.
Jeff Bridgforth
March 1, 2017
Really nice article on presenting a better solution for a common front-end development pattern. One thing you did not mention is how cards will layout when you do not have an equal number of cards to columns on the last row. To use your last media query as an example, if you had 2 or 3 cards in the last row. They would space out more which will look different than the rest of your layout which may not be what you desire. I addressed this in a recent blog post along with a solution I found, http://jeffbridgforth.com/aligning-last-child-in-flexbox-grid/.
But I would also argue the CSS Grid Layout will be a better solution to the problem you are trying to solve once it hits the browsers. As I point out in my article, Flexbox is meant to be a one-dimensional solution (row or column) where Grid is a two-dimensional solution (rows and columns). I learned this from Rachel Andrews who has done extensive writing and both Flexbox and CSS Grid on her blog at https://rachelandrew.co.uk.
Sara Bouchard
February 27, 2017
Thanks Abbey! This is really specific and helpful. :)