Ai kiểm soát css?

Hướng dẫn chuyển nhượng Javascript

07/11/2022

Hướng dẫn bài tập Javascript bao gồm các yêu cầu và đầy đủ hướng dẫn thực hiện bài thực hành cho môn học Javascript cơ bản

---

YÊU CẦU JAVASCRIPT ASSIGNMENT

Hãy thực hiện 1 bài thực thi với code html, css, JavaScript theo 4 yêu cầu sau đây (Y1, Y2, Y3, Y4)

Y1. Yêu cầu về tổ chức mã

Tạo 1 folder có tên _HoTen_ASM để chứa toàn bộ code ASM

1. Các tập tin. html set ngay trong thư mục chứa mã đã tạo
2. Các tệp js được đặt trong thư mục con js
3. File css set in folder con css
4. Các tập tin thiết lập trong thư mục hình ảnh

Y2. Yêu cầu về viết mã

1. Tạo trang danh sách sản phẩm

Các sản phẩm trình bày như gợi ý trong hình , có thể chọn tùy ý. điện thoại, laptop, hoa, thú cưng, công nghệ, thời trang…

• thả chuột vào hình, các biểu tượng (chi tiết, giỏ hàng, thích) sẽ hiển thị
• thả chuột ra khỏi hình, các biểu tượng ẩn đi
• Nhấn vào biểu tượng giỏ hàng thì số lượng tăng lên
• Nhấn vào biểu tượng như thế thì đổi sang hình khác (diễn tả sản phẩm đã được thích)
• Chi tiết biểu tượng gõ sẽ chuyển sang trang chi tiết. html

2. Tạo thanh trượt (có điều khiển và xử lý điều khiển)

• Khi cài đặt icon Left sẽ hiện ảnh trước, nếu là ảnh đầu thì quay về ảnh cuối
• Khi cài đặt icon Right thì sẽ hiện ảnh sau, nếu là ảnh cuối thì quay về ảnh đầu
• Hiển thị chú thích của mỗi ảnh
• Tự động chuyển ảnh sau mỗi 5 giây

3. Tạo trang giỏ hàng

• Khi nhấp vào nút Tạo giỏ hàng, sẽ lưu vào sessionStorage danh sách các sản phẩm như sau

• Khi nhấp vào nút Xóa giỏ hàng sẽ xóa thông tin đã tạo bởi nút Tạo giỏ hàng
• Khi nhấp vào nút Hiển thị giỏ hàng, sẽ hiển thị danh sách các sản phẩm đang có trong sessionStorage , có tính tiền cho từng sản phẩm và tính tổng tiền giỏ hàng (xem hình trên)

Băng hình

4. Trang thanh toán và biểu mẫu kiểm tra lỗi

Create page thanhtoan. html as after và viết mã kiểm tra lỗi và báo lỗi như hình khi sử dụng nút Thanh toán

Y3. Sáng tạo thêm

Sinh viên chọn thực hiện bổ sung. Định vị địa lý, Phương tiện, Đồng hồ đếm ngược , định dạng, bổ sung chức năng…

Y4. Request about report

Viết một bài báo trình bày các chức năng đã thực hiện. Hoặc tạo 1 trang web trả lời các câu hỏi sau

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 không gian có sẵn một cách tốt nhất (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 là

.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 theo 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ẽ nằm 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 demo 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 ở cuối 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 mép 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 hà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 hàng với khoảng cách 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 hỗ trợ của trình duyệt cho các giá trị này là sắc thái. 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. Việc 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 kiểu định vị này như thế nào, 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 ________ 49 _______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 trọng 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, 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ó

.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 làm gì

.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 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) được ghi đè 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 cho bạn ý tưởng về những việc cần phải làm

.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 gồm 6 mục, tất cả đều có kích thước cố định nhưng có thể được định cỡ tự động. 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 đầu trang 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 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 đó