This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Closed 1 year ago.
How to achieve this layout with flexbox, that each element automatically takes up the space and slides in the empty space?
see this image for example
Here's the answer
#parent {
display: flex;
}
#main {
flex: 10;
}
#left {
flex: 3;
margin-left: 20px;
}
.left-box {
margin-bottom: 15px;
height: 400px;
background: #7f7f7f;
}
.right-box {
height: 400px;
background: #42664d;
}
.big-box {
background: orange;
height: 100%;
}
<div id="parent">
<div id="main">
<div class="left-box">
Left Box
</div>
<div class="right-box">
Left Box
</div>
</div>
<div id="left">
<div class="big-box">Big Box</div>
</div>
<div></div>
</div>
Related
This question already has answers here:
Fill remaining vertical space with CSS using display:flex
(6 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Make a div fill the height of the remaining screen space
(41 answers)
Closed 10 months ago.
<div style="height: 100%; background: red">
<div style="height: 100px; background: green">
</div>
<div style="background: blue;">
<h1>Content</h1>
</div>
</div>
How to put content of blue box to center of free plase of red block.
Parent block must have height 100%.
Like this:
Flex box would be good for this issue.
* {
margin: 0px;
padding: 0px;
}
.h {
height: 100px;
background: green;
}
.m {
background: blue;
color: white;
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: calc(100vh - 100px);
}
<div class="w">
<div class="h">header</div>
<div class="m" >
<h1>Content</h1>
</div>
</div>
You should read about flex-box since it will make your life much easier when it comes to such alignments and I am sure you wont regret it. (https://www.w3schools.com/css/css3_flexbox.asp)
(Additional resource for flex-box, my personal favorite: https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
Please let me know if this isn't the desired outcome and I will try to fix it according to your request.
.parent {
height: 100%;
background: red;
}
.header {
height: 100px;
background-color: green;
}
.content {
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
height: 500px;
}
<div class="parent">
<div class="header">
</div>
<div class="content">
<h1>Content</h1>
</div>
</div>
This question already has answers here:
Left column and stacked right column using flexbox CSS [duplicate]
(2 answers)
Closed 1 year ago.
I have below layout.
When i am making the screen size smaller, the blue box is going to next line. But its position is right below where the red box ended. Currently, I am having trouble positioning the blue box to start position. How can i achieve this without using Grid ->
Here's my html and css -
<div class="order-confirmation">
<div class="confirmation-body-area">
<div class="box box-1">Box 1</div>
<div class="box box-2">Box 2</div>
<div class="box box-3">Box 3</div>
</div>
</div>
.order-confirmation {
.confirmation-body-area {
width: 90%;
margin: auto;
.box {
display: inline-block;
}
.box-1 {
background: red;
height: 214px;
width: 631px;
float: left;
}
.box-2 {
background: blue;
height: 214px;
width: 427px;
float: right;
}
.box-3 {
background: yellow;
height: 214px;
width: 631px;
clear: both;
}
}
}
It is aligning to end of first because of float. Try removing float for box 1 and box 2
This question already has answers here:
How to select a range of elements in repeated pattern
(2 answers)
Closed 1 year ago.
I have a list of elements I want to style 2 and 3 per row alternatively. Ideally I want a CSS solution.
Regardless of using float, flex, or grid, there is still the issue of the CSS selector.
I was initially thinking of using something like :nth-child(n+3) and :nth-child(n+2) but that made no sense.
This is the style I'm using right now, but I'm looking for a more dynamic solution.
.parent {
display: flex;
flex-wrap: wrap;
}
.element {
display: flex;
justify-content: center;
margin-bottom: 50px;
width: 50px;
height: 50px;
}
.element > div {
background-color: black;
width: 100px;
}
.element:nth-child(1),
.element:nth-child(2) {
width: 50%;
}
.element:nth-child(3),
.element:nth-child(4),
.element:nth-child(5) {
width: 33%;
}
.element:nth-child(6),
.element:nth-child(7) {
width: 50%;
}
<div class="parent">
<div class="element">
<div></div>
</div>
<div class="element">
<div></div>
</div>
<div class="element">
<div></div>
</div>
<div class="element">
<div></div>
</div>
<div class="element">
<div></div>
</div>
<div class="element">
<div></div>
</div>
<div class="element">
<div></div>
</div>
</div>
Here's a fiddle, this might be what you're looking for
https://jsfiddle.net/xch0m5zy/
.box:nth-child(-n+3) {
background-color: blue;
}
.box:nth-child(n+4) {
background-color: red;
}
.box:nth-child(n+7) {
background-color: green;
}
This question already has answers here:
Maintain the aspect ratio of a div with CSS
(37 answers)
Closed 2 years ago.
I devide the div into two parts, and achieve with Flex Box in each part.
<!--My Trials-->
<body>
<div>
<div class="container1" style="display: flex;">
<div class="item1" style="flex:1;background-color: yellowgreen;">1</div>
<div class="item1" style="flex:1;background-color: lightseagreen;">2</div>
<div class="item1" style="flex:1;background-color: palevioletred">3</div>
</div>
<div class="container2" style="display: flex;">
<div class="item2" style="flex:1;background-color: lightskyblue;">4</div>
<div class="item2" style="flex:2;visibility: hidden;">5</div><!-- hide the 5th div -->
</div>
</div>
</body>
I wonder how to turn each div into a square.
And Is there anyway can achive the layout without the help of the 5th div?
.container {
display: flex;
flex-wrap: wrap;
}
.item1 {
height: 100px;
width: 33%;
background-color: lightblue;
color: black;
}
.item2 {
height: 100px;
width: 33%;
background-color: lawngreen;
color: black;
}
.item3 {
height: 100px;
width: 33%;
background-color: pink;
color: black;
}
.item4 {
height: 100px;
width: 33%;
background-color: orange;
color: black;
}
<body>
<div class="container">
<div class="item1">This is square 1</div>
<div class="item2">This is square 2</div>
<div class="item3">This is square 3</div>
<div class="item4">This is square 4</div>
</div>
</body>
The flex-wrap property allows elements to move to the next row when there is no more space on the current row. Making it completely responsive. And the width property is set to take up 33% of the view port window at all times.
Let me know if that works or if you need help with anything.
This question already has answers here:
Fill the remaining height or width in a flex container
(2 answers)
How to make a div fill a remaining horizontal space?
(26 answers)
Closed 3 years ago.
.parent {
display: flex;
}
.first {
width: 100px;
}
.second {
display: flex;
}// This is also flex parent div
<div class="parent">
<div class="first">first</div>
<div class="second">second
<div></div>
<div></div>
</div>
</div>
How to expand the second div to the rest? I don't want to use calc for second div style.
Add flex:1 to the .second div (borders included to show the actual size)
.parent {
display: flex;
}
.first {
width: 100px;
border: 1px green solid;
}
.second {
flex: 1;
border: 1px red solid;
display: flex;
}
<div class="parent">
<div class="first">first</div>
<div class="second">second</div>
</div>
This will set the flex-grow property to 1
Use flex property value to 1 for .second class. This will fit the second div to rest of width.
.parent {
display: flex;
}
.first {
width: 100px;
border: 1px solid black;
}
.second {
flex: 1;
border: 1px solid black;
}
<div class="parent">
<div class="first">first</div>
<div class="second">second
<div></div>
<div></div>
</div>
</div>