{"id":588,"date":"2025-05-19T10:42:26","date_gmt":"2025-05-19T10:42:26","guid":{"rendered":"https:\/\/buhave.com\/courses\/?p=588"},"modified":"2025-05-20T12:57:38","modified_gmt":"2025-05-20T12:57:38","slug":"flexbox-layout","status":"publish","type":"post","link":"https:\/\/buhave.com\/courses\/css\/flexbox-layout\/","title":{"rendered":"Flexbox Layout"},"content":{"rendered":"

What is Flexbox? How it works: containers and items<\/strong><\/h2>\n

Flexbox, short for Flexible Box Layout, is a CSS module that provides a more efficient way to design flexible and responsive layouts by arranging elements in a one-dimensional row or column, even when their size is unknown or dynamic.<\/p>\n

What Is Flexbox?<\/h3>\n

Flexbox is used to lay out items in a single direction (either horizontal or vertical) with the ability to control spacing, alignment, and distribution of elements\u2014even if their sizes are different.<\/p>\n

It is particularly useful for:<\/strong><\/p>\n

    \n
  • Creating navigation bars<\/li>\n
  • Aligning form elements<\/li>\n
  • Building responsive grids<\/li>\n
  • Designing layouts without using floats or positioning hacks<\/li>\n<\/ul>\n

    How Flexbox Works: Key Concepts<\/strong><\/p>\n

    1. Flex Container<\/strong><\/p>\n

    To use Flexbox, define a parent element as a flex container using display: flex.<\/p>\n

    .container {<\/em>
    \ndisplay: flex;<\/em>
    \n}<\/em><\/p>\n

      \n
    • This changes the behavior of its child elements, turning them into flex items.<\/li>\n<\/ul>\n

      2. Flex Direction<\/strong><\/p>\n

      Use flex-direction to define the main axis:<\/p>\n

        \n
      • Row (default): left to right<\/li>\n
      • Row-reverse: right to left<\/li>\n
      • Column: top to bottom<\/li>\n
      • Column-reverse: bottom to top<\/li>\n<\/ul>\n

        .container {<\/em>
        \ndisplay: flex;<\/em>
        \nflex-direction: row;<\/em>
        \n}<\/em><\/p>\n

        3. Main Axis vs Cross Axis<\/strong><\/p>\n

          \n
        • Main Axis: Direction in which flex items are placed (flex-direction)<\/li>\n
        • Cross Axis: Perpendicular to the main axis
          \nE.g., for flex-direction: row, the main axis is horizontal, cross axis is vertical.<\/li>\n<\/ul>\n

          Flex Items: How They Behave<\/strong><\/p>\n

          4. Justify Content (Main Axis Alignment)<\/strong><\/p>\n

          Controls how items are spaced horizontally (if in a row):<\/p>\n

          justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;<\/em><\/p>\n

          5. Align Items (Cross Axis Alignment)<\/strong><\/p>\n

          Aligns items vertically (if in a row):<\/p>\n

          align-items: stretch | flex-start | flex-end | center | baseline;<\/em><\/p>\n

          6. Align Self (Individual Item Alignment)<\/strong><\/p>\n

          Overrides align-items for a specific item:<\/p>\n

          .item {<\/em>
          \nalign-self: center;<\/em>
          \n}<\/em><\/p>\n

          Sizing & Flex Behavior<\/strong><\/p>\n

          7. Flex Property (Shorthand)<\/strong><\/p>\n

          .item {<\/em>
          \nflex: 1;<\/em>
          \n}<\/em><\/p>\n

          The flex shorthand is:<\/strong><\/p>\n

          flex: grow shrink basis;<\/em><\/p>\n

          Example:<\/strong><\/p>\n

          flex: 1 0 auto;<\/em><\/p>\n

          This means:<\/strong><\/p>\n

            \n
          • Grow: how much the item will grow (relative to others)<\/li>\n
          • Shrink: how much the item can shrink<\/li>\n
          • Basis: default size before growing\/shrinking<\/li>\n<\/ul>\n

            Practical Example:<\/strong><\/p>\n

            <div class=”container”><\/em>
            \n<div class=”item”>1<\/div><\/em>
            \n<div class=”item”>2<\/div><\/em>
            \n<div class=”item”>3<\/div><\/em>
            \n<\/div><\/em><\/p>\n

            .container {<\/em>
            \ndisplay: flex;<\/em>
            \njustify-content: space-between;<\/em>
            \nalign-items: center;<\/em>
            \nheight: 100px;<\/em>
            \n}<\/em><\/p>\n

            .item {<\/em>
            \nbackground: #ccc;<\/em>
            \npadding: 10px;<\/em>
            \n}<\/em><\/p>\n

            This will space out the items evenly across the container and center them vertically.<\/p>\n

            Summary:<\/strong><\/p>\n\n\n\n\n\n\n\n\n\n
            Concept<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
            display: flex<\/span><\/td>\nDeclares a flex container<\/td>\n<\/tr>\n
            flex-direction<\/span><\/td>\nSets layout direction (row or column)<\/td>\n<\/tr>\n
            justify-content<\/span><\/td>\nAligns items on the main axis<\/td>\n<\/tr>\n
            align-items<\/span><\/td>\nAligns items on the cross axis<\/td>\n<\/tr>\n
            flex<\/span><\/td>\nControls growth, shrinkage, and base size<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

            Key Flexbox properties: justify-content, align-items, flex-direction, flex-wrap<\/h2>\n

            Flexbox makes layout design flexible and intuitive by using a few powerful properties. Here’s a breakdown of the most essential Flexbox properties used on the flex container:<\/p>\n

            Justify-content \u2013 Main Axis Alignment<\/h3>\n

            Purpose: Aligns items horizontally (if flex-direction: row) or vertically (if flex-direction: column) along the main axis.<\/p>\n

            Values:<\/strong><\/p>\n

              \n
            • flex-start \u2013 Items align to the start of the container<\/li>\n
            • flex-end \u2013 Items align to the end<\/li>\n
            • center \u2013 Items align to the center<\/li>\n
            • space-between \u2013 Equal space between items (no space at ends)<\/li>\n
            • space-around \u2013 Equal space around each item<\/li>\n
            • space-evenly \u2013 Equal space between and around items<\/li>\n<\/ul>\n

              .container {<\/em>
              \ndisplay: flex;<\/em>
              \njustify-content: space-between;<\/em>
              \n}<\/em><\/p>\n

              align-items \u2013 Cross Axis Alignment<\/h3>\n

              Purpose: Aligns items perpendicularly to the main axis, along the cross axis.<\/p>\n

              Values:<\/strong><\/p>\n

                \n
              • stretch \u2013 (default) Items stretch to fill container height\/width<\/li>\n
              • flex-start \u2013 Align to start of cross axis<\/li>\n
              • flex-end \u2013 Align to end of cross axis<\/li>\n
              • center \u2013 Align in the center<\/li>\n
              • baseline \u2013 Align items by their text baselines<\/li>\n<\/ul>\n

                .container {<\/em>
                \ndisplay: flex;<\/em>
                \nalign-items: center;<\/em>
                \n}<\/em><\/p>\n

                flex-direction \u2013 Main Axis Direction<\/h3>\n

                Purpose: Defines the direction in which items are placed inside the flex container.<\/p>\n

                Values:<\/strong><\/p>\n

                  \n
                • row \u2013 Left to right (default)<\/li>\n
                • row-reverse \u2013 Right to left<\/li>\n
                • column \u2013 Top to bottom<\/li>\n
                • column-reverse \u2013 Bottom to top<\/li>\n<\/ul>\n

                  .container {<\/em>
                  \ndisplay: flex;<\/em>
                  \nflex-direction: column;<\/em>
                  \n}<\/em><\/p>\n

                  flex-wrap \u2013 Wrapping Behavior<\/h3>\n

                  Purpose: Controls whether flex items should wrap or stay in a single line.<\/p>\n

                  Values:<\/strong><\/p>\n

                    \n
                  • nowrap \u2013 (default) All items in one line<\/li>\n
                  • wrap \u2013 Items wrap onto multiple lines<\/li>\n
                  • wrap-reverse \u2013 Items wrap onto multiple lines in reverse order<\/li>\n<\/ul>\n

                    .container {<\/em>
                    \ndisplay: flex;<\/em>
                    \nflex-wrap: wrap;<\/em>
                    \n}<\/em><\/p>\n

                    Example Combining All:<\/strong><\/p>\n

                    .container {<\/em>
                    \ndisplay: flex;<\/em>
                    \nflex-direction: row;<\/em>
                    \njustify-content: space-evenly;<\/em>
                    \nalign-items: center;<\/em>
                    \nflex-wrap: wrap;<\/em>
                    \n}<\/em><\/p>\n

                    Summary Table:<\/strong><\/p>\n\n\n\n\n\n\n\n\n
                    Property<\/th>\nFunction<\/th>\nKey Use<\/th>\n<\/tr>\n<\/thead>\n
                    justify-content<\/td>\nAligns items on main axis<\/td>\nSpacing between\/around items<\/td>\n<\/tr>\n
                    align-items<\/td>\nAligns items on cross axis<\/td>\nVertical alignment in a row layout<\/td>\n<\/tr>\n
                    flex-direction<\/td>\nSets direction of item layout<\/td>\nHorizontal or vertical layout<\/td>\n<\/tr>\n
                    flex-wrap<\/td>\nAllows or prevents wrapping<\/td>\nResponsive layouts with wrapping<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

                    Building responsive layouts with Flexbox<\/h2>\n

                    Flexbox (Flexible Box Layout) is a modern CSS layout system that makes it easy to create responsive, fluid layouts without using float hacks or complex media queries. Here’s a detailed look at how to build responsive designs using Flexbox.<\/p>\n

                    Why Flexbox for Responsive Layouts?<\/strong><\/p>\n

                      \n
                    • Flexbox adapts to screen sizes automatically by<\/li>\n
                    • Distributing available space among items<\/li>\n
                    • Allowing items to grow\/shrink dynamically<\/li>\n
                    • Supporting wrapping into multiple lines<\/li>\n<\/ul>\n

                      It works well for both horizontal (rows) and vertical (columns) layout needs\u2014perfect for responsive grids, navbars, forms, and more.<\/p>\n

                      Key Techniques for Responsive Layouts with Flexbox<\/h3>\n

                      1. Enable Flex Behavior<\/strong><\/p>\n

                      Start by turning your container into a flexbox:<\/p>\n

                      .container {<\/em>
                      \ndisplay: flex;<\/em>
                      \n}<\/em><\/p>\n

                      This activates Flexbox and allows its properties to take effect.<\/p>\n

                      2. Use flex-wrap to Allow Wrapping<\/strong><\/p>\n

                      By default, Flexbox tries to keep items on one line. For responsive layouts,<\/p>\n

                      allow items to wrap to the next line when space runs out:<\/p>\n

                      .container {<\/em>
                      \nflex-wrap: wrap;<\/em>
                      \n}<\/em><\/p>\n

                        \n
                      • Combine with flex-direction: row or column as needed.<\/li>\n<\/ul>\n

                        3. Make Items Flexible with flex<\/strong><\/p>\n

                        Each item can be allowed to grow\/shrink with the flex property:<\/p>\n

                        .item {<\/em>
                        \nflex: 1; \/* grow equally *\/<\/em>
                        \n}<\/em><\/p>\n

                        Or set a base width and allow growth\/shrink:<\/p>\n

                        .item {<\/em>
                        \nflex: 1 1 200px; \/* grow, shrink, base size *\/<\/em>
                        \n}<\/em><\/p>\n

                          \n
                        • This ensures your layout adjusts to screen sizes smoothly.<\/li>\n<\/ul>\n

                          4. Align and Distribute Items<\/strong><\/p>\n

                          Control alignment and spacing based on available space:<\/p>\n

                          .container {<\/em>
                          \njustify-content: space-between; \/* horizontal alignment *\/<\/em>
                          \nalign-items: stretch; \/* vertical alignment *\/<\/em>
                          \n}<\/em><\/p>\n

                            \n
                          • These properties help maintain readable and balanced layouts.<\/li>\n<\/ul>\n

                            5. Responsive Column Layout Example<\/strong><\/p>\n

                            <div class=”container”><\/em>
                            \n<div class=”item”>Column 1<\/div><\/em>
                            \n<div class=”item”>Column 2<\/div><\/em>
                            \n<div class=”item”>Column 3<\/div><\/em>
                            \n<\/div><\/em><\/p>\n

                            .container {<\/em>
                            \ndisplay: flex;<\/em>
                            \nflex-wrap: wrap;<\/em>
                            \ngap: 1rem;<\/em>
                            \n}<\/em><\/p>\n

                            .item {<\/em>
                            \nflex: 1 1 300px;<\/em>
                            \nmin-width: 250px;<\/em>
                            \nbackground: #f2f2f2;<\/em>
                            \npadding: 1rem;<\/em>
                            \n}<\/em><\/p>\n

                            This layout will show 3 columns on large screens, 2 on medium, and stack vertically on small screens\u2014all without media queries.<\/p>\n

                            6. Responsive Navbar Example<\/strong><\/p>\n

                            <nav class=”navbar”><\/em>
                            \n<div>Logo<\/div><\/em>
                            \n<ul class=”menu”><\/em>
                            \n<li>Home<\/li><\/em>
                            \n<li>About<\/li><\/em>
                            \n<li>Contact<\/li><\/em>
                            \n<\/ul><\/em>
                            \n<\/nav><\/em><\/p>\n

                            .navbar {<\/em>
                            \ndisplay: flex;<\/em>
                            \njustify-content: space-between;<\/em>
                            \nflex-wrap: wrap;<\/em>
                            \nalign-items: center;<\/em>
                            \n}<\/em>
                            \n.menu {<\/em>
                            \ndisplay: flex;<\/em>
                            \ngap: 1rem;<\/em>
                            \nflex-wrap: wrap;<\/em>
                            \n}<\/em><\/p>\n

                              \n
                            • This navbar will adjust to smaller screens by wrapping the menu items naturally.<\/li>\n<\/ul>\n

                              Summary:<\/strong><\/p>\n\n\n\n\n\n\n\n\n\n
                              Tip<\/strong><\/th>\nBenefit<\/strong><\/th>\n<\/tr>\n<\/thead>\n
                              Use flex-wrap: wrap<\/span><\/td>\nEnsures content wraps on smaller screens<\/td>\n<\/tr>\n
                              Apply flex: 1<\/span> or flex-basis<\/span><\/td>\nDistributes space responsively<\/td>\n<\/tr>\n
                              Combine with gap<\/span><\/td>\nAdds spacing without margins<\/td>\n<\/tr>\n
                              Use min-width<\/span> for stability<\/td>\nPrevents items from shrinking too small<\/td>\n<\/tr>\n
                              Avoid fixed widths<\/td>\nMakes layout more fluid<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

                              Would you like a codepen-style live preview or a mini-project using these techniques?<\/p>\n

                              Aligning items and distributing space in flexible containers<\/h2>\n

                              When using Flexbox, aligning items and distributing space within a container becomes intuitive and powerful. These tasks are handled primarily by justify-content, align-items, align-content, and gap properties on the flex container, giving you precise control over layout behavior.<\/p>\n

                              1. justify-content \u2013 Distribute Space Along Main Axis<\/strong><\/p>\n

                              Used to control the horizontal spacing (if flex-direction: row) or vertical (if column).<\/p>\n

                              Common Values:<\/strong><\/p>\n

                                \n
                              • flex-start: Items aligned to the start<\/li>\n
                              • flex-end: Items aligned to the end<\/li>\n
                              • center: Items centered along the axis<\/li>\n
                              • space-between: Equal space between items<\/li>\n
                              • space-around: Equal space around items (including ends)<\/li>\n
                              • space-evenly: Equal space between and around all items<\/li>\n<\/ul>\n

                                .container {<\/em>
                                \ndisplay: flex;<\/em>
                                \njustify-content: space-between;<\/em>
                                \n}<\/em><\/p>\n

                                2. align-items \u2013 Align Items on Cross Axis<\/h3>\n

                                This property aligns all items perpendicular to the main axis (i.e., vertical alignment in a horizontal layout).<\/p>\n

                                Values:<\/strong><\/p>\n

                                  \n
                                • stretch (default): Items stretch to fill container<\/li>\n
                                • flex-start: Align items to the start of cross axis<\/li>\n
                                • flex-end: Align items to the end<\/li>\n
                                • center: Vertically center items<\/li>\n
                                • baseline: Align based on text baseline<\/li>\n<\/ul>\n

                                  .container {<\/em>
                                  \ndisplay: flex;<\/em>
                                  \nalign-items: center;<\/em>
                                  \n}<\/em><\/p>\n

                                  3. align-content \u2013 Align Multiple Rows (Cross Axis)<\/h3>\n

                                  When flex-wrap: wrap is used and items span multiple lines, align-content controls the alignment of the whole row group.<\/p>\n

                                  Values:<\/strong><\/p>\n

                                    \n
                                  • flex-start, flex-end, center: Align rows as a group<\/li>\n
                                  • space-between, space-around, space-evenly: Distribute space between rows<\/li>\n
                                  • stretch: Stretch rows to fill container height<\/li>\n<\/ul>\n

                                    .container {<\/em>
                                    \ndisplay: flex;<\/em>
                                    \nflex-wrap: wrap;<\/em>
                                    \nalign-content: space-around;<\/em>
                                    \n}<\/em><\/p>\n

                                    4. gap \u2013 Spacing Between Items<\/h3>\n

                                    The gap property adds consistent spacing between flex items (both in rows and columns), without needing margins.<\/p>\n

                                    .container {<\/em>
                                    \ndisplay: flex;<\/em>
                                    \ngap: 1rem;<\/em>
                                    \n}<\/em><\/p>\n

                                      \n
                                    • This is cleaner than using individual margins and supports both directions if wrapping is enabled.<\/li>\n<\/ul>\n

                                      Practical Example:<\/strong><\/p>\n

                                      <div class=”container”><\/em>
                                      \n<div class=”item”>1<\/div><\/em>
                                      \n<div class=”item”>2<\/div><\/em>
                                      \n<div class=”item”>3<\/div><\/em>
                                      \n<\/div><\/em><\/p>\n

                                      .container {<\/em>
                                      \ndisplay: flex;<\/em>
                                      \njustify-content: space-around;<\/em>
                                      \nalign-items: center;<\/em>
                                      \ngap: 20px;<\/em>
                                      \nheight: 200px;<\/em>
                                      \nborder: 1px solid #ccc;<\/em>
                                      \n}<\/em>
                                      \n.item {<\/em>
                                      \nbackground: #e0e0e0;<\/em>
                                      \npadding: 20px;<\/em>
                                      \n}<\/em><\/p>\n

                                      This layout:<\/strong><\/p>\n

                                        \n
                                      • Horizontally spaces items with space-around<\/li>\n
                                      • Vertically centers them<\/li>\n
                                      • Adds equal gaps between them<\/li>\n
                                      • Ensures fluid responsiveness<\/li>\n<\/ul>\n

                                        Summary Table:<\/strong><\/p>\n\n\n\n\n\n\n\n\n
                                        Property<\/th>\nControls<\/th>\nAxis<\/th>\nWhen to Use<\/th>\n<\/tr>\n<\/thead>\n
                                        justify-content<\/span><\/td>\nItem distribution<\/td>\nMain axis<\/td>\nSpace between\/around items<\/td>\n<\/tr>\n
                                        align-items<\/span><\/td>\nItem alignment<\/td>\nCross axis<\/td>\nAlign items top\/bottom or center<\/td>\n<\/tr>\n
                                        align-content<\/span><\/td>\nRow alignment<\/td>\nCross axis<\/td>\nMulti-row layouts with wrapping<\/td>\n<\/tr>\n
                                        gap<\/span><\/td>\nItem spacing<\/td>\nBoth axes<\/td>\nClean spacing between flex items<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

                                        Would you like a Flexbox alignment cheat sheet or a demo layout template to explore these visually?<\/p>\n","protected":false},"excerpt":{"rendered":"

                                        What is Flexbox? How it works: containers and items Flexbox, short for Flexible Box Layout, is a CSS module that provides a more efficient way to design flexible and responsive layouts by arranging elements in a one-dimensional row or column, even when their size is<\/p>\n","protected":false},"author":1,"featured_media":589,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-588","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"yoast_head":"\nFlexbox Layout - CSS Course<\/title>\n<meta name=\"description\" content=\"Flexbox is a powerful CSS layout model for efficiently aligning, distributing, and resizing space among items in a responsive container.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/buhave.com\/courses\/css\/flexbox-layout\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flexbox Layout - CSS Course\" \/>\n<meta property=\"og:description\" content=\"Flexbox is a powerful CSS layout model for efficiently aligning, distributing, and resizing space among items in a responsive container.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/buhave.com\/courses\/css\/flexbox-layout\/\" \/>\n<meta property=\"og:site_name\" content=\"BUHAVE\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/BeYouHave\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/naveedsafdarawan\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-19T10:42:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-20T12:57:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/04\/Flexbox-Layout.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Naveed Safdar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Naveed Safdar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/css\\\/flexbox-layout\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/css\\\/flexbox-layout\\\/\"},\"author\":{\"name\":\"Naveed Safdar\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#\\\/schema\\\/person\\\/04fe0254e118521c9fbb3da39de5acca\"},\"headline\":\"Flexbox Layout\",\"datePublished\":\"2025-05-19T10:42:26+00:00\",\"dateModified\":\"2025-05-20T12:57:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/css\\\/flexbox-layout\\\/\"},\"wordCount\":1575,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/css\\\/flexbox-layout\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/buhave.com\\\/courses\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/Flexbox-Layout.webp\",\"articleSection\":[\"CSS Course\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/buhave.com\\\/courses\\\/css\\\/flexbox-layout\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/css\\\/flexbox-layout\\\/\",\"url\":\"https:\\\/\\\/buhave.com\\\/courses\\\/css\\\/flexbox-layout\\\/\",\"name\":\"Flexbox Layout - CSS Course\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/css\\\/flexbox-layout\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/css\\\/flexbox-layout\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/buhave.com\\\/courses\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/Flexbox-Layout.webp\",\"datePublished\":\"2025-05-19T10:42:26+00:00\",\"dateModified\":\"2025-05-20T12:57:38+00:00\",\"description\":\"Flexbox is a powerful CSS layout model for efficiently aligning, distributing, and resizing space among items in a responsive container.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/css\\\/flexbox-layout\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/buhave.com\\\/courses\\\/css\\\/flexbox-layout\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/css\\\/flexbox-layout\\\/#primaryimage\",\"url\":\"https:\\\/\\\/buhave.com\\\/courses\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/Flexbox-Layout.webp\",\"contentUrl\":\"https:\\\/\\\/buhave.com\\\/courses\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/Flexbox-Layout.webp\",\"width\":1200,\"height\":628,\"caption\":\"Flexbox Layout\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/css\\\/flexbox-layout\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Courses\",\"item\":\"https:\\\/\\\/buhave.com\\\/courses\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Course\",\"item\":\"https:\\\/\\\/buhave.com\\\/courses\\\/learn\\\/css\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Flexbox Layout\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#website\",\"url\":\"https:\\\/\\\/buhave.com\\\/courses\\\/\",\"name\":\"BUHAVE\",\"description\":\"Courses - Learn Online for Free\",\"publisher\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/buhave.com\\\/courses\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#organization\",\"name\":\"BUHAVE\",\"url\":\"https:\\\/\\\/buhave.com\\\/courses\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/buhave.com\\\/courses\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/buhave-course.webp\",\"contentUrl\":\"https:\\\/\\\/buhave.com\\\/courses\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/buhave-course.webp\",\"width\":375,\"height\":75,\"caption\":\"BUHAVE\"},\"image\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/BeYouHave\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/buhave\",\"https:\\\/\\\/www.youtube.com\\\/@buhave\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#\\\/schema\\\/person\\\/04fe0254e118521c9fbb3da39de5acca\",\"name\":\"Naveed Safdar\",\"description\":\"I\u2019m Naveed Safdar - SEO Manager with over 10 years of experience in SEO and Digital Marketing. I\u2019ve had the privilege of working with leading national and international companies including Grafdom, PakWheels, Systems Limited, Confiz, Educative, and Dubizzle Labs. My expertise spans technical SEO, content strategy, organic growth, and performance analytics - helping businesses improve visibility, traffic, and ROI.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/naveedsafdar\\\/\",\"https:\\\/\\\/www.facebook.com\\\/naveedsafdarawan\\\/\",\"https:\\\/\\\/www.youtube.com\\\/@naveedsafdar\"],\"url\":\"https:\\\/\\\/buhave.com\\\/courses\\\/author\\\/naveed-safdar\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Flexbox Layout - CSS Course","description":"Flexbox is a powerful CSS layout model for efficiently aligning, distributing, and resizing space among items in a responsive container.","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:\/\/buhave.com\/courses\/css\/flexbox-layout\/","og_locale":"en_US","og_type":"article","og_title":"Flexbox Layout - CSS Course","og_description":"Flexbox is a powerful CSS layout model for efficiently aligning, distributing, and resizing space among items in a responsive container.","og_url":"https:\/\/buhave.com\/courses\/css\/flexbox-layout\/","og_site_name":"BUHAVE","article_publisher":"https:\/\/www.facebook.com\/BeYouHave\/","article_author":"https:\/\/www.facebook.com\/naveedsafdarawan\/","article_published_time":"2025-05-19T10:42:26+00:00","article_modified_time":"2025-05-20T12:57:38+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/04\/Flexbox-Layout.webp","type":"image\/webp"}],"author":"Naveed Safdar","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Naveed Safdar","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/buhave.com\/courses\/css\/flexbox-layout\/#article","isPartOf":{"@id":"https:\/\/buhave.com\/courses\/css\/flexbox-layout\/"},"author":{"name":"Naveed Safdar","@id":"https:\/\/buhave.com\/courses\/#\/schema\/person\/04fe0254e118521c9fbb3da39de5acca"},"headline":"Flexbox Layout","datePublished":"2025-05-19T10:42:26+00:00","dateModified":"2025-05-20T12:57:38+00:00","mainEntityOfPage":{"@id":"https:\/\/buhave.com\/courses\/css\/flexbox-layout\/"},"wordCount":1575,"commentCount":0,"publisher":{"@id":"https:\/\/buhave.com\/courses\/#organization"},"image":{"@id":"https:\/\/buhave.com\/courses\/css\/flexbox-layout\/#primaryimage"},"thumbnailUrl":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/04\/Flexbox-Layout.webp","articleSection":["CSS Course"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/buhave.com\/courses\/css\/flexbox-layout\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/buhave.com\/courses\/css\/flexbox-layout\/","url":"https:\/\/buhave.com\/courses\/css\/flexbox-layout\/","name":"Flexbox Layout - CSS Course","isPartOf":{"@id":"https:\/\/buhave.com\/courses\/#website"},"primaryImageOfPage":{"@id":"https:\/\/buhave.com\/courses\/css\/flexbox-layout\/#primaryimage"},"image":{"@id":"https:\/\/buhave.com\/courses\/css\/flexbox-layout\/#primaryimage"},"thumbnailUrl":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/04\/Flexbox-Layout.webp","datePublished":"2025-05-19T10:42:26+00:00","dateModified":"2025-05-20T12:57:38+00:00","description":"Flexbox is a powerful CSS layout model for efficiently aligning, distributing, and resizing space among items in a responsive container.","breadcrumb":{"@id":"https:\/\/buhave.com\/courses\/css\/flexbox-layout\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/buhave.com\/courses\/css\/flexbox-layout\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/buhave.com\/courses\/css\/flexbox-layout\/#primaryimage","url":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/04\/Flexbox-Layout.webp","contentUrl":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/04\/Flexbox-Layout.webp","width":1200,"height":628,"caption":"Flexbox Layout"},{"@type":"BreadcrumbList","@id":"https:\/\/buhave.com\/courses\/css\/flexbox-layout\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Courses","item":"https:\/\/buhave.com\/courses\/"},{"@type":"ListItem","position":2,"name":"CSS Course","item":"https:\/\/buhave.com\/courses\/learn\/css\/"},{"@type":"ListItem","position":3,"name":"Flexbox Layout"}]},{"@type":"WebSite","@id":"https:\/\/buhave.com\/courses\/#website","url":"https:\/\/buhave.com\/courses\/","name":"BUHAVE","description":"Courses - Learn Online for Free","publisher":{"@id":"https:\/\/buhave.com\/courses\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/buhave.com\/courses\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/buhave.com\/courses\/#organization","name":"BUHAVE","url":"https:\/\/buhave.com\/courses\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/buhave.com\/courses\/#\/schema\/logo\/image\/","url":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/03\/buhave-course.webp","contentUrl":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/03\/buhave-course.webp","width":375,"height":75,"caption":"BUHAVE"},"image":{"@id":"https:\/\/buhave.com\/courses\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/BeYouHave\/","https:\/\/www.linkedin.com\/company\/buhave","https:\/\/www.youtube.com\/@buhave"]},{"@type":"Person","@id":"https:\/\/buhave.com\/courses\/#\/schema\/person\/04fe0254e118521c9fbb3da39de5acca","name":"Naveed Safdar","description":"I\u2019m Naveed Safdar - SEO Manager with over 10 years of experience in SEO and Digital Marketing. I\u2019ve had the privilege of working with leading national and international companies including Grafdom, PakWheels, Systems Limited, Confiz, Educative, and Dubizzle Labs. My expertise spans technical SEO, content strategy, organic growth, and performance analytics - helping businesses improve visibility, traffic, and ROI.","sameAs":["https:\/\/www.linkedin.com\/in\/naveedsafdar\/","https:\/\/www.facebook.com\/naveedsafdarawan\/","https:\/\/www.youtube.com\/@naveedsafdar"],"url":"https:\/\/buhave.com\/courses\/author\/naveed-safdar\/"}]}},"_links":{"self":[{"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/posts\/588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/comments?post=588"}],"version-history":[{"count":1,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/posts\/588\/revisions"}],"predecessor-version":[{"id":590,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/posts\/588\/revisions\/590"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/media\/589"}],"wp:attachment":[{"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/media?parent=588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/categories?post=588"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/tags?post=588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}