ضبط المحتوى: المسافة بين الموضحة (CSS)
أنشئ تخطيط CSS flexbox بشكل مرئي: الاتجاه المرن، وضبط المحتوى، ومحاذاة العناصر، والالتفاف المرن والفجوة في الحاوية، بالإضافة إلى النمو المرن لكل طفل، والتقليص المرن، والأساس المرن، كل ذلك مع معاينة مباشرة وCSS قابل للنسخ.
النتيجة
تفتح هذه الصفحة المولد مع ضبط محتوى الضبط على المسافة بينهما: يتم وضع المربع الأول بشكل متساوٍ مقابل حافة بداية الحاوية، والمربع الأخير يقع بشكل متساوٍ مقابل حافة نهايته، ويتم تقسيم المساحة المتبقية إلى فجوات متساوية بين المربعات في المنتصف - ليس قبل الأول أو بعد الأخير.
هذه هي التفاصيل التي يخلطها الناس. يمنح Space-around كل صندوق هامشًا متساويًا على كلا الجانبين، وبالتالي فإن الفجوات بين الصناديق تنتهي بضعف عرض الفجوات الموجودة عند الحافتين الخارجيتين (كل حافة تحصل فقط على هامش صندوق واحد، وليس اثنين). الفضاء المتساوي يذهب إلى أبعد من ذلك ويجعل كل فجوة بنفس الحجم، بما في ذلك الحافتين الخارجيتين - الوحيدة من الثلاثة حيث يبدو التباعد موحدًا تمامًا على طول الطريق.
قم بتبديل القائمة المنسدلة لضبط المحتوى بين القيم الثلاث أدناه وشاهد نفس المربعات الثلاثة وهي تعيد ترتيبها - إنها أسرع طريقة لمعرفة الفرق بدلاً من حفظه. انسخ ملف CSS لأي واحد يطابق التباعد الذي تريده بالفعل.