Không gian trong html w3schools

Question

Bắt đầu bằng cách bao gồm CSS và JavaScript sẵn sàng sản xuất của Bootstrap thông qua CDN mà không cần bất kỳ bước xây dựng nào. Xem nó trong thực tế với bản demo Bootstrap CodePen này

Tạo một tệp index.html mới trong thư mục gốc của dự án của bạn. Bao gồm cả thẻ để có hành vi phản hồi phù hợp trong thiết bị di động
```
  
    
    
    Bootstrap demo
  
  
    Hello, world!
  
```
Bao gồm CSS và JS của Bootstrap. Đặt thẻ ________ 159 _______ trong CSS của chúng tôi và thẻ ________ 159 _______
Bạn cũng có thể bao gồm Popper và JS của chúng tôi một cách riêng biệt. Nếu bạn không định sử dụng danh sách thả xuống, cửa sổ bật lên hoặc chú giải công cụ, hãy tiết kiệm một số kilobyte bằng cách không bao gồm Popper
Chào thế giới. Mở trang trong trình duyệt bạn chọn để xem trang Bootstrapped của bạn. Giờ đây, bạn có thể bắt đầu xây dựng với Bootstrap bằng cách tạo bố cục của riêng mình, thêm hàng chục thành phần và sử dụng các ví dụ chính thức của chúng tôi

Để tham khảo, đây là các liên kết CDN chính của chúng tôi

DescriptionURLCSShttps://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.cssJS

0

Bạn cũng có thể sử dụng CDN để tìm nạp bất kỳ bản dựng bổ sung nào của chúng tôi được liệt kê trong trang Nội dung

Bước tiếp theo

thành phần JS

Tò mò không biết thành phần nào yêu cầu JavaScript và Popper của chúng tôi một cách rõ ràng? . Nếu bạn hoàn toàn không chắc chắn về cấu trúc trang chung, hãy tiếp tục đọc mẫu trang mẫu

Hiển thị các thành phần yêu cầu JavaScript

Cảnh báo sa thải
Các nút để chuyển trạng thái và chức năng hộp kiểm/radio
Băng chuyền cho tất cả các hành vi, điều khiển và chỉ báo của trang trình bày
Thu gọn để chuyển đổi mức độ hiển thị của nội dung
Danh sách thả xuống để hiển thị và định vị (cũng yêu cầu Popper)
Các phương thức để hiển thị, định vị và hành vi cuộn
Thanh điều hướng để mở rộng các plugin Thu gọn và Offcanvas của chúng tôi để triển khai các hành vi phản hồi
Điều hướng với plugin Tab để chuyển đổi bảng nội dung
Offcanvases để hiển thị, định vị và hành vi cuộn
Scrollspy cho hành vi cuộn và cập nhật điều hướng
Chúc mừng để hiển thị và loại bỏ
Chú giải công cụ và cửa sổ bật lên để hiển thị và định vị (cũng yêu cầu Popper)

Toàn cầu quan trọng

Bootstrap sử dụng một số kiểu và cài đặt toàn cầu quan trọng, tất cả đều hầu như chỉ hướng tới việc chuẩn hóa các kiểu trình duyệt chéo. Hãy đi sâu vào

loại tài liệu HTML5

Bootstrap yêu cầu sử dụng loại tài liệu HTML5. Không có nó, bạn sẽ thấy một số kiểu dáng ngộ nghĩnh và không đầy đủ

...

Bootstrap được phát triển trên thiết bị di động trước, một chiến lược trong đó chúng tôi tối ưu hóa mã cho thiết bị di động trước rồi sau đó mở rộng quy mô các thành phần khi cần bằng truy vấn phương tiện CSS. Để đảm bảo hiển thị phù hợp và thu phóng cảm ứng cho tất cả các thiết bị, hãy thêm thẻ meta chế độ xem đáp ứng vào của bạn

Bạn có thể xem một ví dụ về điều này trong thực tế

kích thước hộp

Để định cỡ đơn giản hơn trong CSS, chúng tôi chuyển giá trị toàn cầu

1 từ

2 thành

3. Điều này đảm bảo

4 không ảnh hưởng đến chiều rộng được tính toán cuối cùng của phần tử, nhưng nó có thể gây ra sự cố với một số phần mềm của bên thứ ba như Google Maps và Công cụ tìm kiếm tùy chỉnh của Google

Trong trường hợp hiếm hoi, bạn cần ghi đè lên nó, hãy sử dụng một cái gì đó như sau

.selector-for-some-widget {
  box-sizing: content-box;
}

Với đoạn mã trên, các phần tử lồng nhau—bao gồm cả nội dung được tạo thông qua

5 và

6—tất cả sẽ kế thừa

1 đã chỉ định cho

8 đó

Tìm hiểu thêm về mô hình hộp và kích thước tại Thủ thuật CSS

khởi động lại

Để cải thiện khả năng hiển thị trên nhiều trình duyệt, chúng tôi sử dụng Khởi động lại để sửa lỗi không nhất quán giữa các trình duyệt và thiết bị đồng thời cung cấp các thiết lập lại có chủ ý hơn một chút cho các thành phần HTML phổ biến

Luôn cập nhật về sự phát triển của Bootstrap và tiếp cận cộng đồng với những tài nguyên hữu ích này

Ví dụ

viết HTML

học web chuẩn

Show the browser when not have CSS

học web chuẩn

viết CSS

p.capitalizeText {
    text-transform: capitalize;
}

p.uppercaseText {
    text-transform: uppercase;
}

p.lowercaseText {
    text-transform: lowercase;
}

Show the browser when has CSS

học web chuẩn

Mô-đun

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

