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

Bạn đang học html css, 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

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ả.

Kết luận

Trong bài này tôi đã chia sẻ bạn cách tạo layout 2 cột bằng html css flexbox. Nếu bạn muốn tìm hiểu sâu hơn về html css để đi làm hãy xem ngay lộ trình học Html Css 21 Ngày được kèm cặp qua nhóm kín.

Phan Văn Cương founder unitop.vn

Đề xuất cho bạn

Subscribe
Notify of
guest

0 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments

Tặng Ebook chia sẻ kinh nghiệm học lập trình web đi làm cho người mới bắt đầu!

Đây là tấm bản đồ chia sẻ lại cách học lập trình web đi làm đã giúp nhiều học trò của unitop kiếm được thu nhập từ 8-30tr mỗi tháng.

Ebook Bí quyết học lập trình web đi làm - Phan Văn Cương - Unitop.vn
0
Bạn đang nghĩ gì? Hãy để lại bình luận tại đâyx
()
x