hafizgik hafizgik -4 years ago 64
CSS Question

How to set two directions for flex-box css?

Can I make this flex-box direction using 1 flex container and 4 flex items

----- ----- -----
| 1 | | | | |
----- | 3 | | 4 |
----- | | | |
| 2 | | | | |
----- ----- -----

Answer Source

Using a container around 1 and 2 you can do it, like this:

* {
    box-sizing: border-box;
}
.wrapper {
    display: flex;
    flex-direction: row;
}
.container {
    flex-direction: column;
    flex-grow: 1;
}
.item  {
    background: tomato;
    color: white;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
    flex-grow: 1;
    border: 1px solid black;
}
.inner {
    height: 100px;
    line-height: 100px;
}
.outer {
    height: 200px;
    line-height: 200px;
}
<div class="wrapper">
    <div class="container">
        <div class="item inner">1</div>
        <div class="item inner">2</div>
    </div>
    <div class="item outer">3</div>
    <div class="item outer">4</div>
</div>

But if you don't want to use a container for 1 and 2 I'm afraid you can not do it, because the direction of the children is determined by the parent.

.container {
   flex-direction: row | row-reverse | column | column-reverse;
}

Your best shot is to use the property align-self, this allows the default alignment (or the one specified by align-items) to be overridden for individual flex items. like this:

* {
    box-sizing: border-box;
}
.wrapper {
    display: flex;
    flex-direction: row;
}
.item  {
    background: tomato;
    color: white;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
    flex-grow: 1;
    border: 1px solid black;
}
.inner {
    height: 100px;
    line-height: 100px;
}
.outer {
    height: 200px;
    line-height: 200px;
}

.item-top{
    align-self: flex-start;
}
.item-bottom{
    align-self: flex-end;
}
<div class="wrapper">
    <div class="item inner item-top">1</div>
    <div class="item inner item-bottom">2</div>
    <div class="item outer">3</div>
    <div class="item outer">4</div>
</div>

But note that float, clear and vertical-align have no effect on a flex item.

Check this out for a better understanding of flex box.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download