Apa perbedaan antara menyelaraskan konten dan menyelaraskan item?

Adakah yang bisa menunjukkan perbedaan antara align-itemsdan align-content?

The align-itemsmilik flex-kotak meluruskan item dalam sebuah wadah fleksibel sepanjang sumbu lintas seperti justify-contenttidak sepanjang sumbu utama. (Untuk default flex-direction: row, sumbu silang berhubungan dengan vertikal dan sumbu utama berhubungan dengan horizontal. Dengan flex-direction: columnkeduanya masing-masing dipertukarkan).

Berikut ini contoh align-items:centertampilannya:

Tetapi align-contentuntuk kotak multi-garis fleksibel. Itu tidak berpengaruh ketika item berada dalam satu baris. Ini menyelaraskan seluruh struktur sesuai dengan nilainya. Berikut ini contoh untuk align-content: space-around;:

Dan begini caranya align-content: space-around;dengan align-items:centertampilannya:

Perhatikan kotak ke-3 dan semua kotak lain di baris pertama berubah menjadi vertikal di tengah garis itu.

Berikut ini beberapa tautan codepen untuk dimainkan:

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

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

Inilah pena super keren yang menunjukkan dan memungkinkan Anda bermain dengan hampir semua hal di flexbox.

Saya menemukan contoh http://flexboxfroggy.com/ sangat berguna.

Ini akan membawa Anda 10-20 menit dan pada level 21 Anda akan menemukan jawaban untuk pertanyaan Anda. Disebutkan:

menyelaraskan konten menentukan jarak antar baris, sementara item selaras menentukan bagaimana item secara keseluruhan disejajarkan dalam wadah. Ketika hanya ada satu baris, menyelaraskan konten tidak berpengaruh

Pertama, align-itemsuntuk item dalam satu baris. Jadi untuk satu baris elemen pada sumbu utama , align-itemsakan menyejajarkan masing-masing item ini satu sama lain dan akan mulai dengan perspektif baru dari baris berikutnya.

Sekarang, align-contenttidak mengganggu item dalam satu baris tetapi dengan baris itu sendiri . Oleh karena itu, align-contentakan mencoba untuk menyelaraskan baris dengan menghormati satu sama lain dan wadah fleksibel

Periksa biola ini: https://jsfiddle.net/htym5zkn/8/

Saya memiliki kebingungan yang sama. Setelah bermain-main berdasarkan banyak jawaban di atas, akhirnya saya bisa melihat perbedaannya. Menurut pendapat saya yang sederhana, perbedaan terbaik ditunjukkan dengan wadah fleksibel yang memenuhi dua kondisi berikut:

1. Wadah fleksibel itu sendiri memiliki batasan ketinggian (misalnya, min-height: 60rem) dan dengan demikian dapat menjadi terlalu tinggi untuk kontennya
2. Item anak yang tertutup dalam wadah memiliki ketinggian yang tidak rata

Kondisi 1 membantu saya memahami apa contentartinya relatif terhadap wadah induknya. Saat konten rata dengan wadah, kami tidak akan dapat melihat efek posisi apa pun yang berasalalign-content . Hanya ketika kita memiliki ruang ekstra di sepanjang sumbu silang, kita mulai melihat efeknya: Ini menyelaraskan konten relatif dengan batas-batas wadah induk.

Kondisi 2 membantu saya memvisualisasikan efek align-items: ia menyelaraskan item relatif satu sama lain.

Ini adalah contoh kode. Bahan baku berasal dari tutorial CSS Grid milik Wes Bos (21. Flexbox vs. CSS Grid)

• Contoh 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>

• CSS contoh:

.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;
}

Contoh 1 : Mari kita mempersempit viewport sehingga konten rata dengan wadah. Ini saatnyaalign-content: flex-start; tidak memiliki efek karena seluruh blok konten sangat pas di dalam wadah (tidak ada ruang tambahan untuk reposisi!)

Perhatikan juga baris ke-2 - lihat bagaimana item disejajarkan di tengahnya.

