1

I'm more of a back-end guy and I'm struggling with achieving "flexboxy" look that I have intended.

While viewing on decent screen size design looks as it should, but when it gets too small it gets messed up: https://jsfiddle.net/kre7fbjo/1/

.flex-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 0;
}

.flex-container .card-panel {
    width: 30%;
    margin: 1%;
    text-align: center;
    min-width: 220px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css" rel="stylesheet"/>
<div class="card-panel grey lighten-5">
    <div class="flex-container">
        <div class="card-panel white-text blue lighten-2">
            <h5>Some text</h5>
        </div>
        <div class="card-panel white-text blue lighten-2">
            <h5>Some text</h5>
            <h6>(and some more text)</h6>
        </div>
        <div class="card-panel white-text blue lighten-2">
            <h5>Some text</h5>
            <h6>(and some more text)</h6>
        </div>
    </div>
    <div class="flex-container">
        <div class="card-panel">
            <h1 class="blue-text text-lighten-2">TEXT</h1>
        </div>
        <div class="card-panel">
            <h5 class="blue-text text-lighten-2 left-align">some</h5>
            <h2 class="blue-text text-lighten-2 center-align">More</h2>
            <h5 class="blue-text text-lighten-2 right-align">text</h5>
        </div>
        <div class="card-panel">
            <h4 class="blue-text text-lighten-2 center-align">
                This text doesn't matter stop reading it!
            </h4>
        </div>
    </div>
</div>

I understand why this happens, but I'm not really sure how to make it work. I know I'd have make an element where top and bottom is included inside and it would be flexed, but how do I make all head pieces equal height and all body pieces equal height if they are in different elements. Should I even use flexbox?

Thank you for any help!

Update: Result should be something between code I already provided and: https://jsfiddle.net/kre7fbjo/13/

NoOorZ24
  • 2,914
  • 1
  • 14
  • 33
  • So your problem is that elements `height` changes when they wrap to different line? – IiroP Jul 02 '18 at 10:52
  • 1
    Possible duplicate of [Equal height rows in a flex container](https://stackoverflow.com/questions/36004926/equal-height-rows-in-a-flex-container) – IiroP Jul 02 '18 at 10:58
  • @IiroP I added another fiddle and result should be something between them. "Possible duplicate" answer doesn't really solve my problem – NoOorZ24 Jul 02 '18 at 11:08
  • @IiroP blue parts shouldn't be same size as white parts. All blue parts should be equal size and all blue parts should be equal size, but blue parts are meant as headers and white parts are meant as bodies with more info – NoOorZ24 Jul 02 '18 at 11:11
  • @NoOorZ24 I'm afraid `flex` cannot do what you wanted. The possible duplicated from @liroP is actually correct answer. You must either set `min-height` for these headers elements. This is multiple flex container across. – Toan Lu Jul 02 '18 at 11:33

0 Answers0