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

415
Dinh 2014-12-18 18:29.

Ai có thể chỉ cho tôi sự khác biệt giữa align-itemsalign-content?

8 answers

422
Asim K T 2016-01-23 00:40.

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 dọc và trục chính tương ứng với ngang. Với flex-direction: columnhai trục đó tương ứng với nhau).

Đây là một ví dụ về giao align-items:centerdiện:

Nhưng align-contentlà đối với 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. Nó sắp xếp 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à đây là cách align-content: space-around;với align-items:centerngoại hình:

Lưu ý rằng hộp thứ 3 và tất cả các hộp khác trong dòng đầu tiên thay đổi thành căn giữa theo chiều dọc của 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 thú vị hiển thị và cho phép bạn chơi với hầu hết mọi thứ trong flexbox.

109
Alireza Fattahi 2017-08-17 02:06.

Tôi thấy ví dụ tại 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-items xác định cách toàn bộ các mục được căn chỉnh trong vùng chứa. Khi chỉ có một dòng, căn chỉnh nội dung không có tác dụng

70
Uday Hiwarale 2016-05-30 00:46.

Đầu tiên, align-itemslà cho các mục trong một hàng. Vì vậy, đối với một hàng 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 mà với chính các hàng . Do đó, align-contentsẽ cố gắng căn chỉnh các hàng với nhau và linh hoạt vùng chứa.

Kiểm tra fiddle này: https://jsfiddle.net/htym5zkn/8/

25
Shan Dou 2018-12-27 13:00.

Tôi đã có cùng một sự nhầm lẫn. Sau khi mày mò dựa trên nhiều câu trả lời ở trên, cuối cùng tôi 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 chứng minh tốt nhất với một thùng chứa linh hoạt thỏa mãn hai điều kiện sau:

  1. Bản thân vùng chứa flex có giới hạn về 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 trẻ em đựng trong hộp có chiều cao không đồng đều

Điều kiện 1 giúp tôi hiểu ý contentnghĩa liên quan đến vùng chứa mẹ của nó. Khi nội dung nằm ngang với vùng chứa, chúng ta sẽ không thể thấy bất kỳ hiệu ứng định vị nào đến từ đó align-content. Chỉ 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 so với ranh giới của vùng chứa mẹ.

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


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

  • HTML mẫu:
  <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>
  • CSS mẫu:
.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 : Hãy thu hẹp khung nhìn để nội dung ngang bằng với vùng chứa. Đây là thời điểm align-content: flex-start;không có tác dụng nào vì toàn bộ khối nội dung được đặt vừa khít bên trong vùng chứa (không có thêm chỗ để định vị lại!)

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

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


Những 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 :)

13
TheNegative 2015-06-20 09:54.

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

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 hoặc vị trí của các mục bên trong khu vực của dòng. Khi các mục không được bọc, chúng chỉ có một dòng mà vùng của nó luôn được kéo dài đến vùng flex-box (ngay cả khi các mục bị tràn) và align-contentkhông ảnh hưởng đến một dòng. Vì vậy, nó không có tác dụng đối với các mục không được bọc và chỉ align-itemscó thể thay đổi vị trí của các mục 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à mục 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 chiều cao của các mục đó và bạn không thấy bất kỳ hiệu ứng nào khi thay đổi align-itemsgiá trị.

Vì vậy, nếu bạn muốn ảnh hưởng đến các mục 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ị giãn để mở rộng diện tích dòng.

9
ahnbizcad 2016-08-26 06:39.

căn chỉnh nội dung

align-contentđiều khiển trục chéo (nghĩa là hướng thẳng đứng nếu flex-directionrowvà nằm ngang nếu flex-directioncolumn) định vị của nhiều đường so với nhau.

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

căn chỉnh các mục

align-items điều khiển trục chéo của một dòng yếu tố flex riêng lẻ.

(Hãy nghĩ xem từng dòng riêng lẻ của đoạn văn được căn chỉnh như thế nào, 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ư các phương trình toán học. Trong trường hợp đó, nó sẽ là dòng dưới cùng, trên cùng hay chính giữa của mỗi loại văn bản trong một dòng sẽ được căn chỉnh?)

2
bajran 2020-05-04 19:53.

Điều tôi học được từ mỗi câu trả lời và ghé thăm 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ờ căn chỉnh nội dung và căn chỉnh các mục

align-content dành cho hàng, nó hoạt động nếu vùng chứa 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-items

.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, hãy truy cập vào flex

1
run_the_race 2020-06-23 00:35.

Sau khi đọc một số câu trả lời, họ xác định chính xác align-contentsẽ không ảnh hưởng gì nếu nội dung flex không được gói. Tuy nhiên, những gì họ không hiểu align-itemsvẫn đóng vai trò quan trọng khi có nội dung được bao bọc:

Trong hai ví dụ sau, align-itemsđược sử dụng để căn giữa các mục trong mỗi hàng, sau đó chúng ta thay đổi align-contentđể xem nó có hiệu lực.

Ví dụ 1:

align-content: flex-start;

Ví dụ 2:

    align-content: flex-end;

Đây là mã:

