1.0CSS learning masteryhttps://gigz.pk/cssAyeshahttps://gigz.pk/css/author/ayesha/Flex Container - CSS learning masteryrich600338<blockquote class="wp-embedded-content" data-secret="NIdUCtXW5f"><a href="https://gigz.pk/css/lesson/flex-container/">Flex Container</a></blockquote><iframe sandbox="allow-scripts" security="restricted" src="https://gigz.pk/css/lesson/flex-container/embed/#?secret=NIdUCtXW5f" width="600" height="338" title="“Flex Container” — CSS learning mastery" data-secret="NIdUCtXW5f" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe><script type="text/javascript">
/* <![CDATA[ */
/*! This file is auto-generated */
!function(d,l){"use strict";l.querySelector&&d.addEventListener&&"undefined"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!/[^a-zA-Z0-9]/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),o=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]'),c=new RegExp("^https?:$","i"),i=0;i<o.length;i++)o[i].style.display="none";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute("style"),"height"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):"link"===t.message&&(r=new URL(s.getAttribute("src")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",function(){for(var e,t,s=l.querySelectorAll("iframe.wp-embedded-content"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute("data-secret"))||(t=Math.random().toString(36).substring(2,12),e.src+="#?secret="+t,e.setAttribute("data-secret",t)),e.contentWindow.postMessage({message:"ready",secret:t},"*")},!1)))}(window,document);
//# sourceURL=https://gigz.pk/css/wp-includes/js/wp-embed.min.js
/* ]]> */
</script>
A Flex Container is the parent element that enables Flexbox layout. When you apply display flex to an element, all its direct children become flex items and follow flexible layout rules. To create a flex container, you use the display property with the value flex. Example .container {display: flex;} Once this is applied, the layout […]