Split the flex column into two separate rows

Question

Split the flex column into two separate rows

These are the columns I have (Fiddle: https://jsfiddle.net/DTcHh/15420/embedded/result/) https://i.sstatic.net/Uvi0g.png

Using flex, I was able to achieve equal height for the columns:

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

(I used media queries for responsiveness)

How can I split the second column into two rows that fill the entire column, centered like this: https://i.sstatic.net/E5l3Q.png

(I want the content of each row to be centered)

Is using flex the best approach? I am considering using table-display, but it seems to break the responsiveness.

css twitter-bootstrap-3 flexbox

Answer 1

Answer №1

If you want to ensure equal height for the child elements of col-bordered, try setting their display property to flex and using flex-flow: column nowrap. By also setting the flex value to 1 on these child elements, you can achieve the desired result.

To make sure that the elements within col-bordered have equal width, consider setting the flex property of col-bordered to 0 1 50%.

Below is an 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 ... (content truncated for brevity)
      </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>

Answer 2

If you want to ensure equal height for the child elements of col-bordered, try setting their display property to flex and using flex-flow: column nowrap. By also setting the flex value to 1 on these child elements, you can achieve the desired result.

To make sure that the elements within col-bordered have equal width, consider setting the flex property of col-bordered to 0 1 50%.

Below is an 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 ... (content truncated for brevity)
      </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>

Split the flex column into two separate rows

Answer №1

Similar questions

The media query targeting a specific max-width and below appears to be malfunctioning

Switching between fixed and unfixed divs causes two absolute divs to alternate

What is the best way to horizontally center items within an unordered list (ul li) inside a div class

Icons that are clickable in ionic

I'm attempting to execute a piece of code that retrieves a status count from a dataframe, the output of which will be displayed above my pandas html table

Modify the background hue of a personalized WordPress HTML block using supplementary CSS styling

Arranging titles on the top of the page in a column format, resembling an index

Mastering image focus with javascript: A comprehensive guide

Can you explain the functionality of the combination selector "AB," where "A" and "B" represent any selectors?

Styling the center menu

What is the best way to make a basic slider with a smooth fade transition?

"After completing the survey form, the User Details form is displayed upon clicking the submit button

Is it possible to convert a Button into an input text field?

An exciting tutorial on creating a animated dropdown using vueJS

Leveraging jQuery to dynamically load an icon based on the content within a <label> tag

Adjusted the background scale transformation without impacting the content inside the div

Creating diagonal background cutouts using CSS

Position three divs in the center and at the top of my master page

The animation-play-state is set to 'running', however, it refuses to start playing

Maintaining the position of the screen as you type in information that is located outside of the container