<div class="container">
    <div class="child" style="height: 30px;">1</div>
    <div class="child" style="height: 50px;">2</div>
    <div class="child" style="height: 60px;">3</div>
    <div class="child" style="height: 40px;">4</div>
    <div class="child" style="height: 50px;">5</div>
    <div class="child" style="height: 20px;">6</div>
    <div class="child" style="height: 90px;">7</div>
    <div class="child" style="height: 50px;">8</div>
    <div class="child" style="height: 30px;">9</div>
    <div class="child" style="height: 40px;">10</div>
    <div class="child" style="height: 30px;">11</div>
    <div class="child" style="height: 60px;">12</div>
</div>

<style>
.container {
    display: flex;
    width: 300px;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    align-content: flex-end;
    background: lightgray;
    height: 400px;
}
.child {
    padding: 12px;
    background: red;
    border: solid 1px black;
}
</style>

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

BoJack Horseman vẫn gan ruột và gan dạ hơn bao giờ hết trong phần 3

BoJack Horseman vẫn gan ruột và gan dạ hơn bao giờ hết trong phần 3

BoJack Horseman (Ảnh: Netflix) BoJack Horseman bắt đầu mùa thứ ba với sự xuất hiện của nhân vật tiêu biểu, người vẫn đang theo đuổi những lời khen ngợi từ giới phê bình trong một nỗ lực tuyệt vọng để tìm ra ý nghĩa trong cuộc sống của mình. Mùa thứ hai về số phận bi kịch của Raphael Bob-Waksberg dày đặc những trò đùa cũng như tuyệt vọng.

Xem cách tính năng lái tự động cập nhật của Tesla bùng phát như thế nào khi bạn bỏ qua các cảnh báo của nó

Xem cách tính năng lái tự động cập nhật của Tesla bùng phát như thế nào khi bạn bỏ qua các cảnh báo của nó

Bản nâng cấp Phiên bản 8.0 gần đây của Tesla đối với hệ thống Lái xe tự động được thiết kế để cải thiện hệ thống và mối quan hệ của nó với người lái.

UnREAL, Chương trình Truyền hình Về Truyền hình Thực tế Chúng tôi Không biết Chúng tôi Cần

UnREAL, Chương trình Truyền hình Về Truyền hình Thực tế Chúng tôi Không biết Chúng tôi Cần

Chắc chắn khi con cái chúng ta xem lại các chương trình chúng ta đã xem vào khoảng năm 2015, chúng sẽ thấy UnREAL, một chương trình truyền hình mới chiếu vào tối Thứ Hai của Lifetime — bạn sẽ thấy đúng lúc, sẽ phát sóng ngay sau khi The Bachelor kết thúc — như một chương trình không thể được thực hiện vào bất kỳ thời điểm nào khác trong lịch sử truyền hình, nhưng một chương trình cảm thấy cần thiết để xem bây giờ. UnREAL có sự tham gia của Shiri Appleby trong vai Rachel, một nhà sản xuất truyền hình cho một chương trình về cơ bản là The Bachelor, mặc dù trong thế giới này, nó được gọi là Vĩnh viễn.

Sau tất cả, Josh Trank sẽ không đạo diễn bộ phim tuyển tập Star Wars thứ hai

Sau tất cả, Josh Trank sẽ không đạo diễn bộ phim tuyển tập Star Wars thứ hai

Thông báo chính thức đến trực tiếp từ trang web của Star Wars: Fantastic Four, đạo diễn Josh Trank, một người bí ẩn không xuất hiện tại đại hội Star Wars Celebration gần đây, sẽ không chỉ đạo phần hai Star Wars Anthology. Đây là tuyên bố được đăng ngày hôm qua: Tất cả thực sự là ngôn ngữ rất lịch sự, nhưng một bài báo của Hollywood Reporter cho thấy tất cả đều không tốt ở hậu trường, gọi sự ra đi là "một vụ sa thải" một phần dựa trên "hành vi bất thường" của Trank trong khi quay Fantastic Four: The Bài báo trích dẫn các nguồn gọi là Trank “đôi khi thiếu quyết đoán và thiếu sáng tạo,” và lưu ý rằng Fantastic Four, khởi chiếu vào ngày 7 tháng 8, đã được khởi động lại vào cuối tháng 4.

Edwin McCain ra mắt Grand Ole Opry: Quay cảnh hậu trường với nhạc sĩ 'I'll Be'

Edwin McCain ra mắt Grand Ole Opry: Quay cảnh hậu trường với nhạc sĩ 'I'll Be'

McCain, người đang làm việc cho một album mới, lần đầu tiên bước vào vòng kết nối vào tối thứ Sáu ở Nashville

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Tôi viết như thế nào

Tôi viết như thế nào

Đối với tôi, mọi thứ là về dòng đầu tiên đó và nó sẽ đưa bạn đến đâu. Một số nhà văn bị điều khiển bởi cốt truyện, sự sắp xếp tinh tế của các quân cờ, trong khi những người khác bị lôi cuốn bởi một nhân vật và khả năng thực hiện một cuộc hành trình với một người bạn hư cấu mới.

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Language