css - خصائص - ما الفرق بين محاذاة المحتوى وعناصر المحاذاة؟




خصائص css (6)

هل يمكن لأي شخص أن يظهر لي الفرق بين align-items align-content ؟


أجد المثال http://flexboxfroggy.com/ مفيدًا جدًا.

سوف يستغرق الأمر من 10 إلى 20 دقيقة ، وفي المستوى 21 ستجد الإجابة على سؤالك. ذكرت:

يحدد محتوى المحاذاة التباعد بين الأسطر ، بينما تحدد عناصر المحاذاة كيفية محاذاة العناصر ككل داخل الحاوية. عندما يكون هناك سطر واحد فقط ، لن يكون لمحاذاة المحتوى أي تأثير


أولاً ، align-items مخصصة للعناصر في صف واحد. لذلك بالنسبة لصف واحد من العناصر على المحور الرئيسي ، ستقوم align-items المحاذاة بمحاذاة هذه العناصر مع بعضها البعض ، وسوف تبدأ بمنظور جديد من الصف التالي.

الآن ، لا يتعارض align-content المحاذي مع العناصر في صف واحد ولكن مع الصفوف نفسها . وبالتالي ، سيحاول align-content المحاذي محاذاة الصفوف فيما يتعلق بالحاوية المرنة.

تحقق من هذا الكمان: https://jsfiddle.net/htym5zkn/8/


تقوم خاصية align-items في المربع المرن بمحاذاة العناصر الموجودة داخل حاوية مرنة على طول المحور المتقاطع تمامًا مثلما يفعل justify-content الضبط على المحور الرئيسي. (بالنسبة flex-direction: row الافتراضي flex-direction: row ، يتوافق المحور المتقاطع مع العمودي ، والمحور الرئيسي يتوافق مع الأفقي. مع flex-direction: column هذان العمودان على التوالي).

فيما يلي مثال عن كيفية align-items:center يبدو align-items:center :

لكن align-content مخصصة لصناديق مرنة متعددة الأسطر. ليس له أي تأثير عندما تكون العناصر في سطر واحد. انها محاذاة الهيكل كله وفقا لقيمته. فيما يلي مثال align-content: space-around; :

وإليك كيفية align-content: space-around; مع align-items:center يبدو align-items:center :

لاحظ المربع الثالث وجميع الصناديق الأخرى في السطر الأول تتغير إلى محور عمودي في هذا الخط.

فيما يلي بعض روابط codepen للعب بها:

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

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

Here's قلمًا رائعًا يتيح لك اللعب مع كل شيء تقريبًا في flexbox.


حسنا لقد درستهم على متصفحي.

يمكن align-content تغيير ارتفاع الخط لاتجاه الصف أو عرضه للعمود عندما تكون القيمة قابلة للتمدد ، أو إضافة مسافة خالية بين أو حول الخطوط flex-end values space-between space-around space-between space-around flex-start flex-end values .

يمكن align-items تغيير ارتفاع العناصر أو موضعها داخل منطقة الخط. عندما لا يتم تغليف العناصر ، يكون لها سطر واحد فقط تمتد مساحته دائمًا إلى منطقة المربع المرن (حتى إذا تجاوزت العناصر) ، ولن يكون align-content أي تأثير على سطر واحد. لذلك ليس له أي تأثير على العناصر التي لا يتم لفها ولا يمكن إلا align-items تغيير موضع العناصر أو تمديدها عندما تكون جميعها في سطر واحد.

ومع ذلك ، إذا كانت ملفوفة لديك لديك خطوط وعناصر متعددة داخل كل سطر. وإذا كانت جميع عناصر كل سطر لها نفس الارتفاع (لاتجاه الصف) ، فسيكون ارتفاع الخط مساويًا لارتفاع هذه العناصر ولن ترى أي تأثير عن طريق تغيير قيمة align-items .

لذلك ، إذا كنت تريد التأثير على العناصر عن طريق align-items عندما يتم لف العناصر الخاصة بك ويكون لها نفس الارتفاع (لاتجاه الصف) أولاً ، يجب عليك استخدام align-content محاذي مع قيمة التمدد من أجل توسيع مساحة الخطوط.


وفقًا لما فهمته من here :

عند استخدام محاذاة عنصر أو عنصر ضبط ، فإنك تقوم بضبط "المحتوى داخل عنصر شبكة بطول محور العمود أو محور الصف على التوالي.

لكن: إذا كنت تستخدم المحتوى المحاذي أو المحتوى المضبوط ، فأنت تقوم بتعيين موضع شبكة على محور العمود أو محور الصف. يحدث عندما يكون لديك شبكة في حاوية أكبر ويكون العرض أو الارتفاع غير مرن (باستخدام px).


محاذاة المحتوى

يتحكم align-content في المحور المتقاطع (أي الاتجاه العمودي إذا كان الاتجاه flex-direction row ، والأفقية إذا كان flex-direction column ) لتحديد مواقع خطوط متعددة بالنسبة لبعضها البعض.

(فكر في سطور فقرة تمتد رأسياً إلى الخارج ، مكدسة نحو الأعلى ، مكدسة نحو الأسفل. هذا تحت نموذج صف flex-direction ).

محاذاة البنود

تتحكم عناصر align-items في المحور المتقاطع لخط فردي من العناصر المرنة.

(فكر في كيفية محاذاة سطر فردي من فقرة ، إذا كان يحتوي على نص عادي وبعض النصوص الأطول مثل معادلات الرياضيات. في هذه الحالة ، سيكون الجزء السفلي أو العلوي أو المركزي لكل نوع من النص في سطر سوف تكون محاذاة؟)





alignment