Tạo layout website 2 cột nhanh chóng với Flexbox Css

Nếu bạn đang mong muốn tạo ra một layout website 2 cột bằng html css thì trong bài này tôi sẽ giúp bạn xây dựng nó dễ dàng.

Demo layout sau khi thành phẩm

Xây dựng layout web 2 cột với flexbox

Để tạo ra layout như trên chúng ta cần kết hợp html và css. Bạn có thể tạo một dự án có cấu trúc file như sau:

layout
|---index.html
|---css
|------main.css

Trong đó:

index.html là file hiển thị layout
main.css nơi khao báo code css để hiển thị giao diện theo ý muốn

File index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/main.css">
    <title>Layout web 2 cột</title>
</head>

<body>
    <div class="container">
        <div id="header">
            <h2 class="text-center">Unitop.vn</h2>
        </div>
        <div id="wp-content" class="d-flex">
            <div id="content">
                Content
            </div>
            <div id="sidebar">
                Sidebar
            </div>
        </div>
        <div id="footer">
            <p class="text-center">Học lập trình web đi làm</p>
        </div>
    </div>
</body>

</html>

File main.css

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

.container {
    max-width: 960px;
    margin: 0px auto;
}
.text-center{
   text-align: center;
}
.d-flex{
   display: flex;
}

#header {
    background: #0073aa;
}

#header h2 {
    font-size: 20px;
    line-height: 30px;
    padding: 15px 0px;
    color: #f8f8f8;
    text-transform: uppercase;
    flex: 100%;
    margin: 0px;
}

#wp-content {
    background: #f4f4f4;
}

#content {
    order: 2;
    flex: 600px;
	min-height: 600px;
}

#sidebar {
    order: 1;
    flex: 360px;
    background: #e1e1e1;
	min-height: 600px;
}

#footer {
    background: #232323;
    color: #f8f8f8;
    font-size: 20px;
    line-height: 1.5;
    padding: 5px 0px;
}

#footer p {
    margin: 0px;
}

Bây giờ bạn hãy thực hành lại bài này bằng việc copy những file trên vào chương trình của mình để xem kết quả.