Can someone assist me with arranging these divs within my flexbox layout?

Question

Can someone assist me with arranging these divs within my flexbox layout?

I'm having a tough time figuring out why the flex box aspect is making things so complicated for me. My goal is to achieve responsiveness like this -

https://i.sstatic.net/MdzPO.png

Despite following various flex tutorials, I haven't been successful. Here's my HTML/CSS:

<div class="frame">
                <div id = "topBar">

                </div>
                <div id = "leftCol">

                </div>
                <div id = "rightCol">

                </div>
                <div id = "center">
                    <span>
                            </span>
                </div>
                <div id = "bottomCol">

                </div>
            </div>

CSS:

    .frame {
        position: fixed;
        display: none;
        z-index: 10000;
        top: 0;
        left: 0;
        display: flex;
        width: 100%;
        max-width: none;
        height: 100vh;
        padding: 3rem;
        box-sizing: border-box;
        bottom: 0;
        text-align: center;
        // grid-template-columns: 15% 70% 15%;
        // grid-template-rows: 15% 70% 15%;
    }

#topBar {
    text-align: center;
    justify-content: center;
  align-items: center;
    float: center;
    width: 100%;

}

#bottomCol {
        align-self: flex-end;
        width: 100%;
            text-align: center;
}
#bottomCol p {

    transform: rotate(0deg);
    display: inline-block;
    padding: 0;
    padding-right: 6px;
}
#leftCol {
    float: left;
    width: 33%;
    position: relative;

}

#leftCol > h2, p{
     transform: rotate(-90deg);
}
#rightCol {
    float: right;
    position: relative;
    transform: rotate(90deg);
}
.scrollBar {
    width: 2px;
    height: 55px;
    background: white;
    border-radius: 10px;
    top: 15px;
    overflow-y: scroll;
}
#center {
    position: relative;
    overflow: visible;
    bottom: 200px;
    width: 300px;
}

The current setup doesn't meet my requirements. How can I make it work as intended?

javascript html css

Answer 1

Answer №1

Utilizing the power of Grid Layout, achieving this layout is a breeze. Here's an example considering your requirements:

Define the overall layout in the #page selector and then designate each grid area in subsequent selectors:

#page {
        display: grid;
        width: 100vw;
        height: 100vh;
        grid-template-areas:
          "leftCol topBar rightCol"
          "leftCol center rightCol"
          "leftCol bottomCol rightCol";
        grid-template-rows: 1fr 5fr 1fr;
        grid-template-columns: 1fr 5fr 1fr;
      }

      #topBar {
        grid-area: topBar;
        background-color: #ffa08c;
      }

      #leftCol {
        grid-area: leftCol;
        background-color: #8ca0ff;
      }

      #rightCol {
        grid-area: rightCol;
        background-color: #ffff64;
      }

      #center {
        grid-area: center;
        background-color: #8cffa0;
      }

      #bottomCol {
        grid-area: bottomCol;
        background-color: #ff8c8c;
      }

<div id="page">
      <div id="topBar">
        <h2>01-02-2020</h2>
      </div>
      <div id="leftCol">
        <h1>'-'</h1>
        <h2>lightbulbs</h2>
      </div>
      <div id="rightCol">
        <p>[</p>
        <div class="scrollBar"></div>
        <p>]</p>
      </div>
      <div id="center">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae alias, dolore, deleniti sed
          explicabo natus reprehenderit quae iure nostrum aliquam illo nihil velit totam corrupti,
          debitis reiciendis quibusdam nam vel!
        </p>
      </div>
      <div id="bottomCol">
        <p id="aggregate" style="transform: rotate(0deg);">[aggregate]</p>
        <p id="daily" style="transform: rotate(0deg);">daily</p>
      </div>
    </div>

Answer 2

Utilizing the power of Grid Layout, achieving this layout is a breeze. Here's an example considering your requirements:

Define the overall layout in the #page selector and then designate each grid area in subsequent selectors:

