Flex-box Row Span

Question

I've seen some solutions for this using flex-direction: column but that was for the entire flex container. I already have a container with a row direction and wanted to know if I could make a two row div without changing the whole layout. Here's my current situation.

calculator

I'd like to combine the blank div with the div with the equal sign. Here's my code as well. Thanks a lot!

<div class="container">
    <div class="headline">
        JSCalc
    </div>
    <div class="display">
    </div>
    <div class="button-container">
        <div class="ac all-rows row1 clear">AC</div>
        <div class="ce all-rows row1 clear">CE</div>
        <div class="divide all-rows row1">&divide;</div>
        <div class="multiply all-rows row1">&times;</div>

        <div class="seven all-rows">7</div>
        <div class="eight all-rows">8</div>
        <div class="nine all-rows">9</div>
        <div class="subtract all-rows">-</div>

        <div class="four all-rows">4</div>
        <div class="five all-rows">5</div>
        <div class="six all-rows">6</div>
        <div class="addition all-rows">+</div>

        <div class="three all-rows">3</div>
        <div class="two all-rows">2</div>
        <div class="one all-rows">1</div>
        <div class="all-rows">
        </div>


        <div class="zero all-rows">0</div>
        <div class="decimal all-rows">.</div>
        <div class="all-rows">=</div>
    </div>
</div>

CSS:

html {
background-color: #333;
}

.container {
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 20rem;
    height: 30rem;
    background-color: #f0f0f0;
    border-radius: 3%;
}

.headline {
    width: 100%;
    height: 5%;
    text-align: center;
    font-size: 1.5rem;
    margin-top: 1%;
}

.display {
    height: 20%;
    width: 80%;
    margin: 0 auto;
    background-color: #DFE2DB;
    margin-top: 5%;
    border: 2px solid #c6cbbf;
    border-radius: 5%;
}

.button-container {
    height: 75%;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-content: flex-start;
    flex-wrap: wrap;
}

.all-rows {
    width: 22%;
    background-color: #c6c6c6;
    height: 3.5rem;
    display: inline-block;
    margin: 1% 0 1% 0;
    border-radius: 5%;
    font-size: 2em;
    text-align: center;
    line-height: 3.5rem;
    vertical-align: bottom;
}

.row1 {
    margin-top: 5%;
}

.clear {
    background-color: #e19ba2;
}

.zero {
    width: 47%;
}

.decimal {
    flex-grow: 0;
    width: 22%;
}

Sorry for the delay, slipped my mind! Thanks for your help. – George Wright Sep 01 '17 at 13:49 — George Wright, Sep 01 '17 at 13:49

Asons · Accepted Answer · 2017-08-25T06:08:56.993

The simplest solution is to use a pseudo and bridge the two, visually.

Add these 2 rules (and the equal class to the markup)

.equal {
    position: relative;
}
.equal::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 90%;            /* start 10% below the top to cover the rounded border */
    height: 100%;
    background: inherit;
}

Note, when you add the events, you need to add the "equal" event to both the equal button and the one above it.

Stack snippet

html {
background-color: #333;
}

.container {
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 20rem;
    height: 30rem;
    background-color: #f0f0f0;
    border-radius: 3%;
}

.headline {
    width: 100%;
    height: 5%;
    text-align: center;
    font-size: 1.5rem;
    margin-top: 1%;
}

.display {
    height: 20%;
    width: 80%;
    margin: 0 auto;
    background-color: #DFE2DB;
    margin-top: 5%;
    border: 2px solid #c6cbbf;
    border-radius: 5%;
}

.button-container {
    height: 75%;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-content: flex-start;
    flex-wrap: wrap;
}

.all-rows {
    width: 22%;
    background-color: #c6c6c6;
    height: 3.5rem;
    display: inline-block;
    margin: 1% 0 1% 0;
    border-radius: 5%;
    font-size: 2em;
    text-align: center;
    line-height: 3.5rem;
    vertical-align: bottom;
}

.row1 {
    margin-top: 5%;
}

.clear {
    background-color: #e19ba2;
}

.zero {
    width: 47%;
}

.decimal {
    flex-grow: 0;
    width: 22%;
}

.equal {
    position: relative;
}
.equal::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 90%;            /* start 10% below the top to cover the rounded border */
    height: 100%;
    background: inherit;
}

<div class="container">
    <div class="headline">
        JSCalc
    </div>
    <div class="display">
    </div>
    <div class="button-container">
        <div class="ac all-rows row1 clear">AC</div>
        <div class="ce all-rows row1 clear">CE</div>
        <div class="divide all-rows row1">&divide;</div>
        <div class="multiply all-rows row1">&times;</div>

        <div class="seven all-rows">7</div>
        <div class="eight all-rows">8</div>
        <div class="nine all-rows">9</div>
        <div class="subtract all-rows">-</div>

        <div class="four all-rows">4</div>
        <div class="five all-rows">5</div>
        <div class="six all-rows">6</div>
        <div class="addition all-rows">+</div>

        <div class="three all-rows">3</div>
        <div class="two all-rows">2</div>
        <div class="one all-rows">1</div>
        <div class="all-rows"></div>

        <div class="zero all-rows">0</div>
        <div class="decimal all-rows">.</div>
        <div class="all-rows equal">=</div>

    </div>
</div>

Another way is to wrap the 3/2/1/0/./ and the /=/ into 2 groups, make those wrappers flex row containers and then adjust their width's/margin's to match the rest of the buttons.

Flex-box Row Span

1 Answers1