I am attempting to transform
<div></div>
<div></div>
<div></div>
Three consecutive divs into the following format. Div 1 is red, div 2 is green, and div 3 is blue.
I have achieved this using floats, like so:
.div1 { float: left; }
.div2 { float: left; }
.div3 { float: left; }
However, I am struggling to accomplish the same layout with flexbox. Is there a way to achieve this using flexbox?
The Legit Way:
*Recommended
.flex-row {
flex-direction: row;
display: flex;
}
.flex-column {
flex-direction: column;
display: flex;
}
.flex-body {
display: flex;
}
.flex-body div:not([class*="flex"]) {
border: 1px solid white;
flex: 1 1 200px;
width: 300px;
}<div class="flex-body">
<div class="flex-row">
<div style="background: #0980cc;"></div>
</div>
<div class="flex-column">
<div style="background: #09cc69;"></div>
<div style="background: #cc092f;"></div>
</div>
</div>The Hacky Approach:
*Not Recommended (You'll see why)
.flex-body {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
justify-content: flex-end;
align-content: stretch;
align-items: stretch;
transform: rotate(90deg);
max-width: 500px;
margin: auto;
}
.flex-body div {
border: 1px solid white;
height: 300px;
flex: 1 1 200px;
}
.flex-body div:last-of-type {
flex: 1 1 300px;
height: 300px;
}<div class="flex-body">
<div style="background: #0980cc;"></div>
<div style="background: #09cc69;"></div>
<div style="background: #cc092f;"></div>
</div>Upon further reflection, it seems that utilizing flexbox can indeed solve the issue at hand. All that is required is for the container to have a set height specified in either percentage (%), pixels (px), or viewport height (vh).
body {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 100vh;
}
.a {
flex: 0 0 100%;
background: red;
}
.b, .c {
flex: 0 0 50%;
background: green;
}
.c {
background: blue;
}
Implementing the flexbox property is straightforward - all you need is a container for three div elements.
First, create a div with a class of .box and insert the respective div elements. Assign classes for colors: .red, .green, and .blue; and also classes to manage columns: left and right.
<div class="box">
<div class="left red"></div>
<div class="right green"></div>
<div class="right blue"></div>
</div>
Next, declare the box class as a flexbox:
.box {
display: flex;
...
}
Specify the direction as column (vertical) and if it should be allowed to wrap using wrap:
.box {
...
flex-flow: column wrap;
...
}
You can also set the dimensions of the div elements. The left one will occupy 45% of the parent's width and 100% of its height.
.left {
width: 45%;
height: 100%;
}
Meanwhile, the right element will take up 55% of the parent's width and half (50%) of its height.
.right {
width: 55%;
height: 50%;
}
Complete example shown below:
.box {
display: flex;
flex-flow: column wrap;
width: 400px;
height: 100px;
}
.red {
background: #cc092f;
}
.green {
background: #09cc69;
}
.blue {
background: #0980cc;
}
.left {
width: 45%;
height: 100%;
}
.right {
width: 55%;
height: 50%;
}<div class="box">
<div class="left red"></div>
<div class="right green"></div>
<div class="right blue"></div>
</div>Delving into Dynamic HTML table creation, I'm currently using jquery for rendering purposes. At the moment, I am only displaying the table. The Goal I aim to segment my table into four columns or a grid structure Something akin to this: https://i. ...
I need help creating a unique menu list with a white border design. The borders should all be straight by default, except for the last border which must be slanted. ul { background-color: #183650; } li { list-style: none; display: inline-block; b ...
I am trying to implement a function that will go back when the cancel button is clicked. Here is the view code: <div ng-controller="goodCtrl"> <button class="btn" ng-click="cancel()">Cancel</button> </div> And here is the Jav ...
I have implemented a menu on my site in two different ways - one using text and the other using pictures. Users can click on both types of menus. Now, I am looking to create an interactive feature where hovering over a specific item in the text menu (such ...
Picture this scenario: <div> <input tabindex="1"> </div> <div style="display:none"> <input tabindex="2"> </div> <div> <input tabindex="3"> </div> As I attempt to tab through these input f ...
Previously, this CSS workaround was effective up to iOS version 15.6; however, it does not seem to be functioning in iOS 16. @media not all and (min-resolution:.001dpcm) { @supports (-webkit-appearance:none) {} } Are there any updated techniques avail ...
While trying to make my website responsive, I planned on using media queries to adjust text size and other elements. The issue arises because I rely on bootstrap for setting text sizes. Is there a way to apply bootstrap classes in my CSS file? For instanc ...
I am currently working with Node.js and attempting to utilize a local function within a document that requires the JSON I send in the res.render. Is there a method to achieve this? Below is an example of how I attempted to implement it: <%local_vari ...
I am trying to replicate the stacked image effect seen on kickstarter.com. However, I am facing an issue where the images do not overflow on the screen as desired. The arrow indicates the area that needs to be filled with the image. Check out the image he ...
The Bootstrap grid system consists of 12 columns in total. I am looking to utilize all 12 columns on the page. However, my goal is to have the first 6 columns on the left side be half the width (50%) of the columns on the right side. This means that the ...
I can't seem to get flexbox to fill the spaces as I want it to. I've been trying to figure out what I'm missing, but I just can't wrap my head around it. Here's a recreation of the issue with a link to a codepen. I want the div in ...
<div class="companies"> <ul class="logos"> <li><img src="images/image1.png" alt="" height="25px" /></li> <li><img src="images/image2.png" alt="" height="25px" /></li> <li> ...
I have this code snippet that toggles text on button click: <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> function toggleText(){ ...
I need help with a basic HTML form that includes jQuery. My goal is to: 1) Retrieve the value into a JavaScript variable. 2) Send it as JSON to a server. Here is the form: <div data-role="main" class="ui-content"> <data=role "form" ...
I'm having difficulty making my side spry menu extend the full length of the webpage. I tried using this code: $("nav").css({ "height" : $("nav").height() }); but it still isn't working as expected. I just want the grey color, like ...
Is there a way to retrieve the color name from RBG or HEX code using JavaScript or JQuery? Take for instance: Color Name RGB black #000000 white #FFFFFF red #FF0000 green #008000 ...
Currently, I am working on a single-page website that utilizes keyboard-controlled scrolling. To achieve the desired scroll effect, I have developed a JavaScript function that animates divs. Here is the JavaScript code: var current_page = "#first"; func ...
I'm trying to keep the text centered inside a spinning div by using absolute positioning on the children. I haven't found a solution yet, but I attempted to position it absolutely and disable the transition in the child element. I've include ...
I have successfully displayed data without using a ngFor loop. However, it is currently showing all the quote information from multiple customers. The CSS is arranged in such a way that the discount div is positioned next to the customerinfo div. Below is ...
I have a concept in mind, but I'm struggling to piece it together. I have bits of different methods that just don't seem to align. That's why I'm reaching out for your expertise. Let's say I have 3 content containers with the clas ...