#page {
        display: grid;
        width: 100vw;
        height: 100vh;
        grid-template-areas:
          "leftCol topBar rightCol"
          "leftCol center rightCol"
          "leftCol bottomCol rightCol";
        grid-template-rows: 1fr 5fr 1fr;
        grid-template-columns: 1fr 5fr 1fr;
      }

      #topBar {
        grid-area: topBar;
        background-color: #ffa08c;
      }

      #leftCol {
        grid-area: leftCol;
        background-color: #8ca0ff;
      }

      #rightCol {
        grid-area: rightCol;
        background-color: #ffff64;
      }

      #center {
        grid-area: center;
        background-color: #8cffa0;
      }

      #bottomCol {
        grid-area: bottomCol;
        background-color: #ff8c8c;
      }

<div id="page">
      <div id="topBar">
        <h2>01-02-2020</h2>
      </div>
      <div id="leftCol">
        <h1>'-'</h1>
        <h2>lightbulbs</h2>
      </div>
      <div id="rightCol">
        <p>[</p>
        <div class="scrollBar"></div>
        <p>]</p>
      </div>
      <div id="center">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae alias, dolore, deleniti sed
          explicabo natus reprehenderit quae iure nostrum aliquam illo nihil velit totam corrupti,
          debitis reiciendis quibusdam nam vel!
        </p>
      </div>
      <div id="bottomCol">
        <p id="aggregate" style="transform: rotate(0deg);">[aggregate]</p>
        <p id="daily" style="transform: rotate(0deg);">daily</p>
      </div>
    </div>

Answer 3

Answer №2

Learning Flexbox was a challenge for me at first, but let me break it down and help with your flexbox issue. Hopefully, this explanation will clear things up for you. Flexbox operates in one direction, using containers to establish that direction.

.page-container{
    display:flex;
    flex-direction:row;
    border:solid 5px red;
    padding: 3rem;
    justify-content:stretch;
    align-items:stretch;
    min-height: 100vh;
 }
.page-element {
    margin: 0 1rem 0 1rem;
    border:solid 1px;
}
.left-container{
    flex: 0 1 350px;
    margin-left:0;
}
.center-container{
    display:flex;
    flex-direction:column;
    flex:1;
}
.right-container{
    flex: 0 1 350px;
    margin-right:0;
}

.top-container{
    flex: 0 1 150px;
    border:solid 1px;
}
.middle-container{
    flex: 1 0 50%;
}
.bottom-container{
    flex: 0 1 150px;
    border:solid 1px;
}

<div class="page-container">
  <div class="page-element left-container">
    left
  </div>
  <div class="page-element center-container">
    <div class="top-container">
      top
    </div>
    <div class="middle-container">
      center
    </div>
    <div class="bottom-container">
      bottom
    </div>
  </div>
  <div class="page-element right-container">
    right
  </div>
</div>

After setting up the containers, you can define the directions in your CSS.

To start, define the layout of your first 3 columns. While it may seem strange, they are actually in one row in flexbox and will be displayed next to each other, so the page-container should have flex-direction:row.

The challenging part is the center-container since it contains 3 sections. In flexbox, these will be arranged in one column, so set the flex-direction to column.

I hope this explanation helps clarify things for you.

Answer 4

Learning Flexbox was a challenge for me at first, but let me break it down and help with your flexbox issue. Hopefully, this explanation will clear things up for you. Flexbox operates in one direction, using containers to establish that direction.

.page-container{
    display:flex;
    flex-direction:row;
    border:solid 5px red;
    padding: 3rem;
    justify-content:stretch;
    align-items:stretch;
    min-height: 100vh;
 }
.page-element {
    margin: 0 1rem 0 1rem;
    border:solid 1px;
}
.left-container{
    flex: 0 1 350px;
    margin-left:0;
}
.center-container{
    display:flex;
    flex-direction:column;
    flex:1;
}
.right-container{
    flex: 0 1 350px;
    margin-right:0;
}

.top-container{
    flex: 0 1 150px;
    border:solid 1px;
}
.middle-container{
    flex: 1 0 50%;
}
.bottom-container{
    flex: 0 1 150px;
    border:solid 1px;
}

<div class="page-container">
  <div class="page-element left-container">
    left
  </div>
  <div class="page-element center-container">
    <div class="top-container">
      top
    </div>
    <div class="middle-container">
      center
    </div>
    <div class="bottom-container">
      bottom
    </div>
  </div>
  <div class="page-element right-container">
    right
  </div>
