0

enter image description here

Below is the code which I am trying to accomplish for desktop and tablet view. please suggest how can I achieve the output for the tablet view.

     <div class="flex-container">
        <div class="item first">1</div>
        <div class="item second">2</div>
        <div class="item third">3</div>
    </div>
  <style>
   .flex-container {
        display: flex;
        background: #f9f8f6;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        text-align: center;

    }

    .flex-container .item{
      flex: 1 1 auto;
      border: 1px solid #ccc;
      height: 5rem;
    }
  </style>
baiju thomas
  • 146
  • 1
  • 2
  • 12
  • At first blush I'd say you might want a flex within a flex. Outer has two items and the right item is s flex with two items. Each of these flexes has a different behavior. – lurker Apr 13 '20 at 17:44
  • I'd suggest using the right tool for the job; since you want your display to adapt from a one-dimensional layout to a two-dimensional layout, I'd recommend using CSS Grid instead of flexbox. – David Thomas Apr 13 '20 at 17:47

0 Answers0