9 (Hộp linh hoạt) (Đề xuất của Ứng viên W3C kể từ tháng 10 năm 2017) nhằm mục đích cung cấp một cách hiệu quả hơn để bố trí, căn chỉnh và phân phối không gian giữa các vật phẩm trong một thùng chứa, ngay cả khi kích thước của chúng không xác định và/hoặc động (do đó

Ý tưởng chính đằng sau bố cục linh hoạt là cung cấp cho vùng chứa khả năng thay đổi chiều rộng/chiều cao (và thứ tự) của các mục của nó để lấp đầy tốt nhất không gian có sẵn (hầu hết để phù hợp với tất cả các loại thiết bị hiển thị và kích thước màn hình). Hộp chứa linh hoạt mở rộng các mục để lấp đầy không gian trống có sẵn hoặc thu nhỏ chúng để tránh tràn

Quan trọng nhất, bố cục flexbox không theo hướng trái ngược với bố cục thông thường (khối dựa trên chiều dọc và nội tuyến dựa trên chiều ngang). Mặc dù chúng hoạt động tốt cho các trang, nhưng chúng thiếu tính linh hoạt (không có ý định chơi chữ) để hỗ trợ các ứng dụng lớn hoặc phức tạp (đặc biệt là khi thay đổi hướng, thay đổi kích thước, kéo dài, thu nhỏ, v.v. )

Ghi chú. Bố cục Flexbox phù hợp nhất với các thành phần của ứng dụng và bố cục quy mô nhỏ, trong khi bố cục Lưới dành cho bố cục tỷ lệ lớn hơn

Khái niệm cơ bản và thuật ngữ

Vì flexbox là toàn bộ mô-đun và không phải là một thuộc tính duy nhất, nên nó liên quan đến rất nhiều thứ bao gồm toàn bộ tập hợp các thuộc tính của nó. Một số trong số chúng có nghĩa là được đặt trên bộ chứa (phần tử cha, được gọi là “bộ chứa linh hoạt”) trong khi những cái khác có nghĩa là được đặt trên phần tử con (được gọi là “các mục linh hoạt”)

Nếu bố cục “thông thường” dựa trên cả hướng dòng khối và dòng nội tuyến, thì bố cục linh hoạt dựa trên “hướng dòng chảy linh hoạt”. Vui lòng xem con số này từ thông số kỹ thuật, giải thích ý tưởng chính đằng sau bố cục linh hoạt

Các hạng mục sẽ được sắp xếp theo hoặc trục

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

0 (từ

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

1 đến

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

2) hoặc trục chéo (từ

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

3 đến

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

4)

trục chính – Trục chính của hộp chứa linh hoạt là trục chính dọc theo đó các mục linh hoạt được bố trí. Hãy coi chừng, nó không nhất thiết phải nằm ngang;
khởi động chính. main-end – Các mục flex được đặt trong vùng chứa bắt đầu từ main-start và đi đến main-end
kích thước chính – Chiều rộng hoặc chiều cao của vật phẩm linh hoạt, tùy theo kích thước nào trong kích thước chính, là kích thước chính của vật phẩm. Thuộc tính kích thước chính của mục linh hoạt là thuộc tính 'chiều rộng' hoặc 'chiều cao', tùy theo thuộc tính nào trong kích thước chính
trục chéo – Trục vuông góc với trục chính được gọi là trục chéo. Hướng của nó phụ thuộc vào hướng trục chính
bắt đầu chéo. kết thúc chéo – Các đường linh hoạt được lấp đầy với các vật phẩm và được đặt vào thùng chứa bắt đầu từ phía bắt đầu chéo của thùng chứa linh hoạt và đi về phía kết thúc chéo
kích thước chéo – Chiều rộng hoặc chiều cao của một vật phẩm linh hoạt, tùy theo kích thước nào trong kích thước chéo, là kích thước chéo của vật phẩm. Thuộc tính kích thước chéo là thuộc tính 'chiều rộng' hoặc 'chiều cao' có trong kích thước chéo

Thuộc tính hộp linh hoạt

Thuộc tính cho cha mẹ(hộp đựng linh hoạt)

trưng bày

Điều này xác định một thùng chứa linh hoạt; . Nó cho phép một bối cảnh linh hoạt cho tất cả các phần tử con trực tiếp của nó

.container {
  display: flex; /* or inline-flex */
}

Lưu ý rằng các cột CSS không có tác dụng đối với bộ chứa flex

hướng uốn

Điều này thiết lập trục chính, do đó xác định các mục flex hướng được đặt trong hộp chứa flex. Flexbox (ngoài gói tùy chọn) là một khái niệm bố cục một hướng. Hãy coi các mục linh hoạt chủ yếu được bố trí theo hàng ngang hoặc cột dọc

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

6 (mặc định). trái sang phải trong

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

7;

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

9. phải sang trái trong

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

7;

.container {
  flex-flow: column wrap;
}

2. giống như

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

6 nhưng từ trên xuống dưới

.container {
  flex-flow: column wrap;
}

4. giống như

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

9 nhưng từ dưới lên trên

uốn dẻo

Theo mặc định, tất cả các mục linh hoạt sẽ cố gắng vừa với một dòng. Bạn có thể thay đổi điều đó và cho phép các mục được bọc khi cần với thuộc tính này

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

```
.container {
  flex-flow: column wrap;
}
```
6 (mặc định). tất cả các mục linh hoạt sẽ ở trên một dòng
```
.container {
  flex-flow: column wrap;
}
```
7. các mục flex sẽ bao thành nhiều dòng, từ trên xuống dưới
```
.container {
  flex-flow: column wrap;
}
```
8. các mục flex sẽ bao thành nhiều dòng từ dưới lên trên

Có một số bản trình diễn trực quan của

.container {
  flex-flow: column wrap;
}

9 tại đây

dòng chảy linh hoạt

Đây là cách viết tắt của các thuộc tính

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

5 và

.container {
  flex-flow: column wrap;
}

9, cùng xác định trục chính và trục chéo của bộ chứa flex. Giá trị mặc định là

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right .. + safe | unsafe;
}

2

.container {
  flex-flow: column wrap;
}

biện minh cho nội dung

Điều này xác định sự liên kết dọc theo trục chính. Nó giúp phân phối thêm không gian trống còn lại khi tất cả các mục linh hoạt trên một dòng không linh hoạt hoặc linh hoạt nhưng đã đạt đến kích thước tối đa của chúng. Nó cũng thực hiện một số kiểm soát đối với việc căn chỉnh các mục khi chúng tràn ra khỏi dòng

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right .. + safe | unsafe;
}

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right .. + safe | unsafe;
}

3 (mặc định). các mặt hàng được đóng gói về phía đầu của hướng linh hoạt

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right .. + safe | unsafe;
}

4. các mặt hàng được đóng gói về phía cuối của flex-direction

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right .. + safe | unsafe;
}

5. các mặt hàng được đóng gói về phía đầu của hướng

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right .. + safe | unsafe;
}

6

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right .. + safe | unsafe;
}

7. các mặt hàng được đóng gói về phía cuối của hướng

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right .. + safe | unsafe;
}

6

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right .. + safe | unsafe;
}

9. các mặt hàng được đóng gói về phía bên trái của thùng chứa, trừ khi điều đó không hợp lý với

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

5, thì nó sẽ hoạt động như

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right .. + safe | unsafe;
}

5

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + .. safe | unsafe;
}

2. các mặt hàng được đóng gói về phía mép phải của thùng chứa, trừ khi điều đó không hợp lý với

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

5, thì nó sẽ hoạt động như

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right .. + safe | unsafe;
}

7

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + .. safe | unsafe;
}

5. các mục được căn giữa dọc theo dòng

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + .. safe | unsafe;
}

6. các mặt hàng được phân bổ đều trong dòng;

```
.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + .. safe | unsafe;
}
```
7. các mặt hàng được phân bổ đều trong dòng với không gian bằng nhau xung quanh chúng. Lưu ý rằng về mặt trực quan, các khoảng trống không bằng nhau vì tất cả các mục đều có khoảng cách bằng nhau ở cả hai bên. Mục đầu tiên sẽ có một đơn vị khoảng cách so với cạnh vùng chứa, nhưng hai đơn vị khoảng cách giữa mục tiếp theo vì mục tiếp theo đó có khoảng cách riêng được áp dụng

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + .. safe | unsafe;
}

8. các mục được phân phối sao cho khoảng cách giữa hai mục bất kỳ (và khoảng cách đến các cạnh) bằng nhau

Lưu ý rằng sự hỗ trợ của trình duyệt cho các giá trị này là khác nhau. Ví dụ:

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + .. safe | unsafe;
}

6 chưa bao giờ nhận được hỗ trợ từ một số phiên bản Edge và bắt đầu/kết thúc/trái/phải chưa có trong Chrome. MDN có biểu đồ chi tiết. Các giá trị an toàn nhất là

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right .. + safe | unsafe;
}

3,

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right .. + safe | unsafe;
}

4 và

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + .. safe | unsafe;
}

5

Ngoài ra còn có hai từ khóa bổ sung mà bạn có thể ghép nối với các giá trị này.

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + .. safe | unsafe;
}

3 và

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + .. safe | unsafe;
}

4. Sử dụng

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + .. safe | unsafe;
}

3 đảm bảo rằng dù bạn thực hiện loại định vị này, bạn không thể đẩy một phần tử sao cho phần tử đó hiển thị ngoài màn hình (e. g. ngoài đầu trang) theo cách mà nội dung cũng không thể cuộn được (được gọi là "mất dữ liệu")

sắp xếp các mục

Điều này xác định hành vi mặc định cho cách các mục linh hoạt được bố trí dọc theo trục chéo trên dòng hiện tại. Hãy nghĩ về nó như phiên bản

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + .. safe | unsafe;
}

