Apakah perbezaan antara menjajarkan kandungan dan menjajarkan item?
P粉316423089
P粉316423089 2023-08-24 00:26:28
0
1
497
Apakah perbezaan antara <p><code>align-items</code> dan <code>align-content</code>? </p>
P粉316423089
P粉316423089

membalas semua(1)
P粉536532781

Apabila

flex-box ialah align-items 属性沿着横轴对齐 Flex 容器内的项目,就像 justify-content 沿着主轴对齐一样。 (对于默认的 flex-direction: row ,交叉轴对应于垂直方向,主轴对应于水平方向。使用 flex-direction: column, kedua-dua paksi ini boleh ditukar masing-masing).

Berikut ialah contoh rupa align-items:center:

Contoh

tetapi align-content 适用于多行灵活框。当项目位于一行中时,它没有任何效果。它根据其价值来调整整个结构。以下是 align-content: space-around;:

Beginilah rupa align-content: space-around; dengan align-content: space-around;align-items:center:

Perhatikan bahawa kotak ketiga dalam baris pertama dan semua kotak lain berubah menjadi berpusat menegak dalam baris itu.

Berikut adalah beberapa pautan codepen yang boleh anda gunakan:

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

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

Ini ialah pen yang hebat yang memaparkan dan membolehkan anda menggunakan hampir semua perkara dalam Flexbox.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan