Trong bài viết này, tôi sẽ hướng dẫn bạn cách tạo bố cục 2 cột đáp ứng với CSS flex-box.

Bạn đang xem : css flex 2 bố cục cột

Tạo bố cục 2 cột đáp ứng với CSS Flex-box

Trong bài viết trước, tôi đã nói về tạo bố cục 2 cột đáp ứng , sử dụng các phao css để định vị vùng nội dung và thanh bên của chúng tôi. Trong bài viết này, chúng tôi sẽ tạo cùng một thứ chính xác, nhưng thay vì sử dụng css float để định vị, chúng tôi sẽ sử dụng bố cục 2 cột với CSS Flex-box. Tôi sẽ không đi qua chính xác flexbox là gì và cách bạn có thể sử dụng nó cho các trường hợp khác nhau. Về điều đó, đây là một bài viết tuyệt vời của Chris Coyier: Hướng dẫn hoàn chỉnh về Flexbox .

< p> Ngoài ra, tôi sẽ không đi qua những thứ cơ bản như khu vực đầu trang, điều hướng và chân trang. Về điều đó, vui lòng tham khảo lại bài viết trước tại đây . Thay vào đó, chúng tôi sẽ tập trung vào các khu vực khác nhau.

Giả sử bạn đã chuẩn bị sẵn bố cục, trông giống như sau:

& lt; div id = "container" & gt;

& lt;! - tiêu đề - & gt;
& lt; header id = "header" & gt;
& lt; h1 id = "title" & gt; Bố cục Đáp ứng & lt; / h1 & gt;
& lt; / tiêu đề & gt;

& lt;! - Điều hướng - & gt;
& lt; nav id = "menu" class = "clearfix" & gt;
& lt; ul & gt;
& lt; li & gt; & lt; a href = "#" & gt; Trang chủ & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "#" & gt; Danh mục đầu tư & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "#" & gt; Giới thiệu & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "#" & gt; Liên hệ & lt; / a & gt; & lt; / li & gt;
& lt; / ul & gt;
& lt; / nav & gt;
& lt;! - Khu vực Nội dung Chính - & gt;
& lt; section id = "content" & gt;
& lt;! - nội dung của bạn ở đây - & gt;
& lt; / phần & gt;

& lt;! - Thanh bên - & gt;
& lt; sang một bên id = "sidebar" & gt;
& lt;! - nội dung của bạn ở đây - & gt;
& lt; / sang một bên & gt;
& lt;! - Điều hướng - & gt;
& lt; footer id = "footer" class = "clearfix" & gt;
Bản quyền & amp; sao chép Andor Nagy 2015
& lt; / footer & gt;

& lt; / div & gt;

Để sử dụng display: flex , chúng tôi cần bọc vùng nội dung và thanh bên của mình vào một trình bao bọc khác. Chúng tôi sẽ gọi nó là #columns . như vậy:

& lt; phần id = "cột" & gt;
& lt;! - Khu vực Nội dung Chính - & gt;
& lt; section id = "content" & gt;
& lt;! - nội dung của bạn ở đây - & gt;
& lt; / phần & gt;

& lt;! - Thanh bên - & gt;
& lt; sang một bên id = "sidebar" & gt;
& lt;! - nội dung của bạn ở đây - & gt;
& lt; / sang một bên & gt;
& lt; / phần & gt;

Sau đó, chúng tôi cần thay đổi một số điều xung quanh trong style.css của chúng tôi. Trước hết, chúng ta cần thêm phần sau, trong #container ‘s styles

#cột {
hiển thị: -ms-flex;
hiển thị: -webkit-flex;
hiển thị: flex;
        flex-flow: quấn hàng;
}

Sau đó, chúng tôi cần thay đổi kiểu trên các phần tử #content sang một bên .

Xem Thêm  17+ Ví dụ về bố cục CSS phân chia đáp ứng - làm cho div đáp ứng css

#content

/ * Nội dung trước
--------------------------------------------- * /

#Nội dung {
float: trái;
đệm lót: 3%;
chiều rộng: 64%;
}

/ * Nội dung Sau
--------------------------------------------- * /

# cột & gt; #Nội dung {
đệm lót: 3%;
chiều rộng: 64%;
}

Bên cạnh

/ * Thanh bên Trước
--------------------------------------------- * /

qua một bên {
float: phải;
đệm lót: 3%;
chiều rộng: 24%;
màu nền: #eee;
}

/ * Thanh bên Sau
--------------------------------------------- * /

# cột & gt; qua một bên {
đệm lót: 3%;
chiều rộng: 24%;
màu nền: #eee;
}

Như bạn có thể thấy ở phần trước và sau đó, chúng tôi đã thay đổi cách nhắm mục tiêu các phần tử và chúng tôi cũng loại bỏ các phao, điều này là do display: flex; flex-flow: hàng dọc; sẽ hiển thị các phần tử bên trong phần tử #columns gần nhau. Và vì chúng tôi sử dụng Phần trăm (%) để chỉ định chiều rộng, nó sẽ lấp đầy tất cả khoảng trống.

