التحكم في العناصر باستخدام الصندوق المرن flexbox [الجـــــزء الأول]

ظهرت فكرة الصندوق المرن (flexbox – flex layout  ) للتحكم في العناصر التي يوضع لها حاويه container حتى نستطيع التحكم في طول وعرض وترتيب العناصر بشكل أبسط واسهل بجانب انها ليست عباره عن خاصيه منفرده بذاتها فحسب ولكن الأمر يتخطى كونها مجموعة من الخصائص المنفردة إلى مجموعة من الخصائص المرتبطة ببعضها لتكون module  

----

----------- العناصر التي نقوم بكتابها للعنصر الأب parent -----------

display: flex;
display: inline-flex;

----

flex-direction: row
flex-direction: row -reverse
flex-direction: column-reverse
flex-direction: column

----

flex-wrap:nowrap
flex-wrap:wrap
Flex:wrap-reverse

----

  flex-flow: column wrap;

----

justify-content: flex-start;
justify-content: center;
justify-content: space-between; 
justify-content: space-around;
justify-content: space-evenly; 

----

align-items: stretch+... safe | unsafe
align-items: flex-start+... safe | unsafe
align-items: flex-end+... safe | unsafe
align-items: center+... safe | unsafe
align-items: baseline+... safe | unsafe
align-items: first baseline+... safe | unsafe
align-items: last baseline+... safe | unsafe

----

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