Sự khác biệt giữa nội dung căn chỉnh và mục căn chỉnh là gì?

Ai đó có thể cho tôi thấy sự khác biệt giữa align-itemsvà align-content?

Các align-itemstài sản của flex-box gắn các mục bên trong một container flex dọc theo trục chéo giống như justify-contentthực hiện dọc theo trục chính. (Đối với mặc định flex-direction: row, trục chéo tương ứng với trục dọc và trục chính tương ứng với chiều ngang. Với flex-direction: columnhai trục này được hoán đổi tương ứng).

Đây là một ví dụ về cách align-items:centernhìn:

Nhưng align-contentlà cho hộp linh hoạt nhiều dòng. Nó không có hiệu lực khi các mục nằm trong một dòng duy nhất. Nó căn chỉnh toàn bộ cấu trúc theo giá trị của nó. Đây là một ví dụ cho align-content: space-around;:

Và dưới đây là cách align-content: space-around;có align-items:centervẻ:

Lưu ý hộp thứ 3 và tất cả các hộp khác trong dòng đầu tiên thay đổi thành trung tâm theo chiều dọc trong dòng đó.

Dưới đây là một số liên kết codepen để chơi với:

http://codepen.io/asim-coder/pen/MKQWbb

http://codepen.io/asim-coder/pen/WrMNWR

Đây là một cây bút siêu tuyệt vời cho thấy và cho phép bạn chơi với hầu hết mọi thứ trong flexbox.

Tôi thấy ví dụ http://flexboxfroggy.com/ rất hữu ích.

Bạn sẽ mất 10-20 phút và ở cấp 21, bạn sẽ tìm thấy câu trả lời cho câu hỏi của mình. Nó đã đề cập:

align-content xác định khoảng cách giữa các dòng, trong khi align-item xác định cách các mục tổng thể được căn chỉnh trong container. Khi chỉ có một dòng, nội dung căn chỉnh không có hiệu lực

Đầu tiên, align-itemslà cho các mục trong một hàng duy nhất. Vì vậy, đối với một hàng các phần tử trên trục chính , align-itemssẽ căn chỉnh các mục này tương ứng với nhau và nó sẽ bắt đầu với phối cảnh mới từ hàng tiếp theo.

Bây giờ, align-contentkhông can thiệp vào các mục trong một hàng nhưng với chính các hàng . Do đó, align-contentsẽ cố gắng sắp xếp các hàng liên quan đến nhau và thùng chứa flex.

Kiểm tra câu đố này: https://jsfiddle.net/htym5zkn/8/

Tôi đã có sự nhầm lẫn tương tự. Sau vài lần mày mò dựa trên nhiều câu trả lời ở trên, cuối cùng tôi cũng có thể thấy sự khác biệt. Theo ý kiến ​​khiêm tốn của tôi, sự khác biệt được thể hiện rõ nhất với một thùng chứa flex thỏa mãn hai điều kiện sau:

1. Bản thân thùng chứa flex có giới hạn chiều cao (ví dụ min-height: 60rem:) và do đó có thể trở nên quá cao so với nội dung của nó
2. Các mặt hàng con trong hộp có chiều cao không đồng đều

Điều kiện 1 giúp tôi hiểu những gì contentcó nghĩa là liên quan đến container mẹ của nó. Khi nội dung được tuôn ra với container, chúng tôi sẽ không thể thấy bất kỳ hiệu ứng định vị nào đến từ align-content. Chỉ đến khi chúng ta có thêm không gian dọc theo trục chéo, chúng ta mới bắt đầu thấy tác dụng của nó: Nó căn chỉnh nội dung liên quan đến ranh giới của thùng chứa mẹ.

Điều kiện 2 giúp tôi hình dung ra các tác động của align-items: nó sắp xếp các mục tương đối với nhau.

Đây là một ví dụ mã. Nguyên liệu thô đến từ hướng dẫn Lưới CSS của Wes Bos (21. Flexbox so với CSS Grid)

• Ví dụ HTML:

  <div class="flex-container">
    <div class="item">Short</div>
    <div class="item">Longerrrrrrrrrrrrrr</div>
    <div class="item">💩</div>
    <div class="item" id="tall">This is Many Words</div>
    <div class="item">Lorem, ipsum.</div>
    <div class="item">10</div>
    <div class="item">Snickers</div>
    <div class="item">Wes Is Cool</div>
    <div class="item">Short</div>
  </div>

• Ví dụ CSS:

.flex-container {
  display: flex;
  /*dictates a min-height*/
  min-height: 60rem;
  flex-flow: row wrap;
  border: 5px solid white;
  justify-content: center;
  align-items: center;
  align-content: flex-start;
 }

#tall {
  /*intentionally made tall*/
  min-height: 30rem;
}