Contoh 2 : Saat kami memperluas viewport, kami tidak lagi memiliki konten yang cukup untuk mengisi seluruh wadah. Sekarang kita mulai melihat efek dari - align-content: flex-start;itu menyelaraskan konten relatif ke tepi atas wadah.

Contoh-contoh ini didasarkan pada flexbox, tetapi prinsip yang sama berlaku untuk kisi-kisi CSS. Semoga ini membantu :)

Ya saya sudah memeriksanya di browser saya.

align-contentdapat mengubah tinggi baris untuk arah baris atau lebar untuk kolom ketika nilai itu adalah peregangan, atau menambah ruang kosong antara atau sekitar garis untuk space-between, space-around, flex-start,flex-end values .

align-itemsdapat mengubah ketinggian atau posisi item di dalam area garis. Ketika item tidak dibungkus, mereka hanya memiliki satu garis yang area itu selalu direntangkan ke area kotak-fleksibel (bahkan jika item meluap), dan align-contenttidak memiliki efek pada satu baris. Jadi tidak berpengaruh pada barang yang tidak dibungkus dan hanyaalign-items dapat mengubah posisi item atau meregangkannya ketika semuanya berada pada satu baris.

Namun, jika dibungkus, Anda memiliki beberapa baris dan item di dalam setiap baris. Dan jika semua item dari setiap baris memiliki ketinggian yang sama (untuk arah baris) maka tinggi baris akan sama dengan tinggi item tersebut dan Anda tidak melihat efek apa pun dengan mengubah align-itemsnilai.

Jadi, jika Anda ingin memengaruhi item align-itemssaat item Anda dibungkus dan memiliki ketinggian yang sama (untuk arah baris) pertama Anda harus menggunakan align-contentdengan nilai peregangan untuk memperluas area garis.

menyelaraskan konten

align-contentmengontrol sumbu silang (yaitu arah vertikal jika flex-directionada row, dan posisi horisontal jika flex-directionada column) dari beberapa garis relatif satu sama lain.

(Pikirkan baris paragraf yang tersebar secara vertikal, ditumpuk ke atas, ditumpuk ke bawah. Ini di bawah flex-directionparadigma baris).

menyelaraskan item

align-items mengontrol sumbu silang dari garis individual elemen fleksibel.

(Pikirkan bagaimana baris individu paragraf disejajarkan, jika berisi beberapa teks normal dan beberapa teks yang lebih tinggi seperti persamaan matematika. Dalam hal itu, apakah itu akan menjadi bagian bawah, atas, atau tengah dari setiap jenis teks dalam baris yang akan disejajarkan?)

Apa yang saya pelajari dari setiap jawaban dan mengunjungi blog adalah

apa sumbu silang dan sumbu utama

• sumbu utama adalah baris horizontal dan sumbu silang adalah kolom vertikal - untuk flex-direction: row
• sumbu utama adalah kolom vertikal dan sumbu silang adalah baris horizontal - untuk flex-direction: column

Sekarang menyelaraskan konten dan menyelaraskan item

menyelaraskan konten untuk baris, itu berfungsi jika wadah memiliki (lebih dari satu baris) properti konten menyelaraskan

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

menyelaraskan item adalah untuk item dalam Properti baris dari menyelaraskan item

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

Untuk referensi lebih lanjut kunjungi untuk flex

Perbedaan utama adalah ketika ketinggian elemen tidak sama! Kemudian Anda dapat melihat bagaimana di baris, semuanya adalah center \ end \ start

menurut apa yang saya mengerti dari sini :

ketika Anda menggunakan item pelurusan atau pembenaran, Anda menyesuaikan "konten di dalam item kotak di sepanjang sumbu kolom atau sumbu baris.

Tetapi: jika Anda menggunakan align-content atau justify-content, Anda mengatur posisi kisi di sepanjang sumbu kolom atau sumbu baris. itu terjadi ketika Anda memiliki kotak di wadah yang lebih besar dan lebar atau tinggi tidak fleksibel (menggunakan px).