6 cho trục chéo (vuông góc với trục chính)

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + .. safe | unsafe;
}

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + .. safe | unsafe;
}

7 (mặc định). kéo dài để lấp đầy vùng chứa (vẫn tôn trọng chiều rộng tối thiểu/chiều rộng tối đa)

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right .. + safe | unsafe;
}

3 /

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right .. + safe | unsafe;
}

5 /

.container {
  display: flex;
  ...
  gap: 10px;
  gap: 10px 20px; /* row-gap column gap */
  row-gap: 10px;
  column-gap: 20px;
}

0. các mục được đặt ở đầu trục chéo. Sự khác biệt giữa những điều này là tinh tế và liên quan đến việc tôn trọng các quy tắc

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

5 hoặc quy tắc

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right .. + safe | unsafe;
}

6

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right .. + safe | unsafe;
}

4 /

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right .. + safe | unsafe;
}

7 /

.container {
  display: flex;
  ...
  gap: 10px;
  gap: 10px 20px; /* row-gap column gap */
  row-gap: 10px;
  column-gap: 20px;
}

5. các mục được đặt ở cuối trục chéo. Sự khác biệt một lần nữa là tinh tế và là về việc tôn trọng các quy tắc

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

5 so với.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right .. + safe | unsafe;
}

6 quy tắc

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + .. safe | unsafe;
}

5. các mục được căn giữa trong trục chéo

.container {
  display: flex;
  ...
  gap: 10px;
  gap: 10px 20px; /* row-gap column gap */
  row-gap: 10px;
  column-gap: 20px;
}

9. các mục được căn chỉnh chẳng hạn như căn chỉnh đường cơ sở của chúng

Các từ khóa bổ trợ

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + .. safe | unsafe;
}

3 và

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + .. safe | unsafe;
}

4 có thể được sử dụng cùng với tất cả các từ khóa còn lại này (mặc dù hỗ trợ trình duyệt lưu ý) và giải quyết việc giúp bạn ngăn chặn các yếu tố căn chỉnh khiến nội dung không thể truy cập được

căn chỉnh nội dung

Thao tác này sẽ căn chỉnh các dòng của bộ chứa linh hoạt bên trong khi có thêm khoảng trống trong trục chéo, tương tự như cách

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + .. safe | unsafe;
}

6 căn chỉnh các mục riêng lẻ trong trục chính

Ghi chú. Thuộc tính này chỉ có hiệu lực đối với các thùng chứa linh hoạt nhiều dòng, trong đó

.container {
  flex-flow: column wrap;
}

9 được đặt thành

.container {
  flex-flow: column wrap;
}

7 hoặc

.container {
  flex-flow: column wrap;
}

8). Vùng chứa linh hoạt một dòng (i. e. trong đó

.container {
  flex-flow: column wrap;
}

9 được đặt thành giá trị mặc định,

.item {
  order: 5; /* default is 0 */
}

7) sẽ không phản ánh

.item {
  order: 5; /* default is 0 */
}

8

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + .. safe | unsafe;
}

```
.item {
  order: 5; /* default is 0 */
}
```
9 (mặc định). các mặt hàng được đóng gói ở vị trí mặc định như thể không có giá trị nào được đặt

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right .. + safe | unsafe;
}

3 /

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right .. + safe | unsafe;
}

5. các mặt hàng được đóng gói đến đầu container. (được hỗ trợ nhiều hơn)

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right .. + safe | unsafe;
}

3 tôn vinh

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

5 trong khi

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right .. + safe | unsafe;
}

5 tôn vinh hướng của

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right .. + safe | unsafe;
}

6

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right .. + safe | unsafe;
}

4 /

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right .. + safe | unsafe;
}

7. các mặt hàng được đóng gói đến cuối container. (hỗ trợ thêm)

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right .. + safe | unsafe;
}

4 tôn vinh

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

5 trong khi phần cuối tôn vinh hướng

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right .. + safe | unsafe;
}

