{"id":480,"date":"2021-08-24T07:22:40","date_gmt":"2021-08-24T07:22:40","guid":{"rendered":"http:\/\/lhotsetechnologies.com\/blog\/?p=480"},"modified":"2021-08-24T07:22:42","modified_gmt":"2021-08-24T07:22:42","slug":"flex-in-css","status":"publish","type":"post","link":"https:\/\/lhotsetechnologies.com\/blog\/flex-in-css\/","title":{"rendered":"FLEX in CSS"},"content":{"rendered":"\n

Q1. Why do we need flex?<\/strong><\/p>\n\n\n\n

a. The reason we need to use flex is because it is supported in all major browsers.<\/p>\n\n\n\n

b. We don\u2019t need an external library for using flex.<\/p>\n\n\n\n

c. We don\u2019t need properties of CSS like width, float, position when using flex.<\/p>\n\n\n\n

d. Flex also manages the height of the container, but in CSS when we give float property we have to manage the height of the container.<\/p>\n\n\n\n

e. In CSS there is always an issue of how to position, center or dynamically resize elements on a page but flex is a modern tool to create responsive designs.<\/p>\n\n\n\n

Q2. How can we deal with the same problem in flex?<\/strong><\/p>\n\n\n\n

We can deal with same problem in flex by using properties of the flex like:<\/p>\n\n\n\n

We want to center the div in the section. There are many ways to center the div through CSS but one of the easiest ways to center the div is by using flex.<\/p>\n\n\n\n

To center the inner div element we have to make the parent element a flex container. By using property display : flex<\/strong> to make it a flex container. To center the element horizontally we use property justify-content : center<\/strong> to parent element now to center the element vertically we use property align-item : center <\/strong> to parent element. By using only these properties we get our div element center of the parent element.<\/p>\n\n\n\n

Q3. What is Flex?<\/strong><\/p>\n\n\n\n

Flex is a one-dimensional layout method for laying out items in rows and columns. It was introduced in 2009 by Tab Atkins Jr, as a new layout system, and its goal was to help developers to build responsive web design. By using this we can get flexible responsive layout design without using float and other properties of the CSS.<\/p>\n\n\n\n

Q4. How can we use it?<\/strong><\/p>\n\n\n\n

When using flex, we need to remember three terms \u2013 flex-container, flex-content, flex-item. And then we have to give the properties of these three terms as required.<\/p>\n\n\n\n

display \u2013 this sets the element as an inline or block flexbox container element<\/p>\n\n\n\n

justify-content \u2013 this controls the horizontal alignment of items within the flex container<\/p>\n\n\n\n

align-items \u2013 this controls the vertical alignment of items within the flex container<\/p>\n\n\n\n

By using only these properties, which are applied to the flex container, we can produce a lot of different layouts.<\/p>\n\n\n\n

Q5. What is flex-container?<\/strong><\/p>\n\n\n\n

At which section we apply the display : flex property, which is called flex-container. flex-container is the parent element for it\u2019s item divs. This becomes flexible by using display : flex property. It contains the following properties \u2013 flex-direction, flex-wrap, flex-flow, justify-content, align-item, align-content.<\/p>\n\n\n\n

Q6. What is flex-content?<\/strong><\/p>\n\n\n\n

All the items of flex-container together, we called flex-content.<\/p>\n\n\n\n

Q7. What is flex-item?<\/strong><\/p>\n\n\n\n

All the first child of a container at which the display : flex property is applied are called flex-items. It contains the following properties \u2013 order, flex-grow, flex-shrink, flex-basis, flex, align-self. <\/p>\n\n\n\n

By AVNI RAJPUT<\/p>\n","protected":false},"excerpt":{"rendered":"

Q1. Why do we need flex? a. The reason we need to use flex is because it is supported in […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[321,320],"tags":[319,318],"class_list":["post-480","post","type-post","status-publish","format-standard","hentry","category-css","category-flex","tag-css","tag-flex"],"yoast_head":"\nFLEX in CSS - AEM Blog | Lhotse Technologies<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/lhotsetechnologies.com\/blog\/flex-in-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"FLEX in CSS - AEM Blog | Lhotse Technologies\" \/>\n<meta property=\"og:description\" content=\"Q1. Why do we need flex? a. The reason we need to use flex is because it is supported in […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/lhotsetechnologies.com\/blog\/flex-in-css\/\" \/>\n<meta property=\"og:site_name\" content=\"AEM Blog | Lhotse Technologies\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-24T07:22:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-24T07:22:42+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/flex-in-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/flex-in-css\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/person\/d1daa7081420d3cf2a02c309ee3f5800\"},\"headline\":\"FLEX in CSS\",\"datePublished\":\"2021-08-24T07:22:40+00:00\",\"dateModified\":\"2021-08-24T07:22:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/flex-in-css\/\"},\"wordCount\":484,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#organization\"},\"keywords\":[\"css\",\"flex\"],\"articleSection\":[\"css\",\"flex\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/lhotsetechnologies.com\/blog\/flex-in-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/flex-in-css\/\",\"url\":\"https:\/\/lhotsetechnologies.com\/blog\/flex-in-css\/\",\"name\":\"FLEX in CSS - AEM Blog | Lhotse Technologies\",\"isPartOf\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#website\"},\"datePublished\":\"2021-08-24T07:22:40+00:00\",\"dateModified\":\"2021-08-24T07:22:42+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/flex-in-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/lhotsetechnologies.com\/blog\/flex-in-css\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/flex-in-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/lhotsetechnologies.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"FLEX in CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#website\",\"url\":\"https:\/\/lhotsetechnologies.com\/blog\/\",\"name\":\"AEM Blog | Lhotse Technologies\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/lhotsetechnologies.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#organization\",\"name\":\"AEM Blog | Lhotse Technologies\",\"url\":\"https:\/\/lhotsetechnologies.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/lhotsetechnologies.com\/blog\/wp-content\/uploads\/2019\/07\/lhotse-logo.png\",\"contentUrl\":\"https:\/\/lhotsetechnologies.com\/blog\/wp-content\/uploads\/2019\/07\/lhotse-logo.png\",\"width\":539,\"height\":172,\"caption\":\"AEM Blog | Lhotse Technologies\"},\"image\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/person\/d1daa7081420d3cf2a02c309ee3f5800\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/829547de0cecf5477afeaf7ff2a49fc87a026be43cb5403fa54d0fd419192479?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/829547de0cecf5477afeaf7ff2a49fc87a026be43cb5403fa54d0fd419192479?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"url\":\"https:\/\/lhotsetechnologies.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"FLEX in CSS - AEM Blog | Lhotse Technologies","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/lhotsetechnologies.com\/blog\/flex-in-css\/","og_locale":"en_US","og_type":"article","og_title":"FLEX in CSS - AEM Blog | Lhotse Technologies","og_description":"Q1. Why do we need flex? a. The reason we need to use flex is because it is supported in […]","og_url":"https:\/\/lhotsetechnologies.com\/blog\/flex-in-css\/","og_site_name":"AEM Blog | Lhotse Technologies","article_published_time":"2021-08-24T07:22:40+00:00","article_modified_time":"2021-08-24T07:22:42+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/lhotsetechnologies.com\/blog\/flex-in-css\/#article","isPartOf":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/flex-in-css\/"},"author":{"name":"admin","@id":"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/person\/d1daa7081420d3cf2a02c309ee3f5800"},"headline":"FLEX in CSS","datePublished":"2021-08-24T07:22:40+00:00","dateModified":"2021-08-24T07:22:42+00:00","mainEntityOfPage":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/flex-in-css\/"},"wordCount":484,"commentCount":0,"publisher":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/#organization"},"keywords":["css","flex"],"articleSection":["css","flex"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/lhotsetechnologies.com\/blog\/flex-in-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/lhotsetechnologies.com\/blog\/flex-in-css\/","url":"https:\/\/lhotsetechnologies.com\/blog\/flex-in-css\/","name":"FLEX in CSS - AEM Blog | Lhotse Technologies","isPartOf":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/#website"},"datePublished":"2021-08-24T07:22:40+00:00","dateModified":"2021-08-24T07:22:42+00:00","breadcrumb":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/flex-in-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/lhotsetechnologies.com\/blog\/flex-in-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/lhotsetechnologies.com\/blog\/flex-in-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/lhotsetechnologies.com\/blog\/"},{"@type":"ListItem","position":2,"name":"FLEX in CSS"}]},{"@type":"WebSite","@id":"https:\/\/lhotsetechnologies.com\/blog\/#website","url":"https:\/\/lhotsetechnologies.com\/blog\/","name":"AEM Blog | Lhotse Technologies","description":"","publisher":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/lhotsetechnologies.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/lhotsetechnologies.com\/blog\/#organization","name":"AEM Blog | Lhotse Technologies","url":"https:\/\/lhotsetechnologies.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/lhotsetechnologies.com\/blog\/wp-content\/uploads\/2019\/07\/lhotse-logo.png","contentUrl":"https:\/\/lhotsetechnologies.com\/blog\/wp-content\/uploads\/2019\/07\/lhotse-logo.png","width":539,"height":172,"caption":"AEM Blog | Lhotse Technologies"},"image":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/person\/d1daa7081420d3cf2a02c309ee3f5800","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/829547de0cecf5477afeaf7ff2a49fc87a026be43cb5403fa54d0fd419192479?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/829547de0cecf5477afeaf7ff2a49fc87a026be43cb5403fa54d0fd419192479?s=96&d=mm&r=g","caption":"admin"},"url":"https:\/\/lhotsetechnologies.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/480","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/comments?post=480"}],"version-history":[{"count":2,"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/480\/revisions"}],"predecessor-version":[{"id":482,"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/480\/revisions\/482"}],"wp:attachment":[{"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/media?parent=480"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/categories?post=480"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/tags?post=480"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}