.item {
  margin: 10px;
  max-height: 10rem;
}

Ví dụ 1 : Chúng ta hãy thu hẹp khung nhìn để nội dung được tuôn ra với vùng chứa. Đây là khi align-content: flex-start;không có hiệu ứng vì toàn bộ khối nội dung nằm gọn trong thùng chứa (không có thêm chỗ để định vị lại!)

Ngoài ra, lưu ý hàng thứ 2 - xem cách các mục được căn giữa nhau.

Ví dụ 2 : Khi chúng tôi mở rộng khung nhìn, chúng tôi không còn đủ nội dung để lấp đầy toàn bộ vùng chứa. Bây giờ chúng ta bắt đầu thấy các hiệu ứng của align-content: flex-start;--it căn chỉnh nội dung liên quan đến cạnh trên của container.

Các ví dụ này dựa trên flexbox, nhưng các nguyên tắc tương tự được áp dụng cho lưới CSS. Hi vọng điêu nay co ich :)

Vâng, tôi đã kiểm tra chúng trên trình duyệt của tôi.

align-contentcó thể thay đổi chiều cao của một dòng cho hướng hàng hoặc chiều rộng cho cột khi nó giá trị rạn da, hoặc thêm không gian trống giữa hoặc xung quanh các đường cho space-between, space-around, flex-start, flex-end values.

align-itemscó thể thay đổi chiều cao vật phẩm hoặc vị trí bên trong khu vực của dòng. Khi các mặt hàng không được bọc, chúng chỉ có một dòng mà khu vực của nó luôn được kéo dài đến khu vực hộp uốn cong (ngay cả khi các mặt hàng bị tràn) và align-contentkhông có hiệu lực trên một dòng. Vì vậy, nó không có tác dụng đối với các vật phẩm không được bọc và chỉ align-itemscó thể thay đổi vị trí vật phẩm hoặc kéo dài chúng khi tất cả chúng nằm trên một dòng.

Tuy nhiên, nếu chúng được bọc, bạn có nhiều dòng và vật phẩm bên trong mỗi dòng. Và nếu tất cả các mục của mỗi dòng có cùng chiều cao (đối với hướng hàng) thì chiều cao của dòng đó sẽ bằng với chiều cao của các mục đó và bạn không thấy bất kỳ ảnh hưởng nào bằng cách thay đổi align-itemsgiá trị.

Vì vậy, nếu bạn muốn ảnh hưởng đến các mục bằng cách align-itemskhi các mục của bạn được bọc và có cùng chiều cao (đối với hướng hàng), trước tiên bạn phải sử dụng align-contentvới giá trị kéo dài để mở rộng vùng đường.

nội dung phù hợp

align-contentkiểm soát chéo trục (tức là hướng thẳng đứng nếu flex-directionlà row, và ngang nếu flex-directionlà column) vị trí của nhiều dòng tương đối với nhau.

(Nghĩ rằng các dòng của một đoạn được trải ra theo chiều dọc, xếp chồng lên trên cùng, xếp chồng xuống phía dưới. Đây là một flex-directionmô hình hàng).

vật phẩm

align-items điều khiển trục chéo của một dòng các phần tử flex.

(Hãy suy nghĩ làm thế nào một dòng riêng lẻ của một đoạn được căn chỉnh, nếu nó chứa một số văn bản bình thường và một số văn bản cao hơn như phương trình toán học. được căn chỉnh?)

Những gì tôi đã học được từ mỗi câu trả lời và truy cập blog là

trục chéo và trục chính là gì

• trục chính là hàng ngang và trục chéo là cột dọc - cho flex-direction: row
• trục chính là cột dọc và trục chéo là hàng ngang - cho flex-direction: column

Bây giờ align-content và align-item

align-content dành cho hàng, nó hoạt động nếu container có (nhiều hơn một hàng) Thuộc tính của align-content

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

align-items dành cho các mục trong hàng Thuộc tính của align-item

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

Để tham khảo thêm chuyến thăm đến flex

Sự khác biệt chính là khi chiều cao của các yếu tố không giống nhau! Sau đó, bạn có thể thấy làm thế nào trong hàng, tất cả chúng đều là trung tâm \ end \ start

theo những gì tôi hiểu từ đây :

khi bạn sử dụng align-item hoặc justify-item, bạn đang điều chỉnh "nội dung bên trong một mục lưới dọc theo trục cột hoặc trục hàng tương ứng.

Nhưng: nếu bạn sử dụng nội dung căn chỉnh hoặc nội dung biện minh, bạn đang đặt vị trí một lưới dọc theo trục cột hoặc trục hàng. nó xảy ra khi bạn có một lưới trong một thùng chứa lớn hơn và chiều rộng hoặc chiều cao là không linh hoạt (sử dụng px).