Anthony George Anthony George - 1 year ago 109
CSS Question

Can Flex be used vertically and horizontally?

Ok so i've run into a bit of a problem with flex css.

Basically i have created a web app and to separate each tab i have used icons (a little js to show and hide the divs) and flex to align the icons.

So I have a situation like this:

Apologies for lack of source code, but my problem lies with the content div.

I would like to use column flex to fill the remainder of the screen available how ever it only seems that you can only have 1 flex container and flex in one direction, is this correct?

Also is there any other way to divide the remaining space available for content?

Answer Source

Use nested flexboxes, this does the job:

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
  padding: 3px;
.row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border: 1px solid blue;
.row div {
  background-color: #AAA;
<div class="container">
  <div class="row">
    <p>Thalassius vero ea tempestate praefectus praetorio praesens ipse quoque adrogantis ingenii, considerans incitationem eius ad multorum augeri discrimina, non maturitate vel consiliis mitigabat, ut aliquotiens celsae potestates iras principum molliverunt,</p>
    <p>sed adversando iurgandoque cum parum congrueret, eum ad rabiem potius evibrabat, Augustum actus eius exaggerando creberrime docens, idque, incertum qua mente, ne lateret adfectans. quibus mox Caesar acrius efferatus, velut contumaciae quoddam vexillum</p>

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