6

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + .. safe | unsafe;
}

5. các mục được căn giữa trong vùng chứa

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + .. safe | unsafe;
}

6. mặt hàng phân bố đều;

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + .. safe | unsafe;
}

7. các mục được phân bổ đều với khoảng cách bằng nhau xung quanh mỗi dòng

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + .. safe | unsafe;
}

8. các vật phẩm được phân bổ đều với không gian bằng nhau xung quanh chúng

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + .. safe | unsafe;
}

7. các dòng kéo dài để chiếm không gian còn lại

Các từ khóa bổ trợ

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + .. safe | unsafe;
}

3 và

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + .. safe | unsafe;
}

4 có thể được sử dụng cùng với tất cả các từ khóa còn lại này (mặc dù hỗ trợ trình duyệt lưu ý) và giải quyết việc giúp bạn ngăn chặn các yếu tố căn chỉnh khiến nội dung không thể truy cập được

khoảng cách, khoảng cách hàng, khoảng cách cột

Thuộc tính

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

08 kiểm soát rõ ràng khoảng cách giữa các mục flex. Nó chỉ áp dụng khoảng cách giữa các mục không ở các cạnh bên ngoài

.container {
  display: flex;
  ...
  gap: 10px;
  gap: 10px 20px; /* row-gap column gap */
  row-gap: 10px;
  column-gap: 20px;
}

Hành vi này có thể được coi là một máng xối tối thiểu, như thể máng xối lớn hơn bằng cách nào đó (vì một cái gì đó như

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

09) thì khoảng cách sẽ chỉ có hiệu lực nếu không gian đó sẽ nhỏ hơn

Nó không dành riêng cho flexbox,

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

08 cũng hoạt động trong bố cục dạng lưới và nhiều cột

Thuộc tính cho trẻ em(mặt hàng linh hoạt)

gọi món

Theo mặc định, các mục linh hoạt được sắp xếp theo thứ tự nguồn. Tuy nhiên, thuộc tính

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

11 kiểm soát thứ tự xuất hiện trong hộp chứa linh hoạt

.item {
  order: 5; /* default is 0 */
}

Các mặt hàng có cùng

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

11 hoàn nguyên về thứ tự ban đầu

uốn cong

Điều này xác định khả năng cho một vật phẩm linh hoạt phát triển nếu cần thiết. Nó chấp nhận một giá trị không có đơn vị đóng vai trò là một tỷ lệ. Nó cho biết lượng không gian có sẵn bên trong thùng chứa linh hoạt mà vật phẩm sẽ chiếm

Nếu tất cả các đồ vật có

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

13 được đặt thành

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

14, thì chỗ trống còn lại trong hộp đựng sẽ được chia đều cho tất cả trẻ em. Nếu một trong các phần tử con có giá trị là

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

15, thì phần tử con đó sẽ chiếm gấp đôi dung lượng của một trong hai phần tử còn lại (hoặc ít nhất nó sẽ cố gắng)

.item {
  flex-grow: 4; /* default 0 */
}

Số âm không hợp lệ

uốn cong

Điều này xác định khả năng co lại của một vật phẩm linh hoạt nếu cần thiết

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

0

Số âm không hợp lệ

cơ sở linh hoạt

Điều này xác định kích thước mặc định của một phần tử trước khi không gian còn lại được phân phối. Nó có thể là một chiều dài (e. g. 20%, 5rem, v.v. ) hoặc một từ khóa. Từ khóa

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

16 có nghĩa là “xem thuộc tính chiều rộng hoặc chiều cao của tôi” (được thực hiện tạm thời bởi từ khóa

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

17 cho đến khi không dùng nữa). Từ khóa

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

18 có nghĩa là “kích thước dựa trên nội dung của mặt hàng” – từ khóa này chưa được hỗ trợ tốt nên khó kiểm tra và khó biết những người anh em của nó là

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

19,

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

20 và

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

