CSS cột hàng

Question

Bố cục dạng lưới là cốt lõi của thiết kế phát triển web và rất có thể bạn đã đạt được thứ gì đó như Bootstrap hoặc Foundation để biến bố cục của mình thành hiện thực. Nhưng, giống như hầu hết các bạn, tôi không thích các phần phụ thuộc cần thiết để chạy Bootstrap hoặc Foundation và tôi cũng không thích thời gian tải trang của mình.

Nội dung chính Show

Hộp linh hoạt
Cách trình bày
Cột và hàng trong CSS là gì?
Hàng CSS là gì?
Làm cách nào để sử dụng các hàng trong CSS?
1FR trong CSS là gì?

Trên thực tế, khi tôi sử dụng Bootstrap cho một ứng dụng mà tôi đang viết, tôi thực sự hầu như chỉ sử dụng nó cho các bố cục dạng lưới, đôi khi tôi sẽ sử dụng nó cho các thông báo hoặc các mặc định CSS khá hợp lý cơ bản, nhưng 90% thời gian là tất cả những gì tôi muốn

Tôi cũng không đánh giá cao việc chỉ có các tùy chọn chia cột thành 12 cột hoặc ít hơn. Cảm giác như đôi khi bạn phải thực hiện một số công việc điên rồ để có được các cột trong các cột hoặc những điều kỳ lạ như thế

Làm cách nào chúng ta có thể thực hiện bố cục lưới nhanh hơn và dễ dàng hơn? . tôi nghĩ

Hộp linh hoạt

Tại thời điểm này, flexbox có khá nhiều ở khắp mọi nơi. Nó được hỗ trợ bởi tất cả các chính. Nó cho phép bố cục dễ dàng hơn nhiều và được hỗ trợ bởi React-Native, điều đó có nghĩa là khi tôi bố cục các trang cho React-Native, tôi sẽ tiếp cận với flexbox trước tiên, nhưng tôi cũng thấy mình tiếp cận với flexbox trước tiên trong quá trình phát triển web

Thực tế là ứng dụng cuối cùng tôi đặt ra, tôi đã làm hoàn toàn bằng flexbox. Tôi đã tìm thấy nó dễ dàng để sử dụng

Nếu bạn chưa biết nhiều về flex box. Tôi thích trang này cung cấp thông tin tốt về flexbox

Cách trình bày

Đầu tiên tôi bọc toàn bộ trang trong một div

<div class='some-page-wrapper'>
</div>

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Sau đó, tôi định nghĩa một lớp

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

1 và

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

2 có thể trợ giúp cho việc bố trí

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bây giờ nếu chúng ta muốn bố cục hai cột

<div class='some-page-wrapper'>
  <div class='row'>
    <div class='column'>
      <div class='blue-column'>
        Some Text in Column One
      </div>
    </div>
    <div class='column'>
      <div class='green-column'>
        Some Text in Column Two
      </div>
    </div>
  </div>
</div>

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

CSS trông giống như

