How to Build a News Website Layout with Flexbox_part 2 (end)

5. Give the First Article a Horizontal Layout

The first article is really big. To optimize the use of space, let’s switch its layout to be horizontal.

1. .first-article {
2.   flex-direction: row;
3. } 
4. .first-article .article-body {
5.   flex: 1;
6. } 
7. .first-article .article-image {
8.   height: 300px;
9.   order: 2;
10.   padding-top: 0;
11.   width: 400px;
12. }

The order property is very useful here, as it allows us to alter the order of HTML elements without affecting the HTML markup. The article-image actually comes before the article-body in the markup, but it will behave as if it comes after.

6. Make the Layout Responsive

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:

1. @media screen and (min-width: 800px) {
2.   .columns,
3.   .column {
4.     display: flex;
5.   }
6. }

That’s it! On smaller screens, all the articles will be on top of each other. Above 800px, they will be laid out in two columns.

7. Add Finishing Touches

To make the layout more appealing on larger screens, let’s add some CSS tweaks:

1. @media screen and (min-width: 1000px) {
2.   .first-article {
3.     flex-direction: row;
4.   } 
5.   .first-article .article-body {
6.     flex: 1;
7.   } 
8.   .first-article .article-image {
9.     height: 300px;
10.     order: 2;
11.     padding-top: 0;
12.     width: 400px;
13.   } 
14.   .main-column {
15.     flex: 3;
16.   } 
17.   .nested-column {
18.     flex: 2;
19.   }
20. }

The first article has its content laid out horizontally, with the text on the left and the image on the right. Also, the main column is now wider (75%) and the nested column too (66%). Here’s the final result!

Conclusion

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