{"id":72099,"date":"2021-12-07T08:17:32","date_gmt":"2021-12-07T13:17:32","guid":{"rendered":"https:\/\/bangla.salearningschool.com\/recent-posts\/css-flexible-box-layout\/"},"modified":"2021-12-07T08:17:32","modified_gmt":"2021-12-07T13:17:32","slug":"css-flexible-box-layout","status":"publish","type":"post","link":"http:\/\/bangla.sitestree.com\/?p=72099","title":{"rendered":"CSS Flexible Box Layout"},"content":{"rendered":"

CSS Flexible Box Layout
\n"CSS Flexible Box Layout, commonly known as Flexbox, is a CSS 3 web layout model. It is in the W3C’s candidate recommendation stage. The flex layout allows responsive elements within a container to be automatically arranged depending upon screen size. " Wikipedia
\n"Angular Flex Layout provides a sophisticated layout API using Flexbox CSS + mediaQuery. This module provides Angular developers with component layout features using a custom Layout API, mediaQuery observables, and injected DOM flexbox-2016 CSS stylings.<\/p>\n

The Flex Layout engine intelligently automates the process of applying appropriate Flexbox CSS to browser view hierarchies. This automation also addresses many of the complexities and workarounds encountered with the traditional, manual, CSS-only application of box CSS.<\/p>\n

The real power of Flex Layout, however, is its responsive engine. The Responsive API enables developers to easily specify different layouts, sizing, visibilities for different viewport sizes and display devices." Github<\/p>\n

CSS \u09a8\u09ae\u09a8\u09c0\u09af\u09bc \u09ac\u0995\u09cd\u09b8 \u09b2\u09c7\u0986\u0989\u099f
\nCSS \u09a8\u09ae\u09a8\u09c0\u09af\u09bc \u09ac\u0995\u09cd\u09b8 \u09b2\u09c7\u0986\u0989\u099f, \u09b8\u09be\u09a7\u09be\u09b0\u09a3\u09a4 \u09ab\u09cd\u09b2\u09c7\u0995\u09cd\u09b8\u09ac\u0995\u09cd\u09b8 \u09a8\u09be\u09ae\u09c7 \u09aa\u09b0\u09bf\u099a\u09bf\u09a4, \u098f\u0995\u099f\u09bf CSS 3 \u0993\u09af\u09bc\u09c7\u09ac \u09b2\u09c7\u0986\u0989\u099f \u09ae\u09a1\u09c7\u09b2\u0964 \u098f\u099f\u09bf W3C \u098f\u09b0 \u09aa\u09cd\u09b0\u09be\u09b0\u09cd\u09a5\u09c0 \u09b8\u09c1\u09aa\u09be\u09b0\u09bf\u09b6 \u09aa\u09b0\u09cd\u09af\u09be\u09af\u09bc\u09c7 \u09b0\u09af\u09bc\u09c7\u099b\u09c7\u0964 \u09ab\u09cd\u09b2\u09c7\u0995\u09cd\u09b8 \u09b2\u09c7\u0986\u0989\u099f \u098f\u0995\u099f\u09bf \u09aa\u09be\u09a4\u09cd\u09b0\u09c7\u09b0 \u09ae\u09a7\u09cd\u09af\u09c7 \u09aa\u09cd\u09b0\u09a4\u09bf\u0995\u09cd\u09b0\u09bf\u09af\u09bc\u09be\u09b6\u09c0\u09b2 \u0989\u09aa\u09be\u09a6\u09be\u09a8\u0997\u09c1\u09b2\u09bf\u0995\u09c7 \u09aa\u09b0\u09cd\u09a6\u09be\u09b0 \u0986\u0995\u09be\u09b0\u09c7\u09b0 \u0989\u09aa\u09b0 \u09a8\u09bf\u09b0\u09cd\u09ad\u09b0 \u0995\u09b0\u09c7 \u09b8\u09cd\u09ac\u09af\u09bc\u0982\u0995\u09cd\u09b0\u09bf\u09af\u09bc\u09ad\u09be\u09ac\u09c7 \u09b8\u09be\u099c\u09be\u09a8\u09cb\u09b0 \u0985\u09a8\u09c1\u09ae\u09a4\u09bf \u09a6\u09c7\u09af\u09bc\u0964 \u0989\u0987\u0995\u09bf\u09aa\u09bf\u09a1\u09bf\u09af\u09bc\u09be
\nAngular Flex Layout Flexbox CSS + mediaQuery \u09ac\u09cd\u09af\u09ac\u09b9\u09be\u09b0 \u0995\u09b0\u09c7 \u098f\u0995\u099f\u09bf \u09aa\u09b0\u09bf\u09b6\u09c0\u09b2\u09bf\u09a4 \u09b2\u09c7\u0986\u0989\u099f API \u09aa\u09cd\u09b0\u09a6\u09be\u09a8 \u0995\u09b0\u09c7\u0964 \u098f\u0987 \u09ae\u09a1\u09bf\u0989\u09b2\u099f\u09bf \u098f\u0995\u099f\u09bf \u0995\u09be\u09b8\u09cd\u099f\u09ae \u09b2\u09c7\u0986\u0989\u099f API, mediaQuery \u0985\u09ac\u099c\u09be\u09b0\u09ad\u09c7\u09ac\u09b2, \u098f\u09ac\u0982 \u0987\u09a8\u099c\u09c7\u0995\u09b6\u09a8 \u0995\u09b0\u09be DOM flexbox-2016 CSS \u09b8\u09cd\u099f\u09be\u0987\u09b2\u09bf\u0982 \u09ac\u09cd\u09af\u09ac\u09b9\u09be\u09b0 \u0995\u09b0\u09c7 \u0989\u09aa\u09be\u09a6\u09be\u09a8 \u09b2\u09c7\u0986\u0989\u099f \u09ac\u09c8\u09b6\u09bf\u09b7\u09cd\u099f\u09cd\u09af\u0997\u09c1\u09b2\u09bf\u09b0 \u09b8\u09be\u09a5\u09c7 \u0995\u09cc\u09a3\u09bf\u0995 \u09ac\u09bf\u0995\u09be\u09b6\u0995\u09be\u09b0\u09c0\u09a6\u09c7\u09b0 \u09aa\u09cd\u09b0\u09a6\u09be\u09a8 \u0995\u09b0\u09c7\u0964<\/p>\n

\u09ab\u09cd\u09b2\u09c7\u0995\u09cd\u09b8 \u09b2\u09c7\u0986\u0989\u099f \u0987\u099e\u09cd\u099c\u09bf\u09a8 \u09ac\u09cd\u09b0\u09be\u0989\u099c\u09be\u09b0 \u09ad\u09bf\u0989 \u09b9\u09be\u09af\u09bc\u09be\u09b0\u09be\u09b0\u09cd\u0995\u09bf\u09a4\u09c7 \u0989\u09aa\u09af\u09c1\u0995\u09cd\u09a4 \u09ab\u09cd\u09b2\u09c7\u0995\u09cd\u09b8\u09ac\u0995\u09cd\u09b8 \u09b8\u09bf\u098f\u09b8\u098f\u09b8 \u09aa\u09cd\u09b0\u09af\u09bc\u09cb\u0997 \u0995\u09b0\u09be\u09b0 \u09aa\u09cd\u09b0\u0995\u09cd\u09b0\u09bf\u09af\u09bc\u09be\u0995\u09c7 \u09ac\u09c1\u09a6\u09cd\u09a7\u09bf\u09ae\u09be\u09a8\u09c7\u09b0 \u09b8\u09be\u09a5\u09c7 \u09b8\u09cd\u09ac\u09af\u09bc\u0982\u0995\u09cd\u09b0\u09bf\u09af\u09bc \u0995\u09b0\u09c7\u0964 \u098f\u0987 \u0985\u099f\u09cb\u09ae\u09c7\u09b6\u09a8\u099f\u09bf \u09ac\u0995\u09cd\u09b8 CSS-\u098f\u09b0 \u09aa\u09cd\u09b0\u09a5\u09be\u0997\u09a4, \u09ae\u09cd\u09af\u09be\u09a8\u09c1\u09af\u09bc\u09be\u09b2, CSS-\u09b6\u09c1\u09a7\u09c1\u09ae\u09be\u09a4\u09cd\u09b0 \u0985\u09cd\u09af\u09be\u09aa\u09cd\u09b2\u09bf\u0995\u09c7\u09b6\u09a8\u09c7\u09b0 \u09b8\u09be\u09a5\u09c7 \u09b8\u09ae\u09cd\u09ae\u09c1\u0996\u09c0\u09a8 \u09b9\u0993\u09af\u09bc\u09be \u0985\u09a8\u09c7\u0995 \u099c\u099f\u09bf\u09b2\u09a4\u09be \u098f\u09ac\u0982 \u09b8\u09ae\u09be\u09a7\u09be\u09a8\u09c7\u09b0 \u09b8\u09ae\u09be\u09a7\u09be\u09a8 \u0995\u09b0\u09c7\u0964<\/p>\n

\u09ab\u09cd\u09b2\u09c7\u0995\u09cd\u09b8 \u09b2\u09c7\u0986\u0989\u099f\u09c7\u09b0 \u0986\u09b8\u09b2 \u09b6\u0995\u09cd\u09a4\u09bf, \u09a4\u09ac\u09c7, \u098f\u09b0 \u09aa\u09cd\u09b0\u09a4\u09bf\u0995\u09cd\u09b0\u09bf\u09af\u09bc\u09be\u09b6\u09c0\u09b2 \u0987\u099e\u09cd\u099c\u09bf\u09a8\u0964 \u09b0\u09c7\u09b8\u09aa\u09a8\u09cd\u09b8\u09bf\u09ad \u098f\u09aa\u09bf\u0986\u0987 \u09a1\u09c7\u09ad\u09c7\u09b2\u09aa\u09be\u09b0\u09a6\u09c7\u09b0 \u09b8\u09b9\u099c\u09c7 \u09ac\u09bf\u09ad\u09bf\u09a8\u09cd\u09a8 \u09b2\u09c7\u0986\u0989\u099f, \u09b8\u09be\u0987\u099c\u09bf\u0982, \u09ac\u09bf\u09ad\u09bf\u09a8\u09cd\u09a8 \u09ad\u09bf\u0989\u09aa\u09cb\u09b0\u09cd\u099f \u09b8\u09be\u0987\u099c \u098f\u09ac\u0982 \u09a1\u09bf\u09b8\u09aa\u09cd\u09b2\u09c7 \u09a1\u09bf\u09ad\u09be\u0987\u09b8\u09c7\u09b0 \u099c\u09a8\u09cd\u09af \u09a6\u09c3\u09b6\u09cd\u09af\u09ae\u09be\u09a8\u09a4\u09be \u09a8\u09bf\u09b0\u09cd\u09a6\u09bf\u09b7\u09cd\u099f \u0995\u09b0\u09a4\u09c7 \u09b8\u0995\u09cd\u09b7\u09ae \u0995\u09b0\u09c7\u0964<\/p>\n","protected":false},"excerpt":{"rendered":"

CSS Flexible Box Layout "CSS Flexible Box Layout, commonly known as Flexbox, is a CSS 3 web layout model. It is in the W3C’s candidate recommendation stage. The flex layout allows responsive elements within a container to be automatically arranged depending upon screen size. " Wikipedia "Angular Flex Layout provides a sophisticated layout API using … <\/p>\n

Continue reading<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[182],"tags":[],"class_list":["post-72099","post","type-post","status-publish","format-standard","hentry","category---blog","item-wrap"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":10853,"url":"http:\/\/bangla.sitestree.com\/?p=10853","url_meta":{"origin":72099,"position":0},"title":"\u09b8\u09bf\u098f\u09b8\u098f\u09b8 \u09b2\u09c7\u0986\u0989\u099f – \u0987\u09a8\u09b2\u09be\u0987\u09a8-\u09ac\u09cd\u09b2\u0995 (\u09ac\u09be\u0982\u09b2\u09be\u09df) (CSS Layout – inline-block in bangla)","author":"Rafiqul Islam","date":"October 5, 2015","format":false,"excerpt":"\u0987\u09a8\u09b2\u09be\u0987\u09a8-\u09ac\u09cd\u09b2\u0995 \u09ae\u09be\u09a8 \u098f\u0996\u09a8 \u0985\u09a8\u09c7\u0995 \u0995\u09be\u09b2 \u09aa\u09b0\u09c7 \u09ac\u0995\u09cd\u09b8 \u098f\u09b0 \u0997\u09cd\u09b0\u09bf\u09a1 \u09a4\u09c8\u09b0\u09bf \u09b8\u09ae\u09cd\u09ad\u09ac \u09af\u09be float \u09aa\u09cd\u09b0\u09cb\u09aa\u09be\u09b0\u09cd\u099f\u09bf \u09ac\u09cd\u09af\u09ac\u09b9\u09be\u09b0 \u0995\u09b0\u09b2\u09c7 \u09ac\u09cd\u09b0\u09be\u0989\u099c\u09be\u09b0 \u098f\u09b0 \u09aa\u09cd\u09b0\u09b8\u09b8\u09cd\u09a5\u09a4\u09be \u0985\u09a8\u09c1\u09b8\u09be\u09b0\u09c7 \u09aa\u09c2\u09b0\u09cd\u09a3 \u098f\u09ac\u0982 \u09b8\u09c1\u09a8\u09cd\u09a6\u09b0\u09ad\u09be\u09ac\u09c7 \u09ab\u09bf\u099f \u09b9\u09df\u09c7 \u09af\u09be\u09df (\u09af\u0996\u09a8 \u09ac\u09cd\u09b0\u09be\u0989\u099c\u09be\u09b0 \u098f\u09b0 \u0986\u0995\u09be\u09b0 \u09aa\u09b0\u09bf\u09ac\u09b0\u09cd\u09a4\u09a8 \u0995\u09b0\u09be \u09b9\u09df)\u0964 display \u09aa\u09cd\u09b0\u09cb\u09aa\u09be\u09b0\u09cd\u099f\u09bf \u098f\u09b0 inline-block \u09ae\u09be\u09a8 \u098f\u099f\u09bf\u0995\u09c7 \u0986\u09b0\u0993 \u09b8\u09b9\u099c \u0995\u09b0\u09c7\u099b\u09c7\u0964 inline-block \u098f\u09b2\u09bf\u09ae\u09c7\u09a8\u09cd\u099f inline \u098f\u09b2\u09bf\u09ae\u09c7\u09a8\u09cd\u099f \u098f\u09b0 \u09ae\u09a4\u0987, \u0995\u09bf\u09a8\u09cd\u09a4\u09c1 \u098f\u09a6\u09c7\u09b0\u2026","rel":"","context":"In "\u09b8\u09bf \u098f\u09b8 \u098f\u09b8 \u099f\u09bf\u0989\u099f\u09cb\u09b0\u09bf\u09df\u09be\u09b2 (css tutorial)"","block_context":{"text":"\u09b8\u09bf \u098f\u09b8 \u098f\u09b8 \u099f\u09bf\u0989\u099f\u09cb\u09b0\u09bf\u09df\u09be\u09b2 (css tutorial)","link":"http:\/\/bangla.sitestree.com\/?cat=174"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":10851,"url":"http:\/\/bangla.sitestree.com\/?p=10851","url_meta":{"origin":72099,"position":1},"title":"\u09b8\u09bf\u098f\u09b8\u098f\u09b8 \u09b2\u09c7\u0986\u0989\u099f – width \u098f\u09ac\u0982 max-width (\u09ac\u09be\u0982\u09b2\u09be\u09df) (CSS Layout – width and max-width in Bangla)","author":"Rafiqul Islam","date":"October 5, 2015","format":false,"excerpt":"width, max-width \u098f\u09ac\u0982 margin: auto \u098f\u09b0 \u09ac\u09cd\u09af\u09ac\u09b9\u09be\u09b0 \u00a0 \u09aa\u09c2\u09b0\u09cd\u09ac\u09ac\u09b0\u09cd\u09a4\u09c0 \u0985\u09a7\u09cd\u09af\u09be\u09df \u098f \u0989\u09b2\u09cd\u09b2\u09c7\u0996 \u0995\u09b0\u09be \u09b9\u09df\u09c7\u099b\u09bf\u09b2 \u09af\u09c7, block-level \u098f\u09b2\u09bf\u09ae\u09c7\u09a8\u09cd\u099f \u09b8\u09ac\u09b8\u09ae\u09df\u0987 \u09ac\u09cd\u09af\u09ac\u09b9\u09be\u09b0\u09af\u09cb\u0997\u09cd\u09af \u09aa\u09c2\u09b0\u09cd\u09a3 \u09aa\u09cd\u09b0\u09b8\u09b8\u09cd\u09a5 \u099c\u09be\u09df\u0997\u09be \u09a6\u0996\u09b2 \u0995\u09b0\u09c7 (\u09a1\u09be\u09a8\u09c7 \u0993 \u09ac\u09be\u09df\u09c7 \u09af\u09a4\u099f\u09be \u09b8\u09ae\u09cd\u09ad\u09ac \u09aa\u09cd\u09b0\u09b8\u09be\u09b0\u09bf\u09a4 \u09b9\u09df) block-level \u098f\u09b2\u09bf\u09ae\u09c7\u09a8\u09cd\u099f \u098f\u09b0 \u09aa\u09cd\u09b0\u09b8\u09b8\u09cd\u09a5\u09a4\u09be \u09a8\u09bf\u09b0\u09cd\u09a7\u09be\u09b0\u09a3 \u0995\u09b0\u09c7 \u09a6\u09bf\u09b2\u09c7 \u09a7\u09be\u09b0\u0995 \u098f\u09b0 \u09aa\u09cd\u09b0\u09b8\u09be\u09b0\u09bf\u09a4 \u09b9\u0993\u09df\u09be \u09ac\u09a8\u09cd\u09a7 \u0995\u09b0\u09c7 \u09a6\u09c7\u09df\u09be \u09af\u09c7\u09a4\u09c7 \u09aa\u09be\u09b0\u09c7\u0964 \u09a4\u09be\u09b0\u09aa\u09b0, \u0986\u09aa\u09a8\u09bf \u09ae\u09be\u09b0\u09cd\u099c\u09bf\u09a8\u2026","rel":"","context":"In "\u09b8\u09bf \u098f\u09b8 \u098f\u09b8 \u099f\u09bf\u0989\u099f\u09cb\u09b0\u09bf\u09df\u09be\u09b2 (css tutorial)"","block_context":{"text":"\u09b8\u09bf \u098f\u09b8 \u098f\u09b8 \u099f\u09bf\u0989\u099f\u09cb\u09b0\u09bf\u09df\u09be\u09b2 (css tutorial)","link":"http:\/\/bangla.sitestree.com\/?cat=174"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":70247,"url":"http:\/\/bangla.sitestree.com\/?p=70247","url_meta":{"origin":72099,"position":2},"title":"Web page design standards #10","author":"Author-Check- Article-or-Video","date":"August 30, 2021","format":false,"excerpt":"Try to follow the following rules while creating a web-page. 1. Decide what you want to use HTML or XHTML. Better to go with XHTML. Which XHTML? Strict or transitional? Go for strict one, that way you will be in the most standard way.2. If you are new into XHTML\u2026","rel":"","context":"In "FromSitesTree.com"","block_context":{"text":"FromSitesTree.com","link":"http:\/\/bangla.sitestree.com\/?cat=1917"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":70225,"url":"http:\/\/bangla.sitestree.com\/?p=70225","url_meta":{"origin":72099,"position":3},"title":"Layouts with CSS: Layout without tables #10","author":"Author-Check- Article-or-Video","date":"August 29, 2021","format":false,"excerpt":"Two column webpage layout with CSS create twocol.css. Then, add the following code to the file: div#topBanner { text-align: center; padding-bottom: 10px; }div#bodyLeft { position: absolute; width: 25%; }div#bodyRight { margin: 5px 25px 25px 225px; width: 75%; }Your two column webpage will look like Page TitleAdd menu items hereAdd your\u2026","rel":"","context":"In "FromSitesTree.com"","block_context":{"text":"FromSitesTree.com","link":"http:\/\/bangla.sitestree.com\/?cat=1917"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":68570,"url":"http:\/\/bangla.sitestree.com\/?p=68570","url_meta":{"origin":72099,"position":4},"title":"CSS Topics to learn #79","author":"Author-Check- Article-or-Video","date":"August 5, 2021","format":false,"excerpt":"Some important CSS topics to learn and master at CSS stuff from w3schools.com CSS3 stuff from w3schools.com How To Create an IE-Only Stylesheet introducing safe CSS hacks Debugging CSS with the DOM Inspector HTML and CSS Debugging Tools CSS Hacks Stacking in CSS Layout with CSS CSS Selectors CSS2 Specification\u2026","rel":"","context":"In "FromSitesTree.com"","block_context":{"text":"FromSitesTree.com","link":"http:\/\/bangla.sitestree.com\/?cat=1917"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":21630,"url":"http:\/\/bangla.sitestree.com\/?p=21630","url_meta":{"origin":72099,"position":5},"title":"Internet Browsers, HTML, and CSS #Web Development #CSS #Root #By Sayed Ahmed","author":"Author-Check- Article-or-Video","date":"March 3, 2021","format":false,"excerpt":"The article is here:- The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page. HTML elements form the building blocks of\u2026","rel":"","context":"In "FromSitesTree.com"","block_context":{"text":"FromSitesTree.com","link":"http:\/\/bangla.sitestree.com\/?cat=1917"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=\/wp\/v2\/posts\/72099","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=72099"}],"version-history":[{"count":0,"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=\/wp\/v2\/posts\/72099\/revisions"}],"wp:attachment":[{"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=72099"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=72099"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=72099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}