.some-page-wrapper {
  margin: 15px;
  background-color: red;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.blue-column {
  background-color: blue;
  height: 100px;
}

.green-column {
  background-color: green;
  height: 100px;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Nếu chúng ta muốn thêm một cột thứ ba thì sao?

<div class='some-page-wrapper'>
  <div class='row'>
    <div class='column'>
      <div class='blue-column'>
        Some Text in Column One
      </div>
    </div>
    <div class='column'>
      <div class='green-column'>
        Some Text in Column Two
      </div>
    </div>
    <div class='column'>
      <div class='orange-column'>
        Some Text in Column Two
      </div>
    </div>
  </div>
</div>

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Và chúng tôi nhận được một cột thứ ba được thêm vào. Điều đó liền mạch lồng vào hàng của chúng tôi

Bây giờ nếu chúng ta muốn bố cục phức tạp hơn thì sao?

Chúng tôi chỉ có thể thêm nhiều hàng hơn, điều đó khá dễ dàng

<div class='some-page-wrapper'>
  <div class='row'>
    <div class='column'>
      <div class='orange-column'>
        Some Text in Column One
      </div>
    </div>
    <div class='column'>
      <div class='blue-column'>
        Some Text in Column Two
      </div>
    </div>
    <div class='column'>
      <div class='green-column'>
        Some Text in Column Three
      </div>
    </div>
  </div>
  <div class='row 2'>
    <div class='column'>
      <div class='green-column'>
        Some Text in Row 2, Column One
      </div>
    </div>
    <div class='column'>
      <div class='orange-column'>
        Some Text in Row 2, Column Two
      </div>
    </div>
    <div class='column'>
      <div class='blue-column'>
        Some Text in Row2, Column Three
      </div>
    </div>
  </div>
</div>

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Hoặc chúng ta có thể thay đổi kích thước các cột của mình

Để có cột đôi ta có thể thêm lớp

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

0. Tuy nhiên, điều này có thể hoạt động với bất kỳ cột có kích thước nào, bạn có thể thực hiện 60/40, bạn có thể thực hiện 10/10/10/10/10/10/10/10/10/10, thành thật mà nói, bất kỳ sự kết hợp nào cũng có thể thực hiện được ở đây. Bạn có thể làm 1 X 100. Hoặc 10 x 1, rồi 20 x 3, rồi 30 x 1. Các tùy chọn là vô tận

Trên một bố cục, tôi đã thêm một lề lớn xung quanh "cột" của mình và vì hàng sẽ bao xuống nên tôi có một hàng với bao nhiêu "cột" tùy ý. Các cột là các thẻ có chiều rộng cố định để chúng chỉ quấn sang dòng tiếp theo và hộp linh hoạt sẽ bọc các thẻ xuống màn hình một cách gọn gàng

.double-column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 2;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Điều này không phải là rất đáp ứng mặc dù?

Chỉ cần di chuyển

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

1 và

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

2 vào truy vấn phương tiện (kích thước tùy thuộc vào ứng dụng, tôi chỉ đưa ra một tùy chọn)

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

0

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Ở > 800px

Ở <800px

Codepen cuối cùng, gợi ý nhấp vào 1x hoặc 0. Các nút 5x ở góc dưới bên phải để thấy sự khác biệt trong cách bố trí "đáp ứng"

Về cơ bản, chúng tôi chỉ thổi bay hàng/cột bootstrap ra khỏi nước với 20 dòng CSS. Chúng tôi có một cách để tạo bố cục hàng/cột một cách nhanh chóng và vì chúng tôi sử dụng flexbox nên chúng tôi hầu như không phải lo lắng về việc bố cục bị hỏng hoặc bất kỳ điều gì sai sót. Nó dễ dàng thích nghi với nhiều mục đích sử dụng khác nhau và cho phép một lượng lớn khả năng tùy chỉnh. Cảm nhận của bạn về flexbox như thế nào?

Một lợi ích tiềm ẩn khác là nếu tôi bố trí các thành phần React theo cách này, thì việc bố trí các thành phần React-Native khá dễ dàng để trông giống nhau.

Cột và hàng trong CSS là gì?

Dòng giữa các cột được gọi là dòng cột. Các dòng giữa các hàng được gọi là dòng hàng .

Hàng CSS là gì?

Giới thiệu về Hàng CSS. Trong CSS, hàng là một trong những thuộc tính còn được gọi là thuộc tính tốc ký . Nó được sử dụng cho các trang web có các hàng được chỉ định lưới được bắt đầu và cho đến khi nó kết thúc vị trí để chỉ định kích thước và vị trí của mục dữ liệu lưới.

Làm cách nào để sử dụng các hàng trong CSS?

Thuộc tính tốc ký CSS hàng lưới chỉ định kích thước và vị trí của mục lưới trong hàng lưới bằng cách đóng góp một dòng, một khoảng hoặc không có gì (tự động) vào vị trí lưới của nó , .