Và đối với các truy vấn phương tiện, chúng tôi cần thay đổi cách chúng tôi nhắm mục tiêu phần tử #content và #sidebar, và thêm kiểu cho vùng chứa #columns:

@media all và (max-width: 768px) {

tiêu đề {
text-align: center;
}

nav {
text-align: center;
}

#cột {
-webkit-flex-flow: cột bọc;
flex-flow: quấn cột;
}

# cột & gt; #Nội dung {
chiều rộng: 94%;
đệm lót: 3%;
}

# cột & gt; # thanh bên {
chiều rộng: 94%;
đệm lót: 3%;
border-top: 3px solid # E64A19;
}

}

Và sau đó, bạn có khá nhiều bố cục chính xác giống nhau, với cùng chiều rộng và mọi thứ, nhưng thay vì sử dụng phao css, chúng tôi đã sử dụng hộp flex-box css.

Tôi muốn Cá nhân tôi thích phương pháp này hơn phương pháp kia, nhưng nó thực sự không có sự khác biệt lớn. Bạn thích cái nào hơn? Hộp uốn cong hay hộp nổi? Hãy cho tôi biết trong phần bình luận bên dưới.

Xem Thêm  Đặt và Nhận Cookie trong JavaScript - cách lấy cookie js


Xem thêm những thông tin liên quan đến chủ đề bố cục css flex 2 cột

Flexbox Grid Layout Pattern – 2

  • Tác giả: S A Bokhari
  • Ngày đăng: 2016-07-29
  • Đánh giá: 4 ⭐ ( 1701 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Flexbox Grid Layout Pattern – 2

    Flexbox is for Layout pattern and for Enhancement. It is for systematic problem solving mechanism and technology for the modern web development.

    CSS3 Flexbox Technology is our friend and Flexbox is here to rescue us from a ton of layout and floating objects frustrations, and for that,

    In this video tutorial, I am going to show you how you can very quickly, easily and simply create and build your own 2 column grid layout pattern for your web projects using a CSS3 technology called “Flexbox”.

    In this video tutorial called “Flexbox Grid layout Pattern – 2”, we will be learning the how to manipulate each row and column using Flexbox properties and values for creating a 2 column grid layout pattern.

    Flexbox if really powerful and highly Customisable with a lot of options. So, if you learn and master the techniques of Flexbox properties and values and right implementation of it, you’ll be able to solve complex layout pattern problems and bring out the solutions with ease and make your code scalable in your web development arenas.

    So, wait no more and start learning Flexbox right now.

    There are around 37 properties of Flexbox altogether.
    Flexbox works in two levels. It works as in Parent and child relationship level.

    So, there must be a Parent element that has 25 properties to choose from and the Child element has 12 properties to choose from.

    You can learn more about flexbox form its original source:
    https://www.w3.org/TR/css-flexbox-1/

    and this also might be helpful to you to understand about Flexbox:
    http://apps.workflower.fi/css-cheats/?name=flexbox

    and there are many sources out there …

    Here’s the Project Files:
    Look in Flexbox-2016 Folder
    https://github.com/shahbokhari/webdev

    In the experimentation, I discovered these techniques so I tried my best to create a tutorial called “Flexbox Grid Layout Pattern – 2” so that you can benefit from it. Hope it helps.

    Thank You and Take care
    happy coding

Cách tạo bố cục lưới cho mô-đun Divi bằng CSS

  • Tác giả: codewatchers.com
  • Đánh giá: 5 ⭐ ( 3522 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn có quen với việc tạo các trang web tuyệt đẹp bằng Divi không? Bạn có thể nên biết rằng bố cục lưới là một tính năng cốt lõi của Divi Builder. Thông thường, bạn bắt đầu bằng cách tạo một hàng và…

Bố cục nhiều cột trong CSS

  • Tác giả: laptrinhtudau.com
  • Đánh giá: 3 ⭐ ( 9830 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tạo bố cục cột bằng CSS, Chỉ định khoảng cách giữa các cột bằng CSS, Dải phân cách của các cột trong CSS, Chỉ định số lượng cột mà một phần tử nên kéo dài trong CSS,Các trình duyệt hỗ trợ

Sử dụng bố cục trang Flexbox trong CSS

  • Tác giả: nq.com.vn
  • Đánh giá: 5 ⭐ ( 1620 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Chia cột trong HTML và CSS

  • Tác giả: quachquynh.com
  • Đánh giá: 5 ⭐ ( 5855 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Sử dụng flexbox bố cục trang trong CSS

  • Tác giả: xuanthulab.net
  • Đánh giá: 5 ⭐ ( 8194 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thiết lập kích hoạt flexbox để dàn trang một cách mềm dẻo, thiết lập các cách hiện thị phần tử trong hộp flexbox

Hướng dẫn toàn diện về Căn chỉnh Flexbox

  • Tác giả: webdesign.tutsplus.com
  • Đánh giá: 3 ⭐ ( 9027 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Căn chỉnh có lẽ là khía cạnh khó hiểu nhất của flexbox. Mô-đun flexbox layout có một số thuộc tính căn chỉnh hành xử khác nhau trong các trường hợp khác nhau…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Biểu thức chính quy trong Python với các ví dụ - nhập biểu thức chính quy python

By ads_php