CODEWITHSUNDEEP
csstwitter-bootstrap-3flexbox
pwas
pwas

Reputation: 3373

Divide flex column into two rows

I've the following columns (Fiddle: https://jsfiddle.net/DTcHh/15420/embedded/result/) Layout

The column's same height is achieved with flex:

@media (min-width: 992px) {
       .columns-equal {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
    }
}

(media used to keep responsiveness)

How can can I divide second column into two rows that fill whole column? e.g.: Desired

(I want to make row's content centered)

Is flex good approach? I believe I can use table-display, but it brokes the responsiveness.

Upvotes: 2

Views: 9263

Answers (1)

DavidDomain
DavidDomain

Reputation: 15293

You can set the col-bordered elements display to flex as well and use flex-flow of column nowrap. Setting flex to 1 on the child elements of col-bordered will force them to have equal height.

I have also set the flex property of col-bordered to 0 1 50% to give them an equal width.

Here is the example.

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

.columns-equal {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.col-bordered {
    display: flex;
    flex-flow: column nowrap;
    flex: 0 1 50%;
}

.col-bordered div {
    flex: 1;
}

.row-acc-1 {
    background-color: green
}

.row-acc-2 {
    background-color: red
}

.col-bordered {
    border: 2px solid black
}
<div class="container">
  <div class="row columns-equal">
    <div class="col-md-6 col-bordered">
      <span>
        Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
      </span>
    </div>
    <div class="col-md-6 col-bordered">
      <div class="row row-acc-1">
        <a>Test</a>
      </div>
      <div class="row row-acc-2">
        <a>Test 2</a>
      </div>
    </div>
  </div>
</div>

Upvotes: 4

Related Questions