Flexbox columns algin two top, two mid and two bottom without container & undesired gaps-CodePudding

This is a setup for my amp portait pages(just fyi).

Setup: For a flexbox who puts the items by default at bottom in column format. Lets say i have 5 elements as an example and have 3 classes: top, mid & bottom(by default not needed as .container is just-content:flex-end).

h2,h3 { padding:0; margin:0; border-top:1px solid gray }
.flex { height: 100%; min-height:460px; 
    display: flex; justify-content: flex-end; flex-direction: column; width:320px; }

.top{ }
.mid { }
.btm { }

<div >
<h2 >Top Heading 2</h2><p >Top para</p>
<h3 >Mid Heading 3</h3><p >mid para</p>
<h3 >Btm Heading 3</h3><p >bottom para</p>
</div>

Problem: What should be .top, .mid & .bottom such that they come top:goes to top(without undesired margins), mid: exact mid(not mid of left space) & any pending items at bottom.

I have created a jsfiddle for this.

Have messed around 2 days to fix, but one or other thing goes wrong, hence finally asking for help.

CodePudding user response：

Here you go...

You probably cannot achieve this without some jQuery. You need to calculate the height of the flex element and then divide it by 3, but container_3 should have set height: auto !important;. Whether this is an appropriate solution depends on the content you want to put into these three containers. Let me know if this is helpful.

See the snippet below.

$(document).ready(function() {
  var container_height = $('.flex').height();
  var divide_height = (container_height / 3);
  $('.container_1, .container_2, .container_3').css("height", divide_height);
});

h2,
h3 {
  padding: 0;
  margin: 0;
  border-top: 1px solid gray
}

.flex {
  height: 100%;
  min-height: 460px;
  width: 320px;
  border: 1px solid black;
}

.flex>div {
  width: 100%;
  display: flex;
}

.container_1,
.container_2,
.container_3 {
  display: flex;
  align-items: start;
}

.container_3 {
  height: auto !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV 4mjoKBsE4x3H BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div >
  <div >
    <div>
      <h2 >Top Heading 2</h2>
      <p >Top para</p>
    </div>
  </div>
  <div >
    <div>
      <h3 >Mid Heading 3</h3>
      <p >mid para</p>
    </div>
  </div>
  <div >
    <div>
      <h3 >Btm Heading 3</h3>
      <p >bottom para</p>
      <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi leo urna molestie at elementum eu facilisis. Sed viverra ipsum nunc aliquet bibendum. Ultrices sagittis orci a scelerisque
        purus. Quam elementum pulvinar etiam non quam lacus. Vitae purus faucibus ornare suspendisse sed nisi lacus sed viverra. Odio euismod lacinia at quis risus sed. Sit amet cursus sit amet dictum sit amet justo. Et magnis dis parturient montes nascetur
        ridiculus. Mattis molestie a iaculis at erat pellentesque adipiscing.</p>
      <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi leo urna molestie at elementum eu facilisis. Sed viverra ipsum nunc aliquet bibendum. Ultrices sagittis orci a scelerisque
        purus. Quam elementum pulvinar etiam non quam lacus. Vitae purus faucibus ornare suspendisse sed nisi lacus sed viverra. Odio euismod lacinia at quis risus sed. Sit amet cursus sit amet dictum sit amet justo. Et magnis dis parturient montes nascetur
        ridiculus. Mattis molestie a iaculis at erat pellentesque adipiscing.</p>
    </div>
  </div>
</div>