[ANSWERED] html – How can I have 4 ‘trays’ in each side of a box with flexbox with stretching?

Question 1

A simple float configuration can do this without flexbox:

html,
body {
  height: 100%;
  margin: 0;
  text-align: center;
}

#root {
  background-color: blue;
  height: 100%;
}

.tray {
  box-sizing: border-box;
  background-color: red;
  border: thin solid black;
}

.tray-top,
.tray-bottom {
  height: 48px;
  line-height:48px;
  clear: both;
}

.tray-left,
.tray-right {
  width: 48px;
  height: calc(100% - 96px);
  float: left;
}

.tray-right {
  float: right;
}
/* to align vertically the content */
.tray-left::before,
.tray-right::before {
  content:"";
  display:inline-block;
  height:50%;
}

<div id="root">
  <div class="tray tray-top">top</div>
  <div class="tray tray-left">left</div>
  <div class="tray tray-right">right</div>
  <div class="tray tray-bottom">bottom</div>
</div>

Question 2

CSS-Grid can do that:

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  text-align: center;
}

#root {
  background-color: blue;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

.tray {
  box-sizing: border-box;
  background-color: red;
  border: thin solid black;
}

.tray-top {
  height: 48px;
  grid-column: 1 / -1;
}

.tray-bottom {
  height: 48px;
  grid-column: 1 / -1;
}

.tray-left {
  width: 48px;
}

.tray-right {
  width: 48px;
  grid-column:3;
}

<div id="root">
    <div class="tray tray-top">top</div>
    <div class="tray tray-left">left</div>
    <div class="tray tray-right">right</div>
    <div class="tray tray-bottom">bottom</div>
</div>

Question 3

There is a main div (#root) in which I need 4 inner divs, each one on one side fully stretched (run code snippet to see).

Right now I’m in here:

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  text-align: center;
}

#root {
  background-color: blue;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 100%;
}

.tray {
  box-sizing: border-box;
  background-color: red;
  border: thin solid black;
}

.tray-top {
  height: 48px;
  width: 100%;
}

.tray-bottom {
  height: 48px;
  width: 100%;
  align-self: flex-end;
}

.tray-left {
  width: 48px;
}

.tray-right {
  width: 48px;
}

<div id="root">
    <div class="tray tray-top">top</div>
    <div class="tray tray-left">left</div>
    <div class="tray tray-right">right</div>
    <div class="tray tray-bottom">bottom</div>
</div>

Now I want left and right to stretch fully between top and bottom.

Please note that all trays have a fixed width (left, right) or fixed height (top, bottom).

I’d avoid nesting more divs into the existing ones.

Flexbox is not a must but I found it easy and future-proof compared to other possibilities.

Bollate

[ANSWERED] html – How can I have 4 ‘trays’ in each side of a box with flexbox with stretching?

By

Solution 1 :

Solution 2 :

Problem :

Comments

Comment posted by Temani Afif

Comment posted by Daniel

Comment posted by Daniel

By

Related Post

[ANSWERED] html – Hidden Div Text Reappears?

[ANSWERED] c# – InvalidCastException when reading mshtml.HTMLDocument.Script property

[ANSWERED] HTML & Javascript – make text appear when dropdown menu option selected

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate