{"id":6334,"date":"2024-04-14T19:00:19","date_gmt":"2024-04-14T11:00:19","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6334"},"modified":"2024-04-14T19:00:19","modified_gmt":"2024-04-14T11:00:19","slug":"uniform-size-layouts-with-flexbox","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/uniform-size-layouts-with-flexbox\/","title":{"rendered":"Uniform size layouts with flexbox"},"content":{"rendered":"\n
\n

When utilizing the columns element<\/a>, achieving equal heights for all columns can be challenging, especially when each column contains varying content. While setting a fixed pixel height is a possibility, it may lead to reflowing issues. Here we\u2019ll explore how to establish uniform size layouts using flexbox.\u00a0<\/p>\n

Within this instructional session<\/h5>\n
    \n
  • Establishing the layout<\/li>\n
  • Adjusting\u00a0the parent to flex and aligning the children for stretching<\/li>\n
  • Determining column width<\/li>\n
  • Applying the auto margin technique<\/li>\n<\/ul>\n
    Prior to commencing<\/h5>\n

    To replicate the initial arrangement seen in the video, insert a div block onto your page. Populate it with some content: a heading, a paragraph, a button. Duplicate the div block twice to obtain 3 div blocks each with content. Modify the content as needed.<\/p>\n

    Establishing the layout<\/h2>\n

    For instance, assume we already have three div blocks with content on the page, each sharing identical class names and styles. We will introduce a container to the page, assign it a class, and insert these three div blocks within it.<\/p>\n

    \n
    Three divs named Pricing block are housed within a container labeled Flex container. These divs encompass text and a button each. They are vertically stacked with the second one featuring a green \"Best choice\" badge.<\/div>\n<\/figure>\n

    Adjusting\u00a0the parent to flex and aligning the children for stretching<\/h2>\n

    Once the three div blocks are nested within the container, we can change the container\u2019s display setting to flex.<\/p>\n

    The default flex settings are configured to Direction: Horizontal,<\/strong>Justify: Start<\/strong>, and Align: Stretch<\/strong>, precisely meeting the requirements for uniform height.<\/p>\n

    \n
    \"The<\/div>\n<\/figure>\n

    Determining column width<\/h2>\n

    However, note that the divs’ widths are not uniform. You can achieve uniformity by setting the div blocks\u2019 width to 33.33%<\/strong> (alternatively, you can perform calculations like 100\/3%<\/strong>, then hit enter). Alternatively, you can designate the div blocks\u2019 flex child settings to Expand.<\/strong><\/p>\n

    \n
    \"Two<\/div>\n<\/figure>\n

    Auto margin technique<\/h2>\n

    In this scenario, we aim to align the content within the divs uniformly. This can also be achieved using flexbox configurations.<\/p>\n

      \n
    1. Choose one of the divs<\/li>\n
    2. Modify its display setting to flex<\/li>\n
    3. Configure the Flex layout to Vertical<\/li>\n
    4. Select the button<\/li>\n
    5. Adjust its top margin to auto<\/li>\n<\/ol>\n

      Consequently, the button\u2019s margin will automatically adapt, leading to uniform alignment of all three buttons.<\/p>\n

      \n
      On the left, the button with the text \"get in touch now\" is selected. On the right, the popup window for the top margin displays the Auto setting in action. This setting is highlighted.<\/div>\n<\/figure>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Use flexbox to set equal heights for columns \u2014 even when each column has different content inside.","protected":false},"author":2,"featured_media":6335,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[284],"tags":[],"class_list":{"0":"post-6334","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6334","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=6334"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6334\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/6335"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6334"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6334"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}