{"id":96,"date":"2025-03-21T17:59:20","date_gmt":"2025-03-21T17:59:20","guid":{"rendered":"https:\/\/kingstatue.com\/?p=96"},"modified":"2025-03-21T17:59:20","modified_gmt":"2025-03-21T17:59:20","slug":"css-property-display-flex","status":"publish","type":"post","link":"https:\/\/www.kingstatue.com\/?p=96","title":{"rendered":"CSS – Property display: flex"},"content":{"rendered":"\n

Flex box layout<\/strong>.<\/p>\n\n\n\n

.container{
    display: flex;
    justify-content: center;
    align-items: center;<\/code>
}
<\/code><\/pre>\n\n\n\n
\n\n\n\n
1. display: flex;<\/code><\/strong><\/h2>\n\n\n\n
    \n
  • Enables Flexbox<\/strong> for the element.<\/li>\n\n\n\n
  • Makes child elements (flex items) automatically adjust based on the flex container’s rules.<\/li>\n\n\n\n
  • Allows better alignment and spacing control compared to traditional methods like float<\/code> or inline-block<\/code>.<\/li>\n<\/ul>\n\n\n\n
    \n\n\n\n
    2. justify-content: center;<\/code><\/strong><\/h2>\n\n\n\n
      \n
    • Aligns child elements horizontally<\/strong> in the center<\/strong> of the flex container.<\/li>\n\n\n\n
    • Works along the main axis<\/strong> (default is left to right).<\/li>\n\n\n\n
    • Example of different values:\n
        \n
      • flex-start<\/code> \u2192 Aligns items to the left<\/strong>.<\/li>\n\n\n\n
      • flex-end<\/code> \u2192 Aligns items to the right<\/strong>.<\/li>\n\n\n\n
      • space-between<\/code> \u2192 Places items with equal space<\/strong> between them.<\/li>\n\n\n\n
      • space-around<\/code> \u2192 Gives equal space<\/strong> around items.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
        \n\n\n\n
        3. align-items: center;<\/code><\/strong><\/h2>\n\n\n\n
          \n
        • Aligns child elements vertically<\/strong> in the center<\/strong> of the flex container.<\/li>\n\n\n\n
        • Works along the cross axis<\/strong> (default is top to bottom).<\/li>\n\n\n\n
        • Example of different values:\n
            \n
          • flex-start<\/code> \u2192 Aligns items to the top<\/strong>.<\/li>\n\n\n\n
          • flex-end<\/code> \u2192 Aligns items to the bottom<\/strong>.<\/li>\n\n\n\n
          • stretch<\/code> \u2192 Stretches items to fill the container<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
            \n\n\n\n
            Example: Centering a Box Inside a Container<\/strong><\/h3>\n\n\n\n
            .container {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 300px;
                height: 200px;
                background-color: lightgray;
            }

            .box {
                width: 100px;
                height: 50px;
                background-color: blue;
                color: white;
                text-align: center;
            }
            <\/code><\/pre>\n\n\n\n
            <div class=\"container\">
                <div class=\"box\">Centered<\/div>
            <\/div>
            <\/code><\/pre>\n\n\n\n
            How It Works?<\/strong><\/h3>\n\n\n\n
              \n
            • .container<\/code> becomes a flexbox<\/strong>.<\/li>\n\n\n\n
            • .box<\/code> is positioned horizontally & vertically centered<\/strong> inside .container<\/code>.<\/li>\n<\/ul>\n\n\n\n
              When you apply display: flex;<\/code> to an element (e.g., .container<\/code>), it turns into a flex container<\/strong>, and its direct child elements<\/strong> become flex items<\/strong>. This means:<\/p>\n\n\n\n
                \n
              1. The container gains control<\/strong> over how its child elements are arranged.<\/li>\n\n\n\n
              2. The child elements align and distribute<\/strong> dynamically based on Flexbox properties.<\/li>\n\n\n\n
              3. The container follows a main axis and a cross axis<\/strong> for positioning items.<\/li>\n<\/ol>\n\n\n\n
                \n\n\n\n
                1. Flex Container (display: flex;<\/code>)<\/strong><\/h2>\n\n\n\n
                When display: flex;<\/code> is applied to .container<\/code>, it becomes a flex container<\/strong>.<\/p>\n\n\n\n
                  \n
                • Before applying Flexbox:<\/strong>\n
                    \n
                  • Child elements behave as block<\/strong> or inline<\/strong> elements.<\/li>\n\n\n\n
                  • They stack vertically<\/strong> or flow inline<\/strong> based on default behavior.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                  • After applying Flexbox:<\/strong>\n
                      \n
                    • Child elements (.box<\/code>, etc.) behave as flex items<\/strong>.<\/li>\n\n\n\n
                    • You can control alignment, spacing, wrapping, and ordering<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
                      \n\n\n\n
                      2. Flex Items (Child Elements)<\/strong><\/h2>\n\n\n\n
                      Any direct children inside the .container<\/code> automatically become flex items<\/strong>.
                      These items respond to flex properties<\/strong> such as:<\/p>\n\n\n\n
                        \n
                      • justify-content<\/code> (Horizontal alignment)<\/li>\n\n\n\n
                      • align-items<\/code> (Vertical alignment)<\/li>\n\n\n\n
                      • flex-wrap<\/code>, flex-grow<\/code>, order<\/code>, etc.<\/li>\n<\/ul>\n\n\n\n
                        \n\n\n\n
                        3. Flexbox Works on Two Axes<\/strong><\/h2>\n\n\n\n
                        When .container<\/code> is set to display: flex;<\/code>, it follows two axes<\/strong>:<\/p>\n\n\n\n
                          \n
                        1. Main Axis (Primary Direction of Items)<\/strong>\n
                            \n
                          • By default, it’s left to right (row-wise).<\/strong><\/li>\n\n\n\n
                          • Controlled by justify-content<\/code>.<\/li>\n\n\n\n
                          • Can be changed using flex-direction: column;<\/code> (to make items stack vertically).<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                          • Cross Axis (Perpendicular to Main Axis)<\/strong>\n
                              \n
                            • By default, it’s top to bottom.<\/strong><\/li>\n\n\n\n
                            • Controlled by align-items<\/code>.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n
                              \n\n\n\n
                              Example: Centering a Box Using Flexbox<\/strong><\/h2>\n\n\n\n
                              .container {
                                  display: flex;
                                  justify-content: center;
                                  align-items: center;
                                  width: 400px;
                                  height: 300px;
                                  background-color: lightgray;
                              }

                              .box {
                                  width: 100px;
                                  height: 50px;
                                  background-color: blue;
                                  color: white;
                                  text-align: center;
                                  line-height: 50px;
                              }<\/code><\/pre>\n\n\n\n
                              <div class=\"container\">
                                  <div class=\"box\">Centered<\/div>
                              <\/div>
                              <\/code><\/pre>\n\n\n\n
                              How It Works?<\/strong><\/h3>\n\n\n\n
                                \n
                              1. .container<\/code> becomes a flexbox<\/strong> (display: flex;<\/code>).<\/li>\n\n\n\n
                              2. .box<\/code> becomes a flex item<\/strong>.<\/li>\n\n\n\n
                              3. justify-content: center;<\/code> moves .box<\/code> horizontally<\/strong> to the center.<\/li>\n\n\n\n
                              4. align-items: center;<\/code> moves .box<\/code> vertically<\/strong> to the center.<\/li>\n<\/ol>\n\n\n\n
                                \n\n\n\n
                                Before vs. After Flexbox<\/strong><\/h2>\n\n\n\n
                                \ud83d\udd34 Without Flexbox (Default Behavior)<\/strong><\/h3>\n\n\n\n
                                  \n
                                • .box<\/code> follows normal document flow.<\/li>\n\n\n\n
                                • To center it, you\u2019d need complex CSS (margin, positioning, etc.).<\/strong><\/li>\n<\/ul>\n\n\n\n
                                  \ud83d\udfe2 With Flexbox<\/strong><\/h3>\n\n\n\n
                                    \n
                                  • .box<\/code> automatically aligns to the center.<\/li>\n\n\n\n
                                  • Less code, more flexibility.<\/strong><\/li>\n<\/ul>\n\n\n\n
                                    \n\n\n\n
                                    Benefits of Flexbox<\/strong><\/h3>\n\n\n\n
                                    \u2714 Simple way to align elements (centering, spacing, distribution).
                                    \u2714 Responsive layouts without media queries.
                                    \u2714 Works well for dynamic content.<\/p>\n\n\n\n
                                    When to Use This?<\/strong><\/h3>\n\n\n\n
                                      \n
                                    • Centering elements easily<\/strong> (e.g., buttons, text, images).<\/li>\n\n\n\n
                                    • Creating responsive layouts<\/strong> without using complex positioning techniques.<\/li>\n\n\n\n
                                    • Aligning multiple items<\/strong> inside a container.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
                                      Flex box layout. .container{ display: flex; justify-content: center; align-items: center;} 1. display: flex; 2. justify-content: center; 3. align-items: center; Example: Centering a Box Inside a Container .container { display: flex;…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-96","post","type-post","status-publish","format-standard","hentry","category-cascading-style-sheet"],"_links":{"self":[{"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=\/wp\/v2\/posts\/96","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=96"}],"version-history":[{"count":0,"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=\/wp\/v2\/posts\/96\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=96"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=96"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=96"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}