The first article is really big. To optimize the use of space, let’s switch its layout to be horizontal.
- .first-article {
- flex-direction: row;
- }
- .first-article .article-body {
- flex: 1;
- }
- .first-article .article-image {
- height: 300px;
- order: 2;
- padding-top: 0;
- width: 400px;
- }
![]() |
This is all looking just as we want, though it’s a bit squished. Let’s fix that by going responsive.
One great feature of Flexbox is that you need only remove the display: flex rule on the container to disable Flexbox completely, while keeping all the other Flexbox properties (such as align-items or flex) valid.
As a result, you can trigger a “responsive” layout by enabling Flexbox only above a certain breakpoint.
We’re going to remove display: flex from both the .columns and .column selectors, instead wrapping them in a media query:
- @media screen and (min-width: 800px) {
- .columns,
- .column {
- display: flex;
- }
- }
7. Add Finishing Touches
To make the layout more appealing on larger screens, let’s add some CSS tweaks:
- @media screen and (min-width: 1000px) {
- .first-article {
- flex-direction: row;
- }
- .first-article .article-body {
- flex: 1;
- }
- .first-article .article-image {
- height: 300px;
- order: 2;
- padding-top: 0;
- width: 400px;
- }
- .main-column {
- flex: 3;
- }
- .nested-column {
- flex: 2;
- }
- }
![]() |
I hope I’ve shown you that you needn’t understand every aspect of Flexbox to jump in and start using it! This responsive news layout is a really useful pattern; pull it apart, play with it, let us know how you get on!
Written by Jeremy Thomas
If you found this post interesting, follow and support us.
Suggest for you:
CSS: Foundation classes on CSS
Coding Made Easy: HTML & CSS For Beginners
Bootstrap 4 Rapid web development framework HTML CSS JS
No comments:
Post a Comment