如何使用Flexbox构建新闻站点布局_html/css_WEB-ITnose

英文原文： http://webdesign.tutsplus.com/tutorials/how-to-build-a-news-website-layout-with-flexbox--cms-26611

It’s not necessary to understand every aspect of Flexbox before you can jump in and get started. In this tutorial, we’re going to introduce a few features of Flexbox whilst designing a “news layout” like the one you can find on The Guardian .

The reason we’re using Flexbox is that it provides very powerful features:

we can easily make responsive columns we can make columns of equal height we can push content to the bottom of a container

So let’s get started!

1. Start with Two Columns

Creating columns in CSS has always been a challenge. For a long time, the only options were to use floats or tables, but they both had their own issues.

Flexbox makes the process easier, giving us:

cleaner code : we only need a container with display: flex no need to clear floats, preventing unexpected layout behavior semantic markup flexibility : we can resize, stretch, align the columns in a few lines of CSS

Let’s start by making two columns; one that’s 2/3 of the width of our container, and one that’s 1/3.

 
 2/3 column

      
查看更多关于如何使用Flexbox构建新闻站点布局_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did115121