How to use flexbox to position 3 buttons horizontally?

Question

I have 3 buttons that I'm trying to position in a line together (e.g. prev btn, middle btn, next btn) where now I just have it displayed as one button on top of the other 2. I can't change the html just the css fyi

    body {
      color: #838383;
      font-family: "Mada", sans-serif;
      font-size: 0.875rem;
    }

    .post .pagination {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding-top: 1.5rem;
      padding-bottom: 1.5rem;
    }

    .post .pagination a {
      width: 48%;
    }

    .post .pagination .link {
      border: 2px solid #007cad;
      text-align: center;
      margin-bottom: 0.75rem;
      padding: 0.5rem;
    }

    .post .pagination a,
    .post .pagination .view-all {
      text-decoration: none;
      color: #007cad;
      font-weight: 700;
    }

    .post .pagination .view-all {
      width: 100%;
    }

    /* hover effects */
    .pagination .link {
      background: #fff;
      color: #007cad;
      background-size: 250% 100%;
    }

    .pagination .next .link {
      background: linear-gradient(to left, #fff 50%, #007cad 50%);
      background-size: 250% 100%;
      background-position: right top;
      transition: all 0.5s ease;
      max-width: 250px;
    }

    .pagination .prev .link {
      background: linear-gradient(to right, #fff 50%, #007cad 50%);
      background-size: 250% 100%;
      background-position: left top;
      transition: all 0.5s ease;
      max-width: 250px;
    }

    .pagination .next .link:hover {
      background-position: left top;
    }

    .pagination .prev .link:hover {
      background-position: right top;
    }

    .pagination .next .link:hover,
    .pagination .prev .link:hover {
      background-color: #007cad;
      color: #fff;
      opacity: 1;
    }

    @media only screen and (min-width: 1366px) {
      .post .pagination {
        padding-right: 0.9375rem;
        padding-left: 0.9375rem;
        max-width: 50rem;
        margin: 0px auto 0 auto;
      }
    }

      <body>
        
        <div class="post grid-x grid-padding-x">
            <div class="small-12 medium-10 medium-offset-1 cell pagination"> 
                <a class="view-all">
                    <div class="link">View full team member list</div>
                </a>
                    <a class="prev">
                        <div class="link">&lt; Prev bio</div>
                    </a>
                    <a class="next">
                        <div class="link">Next bio &gt;</div>
                    </a>

            </div>
        </div>
      </body>

I have 3 buttons that I'm trying to position in a line together (e.g. prev btn, middle btn, next btn) where now I just have it displayed as one button on top of the other 2. I've used flexbox to display how it currently is but i'm having a hard time trying to align these buttons together like the solution picture I uploaded.

  <body>

    <div class="post grid-x grid-padding-x">
        <div class="small-12 medium-10 medium-offset-1 cell pagination"> 
            <a class="view-all">
                <div class="link">View full team member list</div>
            </a>
                <a class="prev">
                    <div class="link">&lt; Prev bio</div>
                </a>
                <a class="next">
                    <div class="link">Next bio &gt;</div>
                </a>

        </div>
    </div>
  </body>

You'll need to post the relevant CSS classes to see what they're doing. — squaregoldfish, Jul 10 '19 at 13:29
Are you using Zurb Foundation? Do you have any existing styles affecting your code? We need to see a [mre] to provide help that will truly apply. — TylerH, Jul 10 '19 at 13:29
Assuming you want to do this with CSS, please _show your CSS_ — random_user_name, Jul 10 '19 at 13:29

Arno Tenkink · Accepted Answer · 2019-07-10T13:39:15.840

You can use display: flex; to move elements around if you can't change the structure. (not recommended). If you can change the HTML itself it would be easier. If you want to put them next to eachother you can use some CSS flexbox.

You can learn more about flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    body {
      color: #838383;
      font-family: "Mada", sans-serif;
      font-size: 0.875rem;
    }

    .post .pagination {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding-top: 1.5rem;
      padding-bottom: 1.5rem;
    }

    .post .pagination a {
      flex: 1; /* changed */
      margin: 10px; /* added */
    }

    .post .pagination .link {
      border: 2px solid #007cad;
      text-align: center;
      margin-bottom: 0.75rem;
      padding: 0.5rem;
    }

    .post .pagination a,
    .post .pagination .view-all {
      text-decoration: none;
      color: #007cad;
      font-weight: 700;
    }

    .post .pagination .view-all {
      /* width: 100%; -- removed */
      order: 2;
    }
    
    /* added */
    .post .pagination .next {
      order: 3;
    }
    /* end added */

    /* hover effects */
    .pagination .link {
      background: #fff;
      color: #007cad;
      background-size: 250% 100%;
    }

    .pagination .next .link {
      background: linear-gradient(to left, #fff 50%, #007cad 50%);
      background-size: 250% 100%;
      background-position: right top;
      transition: all 0.5s ease;
      max-width: 250px;
    }

    .pagination .prev .link {
      background: linear-gradient(to right, #fff 50%, #007cad 50%);
      background-size: 250% 100%;
      background-position: left top;
      transition: all 0.5s ease;
      max-width: 250px;
    }

    .pagination .next .link:hover {
      background-position: left top;
    }

    .pagination .prev .link:hover {
      background-position: right top;
    }

    .pagination .next .link:hover,
    .pagination .prev .link:hover {
      background-color: #007cad;
      color: #fff;
      opacity: 1;
    }

    @media only screen and (min-width: 1366px) {
      .post .pagination {
        padding-right: 0.9375rem;
        padding-left: 0.9375rem;
        max-width: 50rem;
        margin: 0px auto 0 auto;
      }
    }

<div class="post grid-x grid-padding-x">
  <div class="small-12 medium-10 medium-offset-1 cell pagination">
    <a class="view-all" href="<?= get_field('team_page', 'options') ?>">
      <div class="link">View full team member list</div>
    </a>
    <a class="prev">
      <div class="link">&lt; Prev bio</div>
    </a>
    <a class="next">
      <div class="link">Next bio &gt;</div>
    </a>

  </div>
</div>

It's not recommended to use the order property (screenreaders etc.) *if* you can change the HTML itself, but in some cases, it can be helpfull. -- Aded your own css style that was missing before you edited your post. — Arno Tenkink, Jul 10 '19 at 13:40

How to use flexbox to position 3 buttons horizontally?

1 Answers1