0

Is there any property in Flexbox which can stick Sign Up button to the footer similar to the first card rather than moving up in card 2, card 3 & card 4 ?

* { margin: 0; padding: 0; box-sizing: border-box; }

.container { display: flex; flex-direction: row; }

.box { border: 1px solid black; width: 300px; margin-right: 20px; }

.image { width: 100%;}
img { width: 100%; }

.content { padding: 0 20px; }

.bottom { padding: 40px 20px; text-align: center; border-top: 1px solid black;}
<div class="container">
    <div class="box">
      <div class="image">
        <img src="http://placehold.jp/400x200.png" />
      </div>
      <div class="content">
        <h3>Title</h3>
        <div class="desc">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est provident natus quis repudiandae eius. Maxime illo dolor molestias eius. Dolor distinctio sed voluptatum, laboriosam animi recusandae eaque tempora nostrum, quos enim temporibus impedit voluptate vero dicta repudiandae quas harum, voluptas quia aspernatur error et rerum repellendus? Quibusdam sequi, porro saepe.</p>
          <ul>
            <li class="item">Item 1</li>
            <li class="item">Item 2</li>
            <li class="item">Item 3</li>
            <li class="item">Item 4</li>
            <li class="item">Item 5</li>
            <li class="item">Item 6</li>
          </ul>
        </div>
      </div>
      <div class="bottom">
        <button>Sign Up</button>
      </div>
    </div>

    <div class="box">
        <div class="image">
          <img src="http://placehold.jp/400x200.png" />
        </div>
        <div class="content">
          <h3>Title</h3>
          <div class="desc">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, sed!</p>
            <ul>
              <li class="item">Item 1</li>
              <li class="item">Item 2</li>
              <li class="item">Item 3</li>
              <li class="item">Item 4</li>
              <li class="item">Item 5</li>
              <li class="item">Item 6</li>
            </ul>
          </div>
        </div>
        <div class="bottom">
          <button>Sign Up</button>
        </div>
      </div>

      <div class="box">
        <div class="image">
          <img src="http://placehold.jp/400x200.png" />
        </div>
        <div class="content">
          <h3>Title</h3>
          <div class="desc">
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Soluta ducimus ea doloremque in sequi exercitationem consequuntur quam, omnis dolor nobis.</p>
            <ul>
              <li class="item">Item 1</li>
              <li class="item">Item 2</li>
              <li class="item">Item 3</li>
              <li class="item">Item 4</li>
              <li class="item">Item 5</li>
              <li class="item">Item 6</li>
            </ul>
          </div>
        </div>
        <div class="bottom">
          <button>Sign Up</button>
        </div>
      </div>

      <div class="box">
        <div class="image">
          <img src="http://placehold.jp/400x200.png" />
        </div>
        <div class="content">
          <h3>Title</h3>
          <div class="desc">
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam nam excepturi fugit. Magnam cumque, earum quisquam accusantium ad tenetur, alias fugit, natus at qui consequuntur quo aliquid amet quod doloremque!</p>
            <ul>
              <li class="item">Item 1</li>
              <li class="item">Item 2</li>
              <li class="item">Item 3</li>
              <li class="item">Item 4</li>
              <li class="item">Item 5</li>
              <li class="item">Item 6</li>
            </ul>
          </div>
        </div>
        <div class="bottom">
          <button>Sign Up</button>
        </div>
      </div>
  </div>

dadsad

Nesh
  • 2,389
  • 7
  • 33
  • 54

0 Answers0