</div>

After setting up the containers, you can define the directions in your CSS.

To start, define the layout of your first 3 columns. While it may seem strange, they are actually in one row in flexbox and will be displayed next to each other, so the page-container should have flex-direction:row.

The challenging part is the center-container since it contains 3 sections. In flexbox, these will be arranged in one column, so set the flex-direction to column.

I hope this explanation helps clarify things for you.

Answer 5

Answer №3

Flex can only be oriented in one direction, either vertically or horizontally.

By analyzing the image, it is evident that the layout will be horizontal, but for the central part, it will switch to a vertical orientation.

Therefore, we need to nest those middle elements within another flex container.

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body * {
    padding: 20px;
    border: 1px solid;
}

[container] {
    height: 100vh;
}

[container], [nested] {
    display: flex;
}

[container]>div {
    margin: 5px;
}

[nested] {
    flex-direction: column;
    flex: 1;
    padding: 0;
    border: 0;
}

[nested]>div:nth-child(2) {
    flex: 1;
    margin: 5px 0;
}

<div container>
  <div></div>
  <div nested>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div></div>
</div>

If modifying the html structure is not feasible, there is an alternative solution but it requires setting a fixed height for the container.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body * {
  padding: 20px;
  border: 1px solid;
}

[container] {
  display: flex;
  height: 100vh;
  flex-direction: column;
  flex-wrap: wrap;
}

[container]>div {
  margin: 5px;
}

[container]>div:first-child,
[container]>div:last-child {
  height: 100%;
}

[container]>div:nth-child(3) {
  flex: 1;
}

<div container>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 6

Flex can only be oriented in one direction, either vertically or horizontally.

By analyzing the image, it is evident that the layout will be horizontal, but for the central part, it will switch to a vertical orientation.

Therefore, we need to nest those middle elements within another flex container.

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body * {
    padding: 20px;
    border: 1px solid;
}

[container] {
    height: 100vh;
}

[container], [nested] {
    display: flex;
}

[container]>div {
    margin: 5px;
}

[nested] {
    flex-direction: column;
    flex: 1;
    padding: 0;
    border: 0;
}

[nested]>div:nth-child(2) {
    flex: 1;
    margin: 5px 0;
}

<div container>
  <div></div>
  <div nested>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div></div>
</div>

If modifying the html structure is not feasible, there is an alternative solution but it requires setting a fixed height for the container.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body * {
  padding: 20px;
  border: 1px solid;
}

[container] {
  display: flex;
  height: 100vh;
  flex-direction: column;
  flex-wrap: wrap;
}

[container]>div {
  margin: 5px;
}

[container]>div:first-child,
[container]>div:last-child {
  height: 100%;
}

[container]>div:nth-child(3) {
  flex: 1;
}

<div container>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Can someone assist me with arranging these divs within my flexbox layout?

Answer №1

Answer №2

Answer №3

Similar questions

Autofill with JavaScript - Dynamic Form Population

Exploring the power of .forEach() with EJS and Mongoose

Determine the product of the total value entered in a textbox and the percentage entered in another textbox to

Guide on transferring a JWT token to a Node.js backend

When bullet points are aligned in the middle of wrapped text instead of the top line

Top method for creating a checkbox filter to toggle the display of elements depending on various data-* attributes

Ways to avoid text covering the button using CSS

Angular Material Rotate Ink Bar to Vertical Orientation

Experimenting with Vuejs by testing a function that delivers a Promise upon the execution of the "Created" hook

Is it possible for Nextjs routing catchAll to coexist with a slug folder within a route?

Implementing real-time style changes with Angular 6 through Environment Variables

Listen for a click event on an Unordered List using addEventListener

JavaScript truthy values referring to numbers

Align elements vertically with React-Bootstrap by using the built-in functionality for center

Unable to run JavaScript file fetched from cache API

User Interface Components in Backbone Views

How can JavaScript routes be used to apply specific code to multiple pages on a website?

The Link component in the router dom should only be active when validation passes successfully

Preventing the opening of a past event's modal dialog in jQuery

The local sending time from the frontend to the backend automatically adjusts and is reduced by 2 hours