الفرق بين block و flex

تحدد خاصية display كيفية عرض العنصر في صفحة الويب, هناك العديد من القيم المرتبطة بهذه الخاصية في CSS, مثل Inline-block و flex , لفهم القيمة Inline-block جيدا يجب أن نحاول شرح القيم inline و block

display:inline

عند تحديد هذه الخاصية لعنصر ما فان تحديد الطول والعرض له لن يفي بالغرض ولن يطبق عليه لأنه يتبع ارتفاع وعرض الخط الذي يعد جزء منه, ومن الممكن أن يأتي بجابنه العناصر الاخرى التي لديها الخاصية display:inline

display:block

عند تحديد هذه الخاصية لعنصر ما فإنه يعرض كعنصر كتلة,أي انه يبدأ في سطر جديد ويأخذ مساحة أفقية قدر الإمكان. لا تظهر عناصر مستوى الكتلة في نفس السطر ، وعند تحديد الطول والعرض لهذه العناصر فانها تطبق عليه
بعد ان فهمنا ما هي الخاصية inline و block يمكننا شرح ما هي الخاصية inline-block
 

display:inline-block

العناصر التي لديها هذه الخاصية تشبه الى حد كبير العناصر التي لديها الخاصية display:inline, أي انها تعرض على مستوى السطر ويمكن للعناصر التي لديها الخاصية inline أن تعرض بجانبها ولا تبدأ في سطر جديد ولكن أيضا يمكننا تحديد الطول والارتفاع لهذه العناصر وهذا ما يميزها عن الخاصيتين inline و block

display:flex

تختلف قليلا هذه الخاصية عن غيرها ولكن هناك بعض الخصائص التي تتشابه بها مع الخاصية block فهي تعرض في سطر جديد, تستخدم لعنصر يعمل كحاوية وبداخله العديد من العناصر ,تعمل على توزيع ومحاذاة المساحة بين العناصر في الحاوية بشكل ديناميكي
يمكنك قراءة المزيد من هنا

Block: يعرض عنصرًا كعنصر كتلة. يبدأ على سطر جديد ويأخذ مساحة أفقية قدر الإمكان. لا تظهر عناصر مستوى الكتلة في نفس السطر ، ولكنها تكسر السطر الحالي وتظهر في السطر التالي.

Flex: يعرض Flex عنصرًا كهيكل مرن. . يتم عرض الحاوية المرنة نفسها في سطر جديد ، تمامًا مثل عنصر الكتلة. (يمكن أن تحتوي الحاوية المرنة على عناصر أخرى فيها) ، وبالتالي ، فإن الحاوية المرنة هي العنصر الأصلي والعناصر التي تشكل جزءًا منها هي العناصر الفرعية.