21

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

1

Nếu được đặt thành

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

22, khoảng trống thừa xung quanh nội dung không được tính vào. Nếu được đặt thành

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

16, khoảng trống thừa sẽ được phân phối dựa trên giá trị

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

13 của nó. Xem đồ họa này

uốn cong

Đây là cách viết tắt của

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

25

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

26 và

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

27 kết hợp. Tham số thứ hai và thứ ba (

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

26 và

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

27) là tùy chọn. Giá trị mặc định là

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

30, nhưng nếu bạn đặt nó với một giá trị số duy nhất, chẳng hạn như

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

31, điều đó sẽ thay đổi

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

27 thành 0%, do đó, nó giống như đặt

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

33

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

2

Bạn nên sử dụng thuộc tính tốc ký này thay vì đặt các thuộc tính riêng lẻ. Tốc ký đặt các giá trị khác một cách thông minh

tự sắp xếp

Điều này cho phép ghi đè căn chỉnh mặc định (hoặc căn chỉnh được chỉ định bởi

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

34) cho các mục linh hoạt riêng lẻ

Vui lòng xem giải thích

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

34 để hiểu các giá trị khả dụng

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

3

Lưu ý rằng

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

36,

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

37 và

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

38 không ảnh hưởng đến vật phẩm linh hoạt

Tiền tố Flexbox

Flexbox yêu cầu một số tiền tố của nhà cung cấp để hỗ trợ hầu hết các trình duyệt có thể. Nó không chỉ bao gồm các thuộc tính thêm trước với tiền tố nhà cung cấp, mà thực tế còn có các tên thuộc tính và giá trị hoàn toàn khác nhau. Điều này là do thông số Flexbox đã thay đổi theo thời gian, tạo ra các phiên bản “cũ”, “tweener” và “mới”

Có lẽ cách tốt nhất để xử lý việc này là viết theo cú pháp mới (và cuối cùng) và chạy CSS của bạn thông qua Autoprefixer, xử lý các dự phòng rất tốt

Ngoài ra, đây là một Sass

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

39 để trợ giúp với một số tiền tố, điều này cũng cung cấp cho bạn ý tưởng về loại công việc nào cần được thực hiện

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

4

ví dụ

Hãy bắt đầu với một ví dụ rất đơn giản, giải quyết một vấn đề gần như hàng ngày. định tâm hoàn hảo. Không thể đơn giản hơn nếu bạn sử dụng flexbox

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

5

Điều này dựa trên thực tế là lề được đặt thành

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

16 trong hộp chứa linh hoạt sẽ hấp thụ thêm không gian. Vì vậy, đặt lề là

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

16 sẽ làm cho mục được căn giữa hoàn hảo ở cả hai trục

Bây giờ hãy sử dụng một số thuộc tính khác. Xem xét danh sách 6 mục, tất cả đều có kích thước cố định nhưng có thể được tự động định kích thước. Chúng tôi muốn chúng được phân bổ đều trên trục ngang để khi chúng tôi thay đổi kích thước trình duyệt, mọi thứ sẽ được chia tỷ lệ đẹp mắt và không có truy vấn phương tiện

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

6

Xong. Mọi thứ khác chỉ là một số mối quan tâm về kiểu dáng. Dưới đây là bút tích ví dụ này. Đảm bảo truy cập CodePen và thử thay đổi kích thước cửa sổ của bạn để xem điều gì sẽ xảy ra

Dự phòng nhúng CodePen

Hãy thử một cái gì đó khác. Hãy tưởng tượng rằng chúng tôi có một yếu tố điều hướng được căn phải ở trên cùng của trang web của chúng tôi, nhưng chúng tôi muốn nó được căn giữa trên các màn hình cỡ trung bình và một cột trên các thiết bị nhỏ. Vừa đủ dễ

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

7

Dự phòng nhúng CodePen

Hãy thử một cái gì đó thậm chí còn tốt hơn bằng cách chơi với tính linh hoạt của vật phẩm linh hoạt. Thế còn bố cục 3 cột ưu tiên thiết bị di động với tiêu đề và chân trang có chiều rộng đầy đủ thì sao?. Và độc lập với thứ tự nguồn

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

8

Dự phòng nhúng CodePen

Thủ thuật Flexbox

Bài viết ngày 3 tháng 10 năm 2019

Bố cục ảnh thích ứng với Flexbox

bố cục flexbox

Tim Van Damme

Bài viết ngày 9 tháng 10 năm 2020

Cân bằng trên một Pivot với Flexbox

bố cục flexbox

Julian Merkenich

Bài viết ngày 21/07/2020

Sử dụng Flexbox và dấu chấm lửng văn bản cùng nhau

bố cục flexbox

Chris Coyier

Bài viết ngày 19/02/2016

Kỹ thuật Flexbox hữu ích. Gói dịch chuyển căn chỉnh

bố cục flexbox

Chris Coyier

Bài viết ngày 23/02/2017

Thiết kế bố cục trang sản phẩm với Flexbox

bố cục flexbox

Levin Mejia

Bài viết ngày 8 tháng 2 năm 2017

Flexbox và văn bản bị cắt bớt

bố cục flexbox

Chris Coyier

Bài viết ngày 18 tháng 3 năm 2020

Flexbox và định vị tuyệt đối

bố cục flexbox

Chris Coyier

Bài viết ngày 10 tháng 3 năm 2014

Lấp đầy khoảng trống ở hàng cuối cùng bằng Flexbox

bố cục flexbox

Chris Coyier

hỗ trợ trình duyệt

Dữ liệu hỗ trợ trình duyệt này đến từ , có nhiều chi tiết hơn. Một số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên

máy tính để bàn

ChromeFirefoxIEEdgeSafari21*2811126.1*

Di động / Máy tính bảng

Android ChromeAndroid FirefoxAndroidiOS Safari109< . 41074.47. 0-7. 1*

lỗi

Flexbox chắc chắn không phải không có lỗi. Bộ sưu tập hay nhất trong số chúng mà tôi từng xem là Flexbugs của Philip Walton và Greg Whitworth. Đó là một nơi mã nguồn mở để theo dõi tất cả chúng, vì vậy tôi nghĩ tốt nhất là chỉ liên kết đến đó

programming html

Không gian trong html w3schools

Bước tiếp theo

thành phần JS

Toàn cầu quan trọng

loại tài liệu HTML5

kích thước hộp

khởi động lại

Ví dụ

viết HTML

Show the browser when not have CSS

viết CSS

Show the browser when has CSS

Khái niệm cơ bản và thuật ngữ

Thuộc tính hộp linh hoạt

Thuộc tính cho cha mẹ(hộp đựng linh hoạt)

trưng bày

hướng uốn

uốn dẻo

dòng chảy linh hoạt

biện minh cho nội dung

sắp xếp các mục

căn chỉnh nội dung

khoảng cách, khoảng cách hàng, khoảng cách cột

Thuộc tính cho trẻ em(mặt hàng linh hoạt)

gọi món

uốn cong

uốn cong

cơ sở linh hoạt

uốn cong

tự sắp xếp

Tiền tố Flexbox

ví dụ

Thủ thuật Flexbox

Bố cục ảnh thích ứng với Flexbox

Cân bằng trên một Pivot với Flexbox

Sử dụng Flexbox và dấu chấm lửng văn bản cùng nhau

Kỹ thuật Flexbox hữu ích. Gói dịch chuyển căn chỉnh

Thiết kế bố cục trang sản phẩm với Flexbox

Flexbox và văn bản bị cắt bớt

Flexbox và định vị tuyệt đối

Lấp đầy khoảng trống ở hàng cuối cùng bằng Flexbox

hỗ trợ trình duyệt

máy tính để bàn

Di động / Máy tính bảng

lỗi

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội