I need help with my Flex Box Layout. It should break into two columns, with two divs each, the same time, the first smaller Box shifts down.
BTW: What is the correct syntax, to target Child 2 and 3 at once?
#container_left {
height: 500px;
/*height for testing*/
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: stretch;
flex-wrap: wrap;
}
.item_left {
flex-basis: 200px;
margin: 0.5%;
width: 10%;
}
.item_left:nth-child(2) {
flex-basis: 30%;
flex-grow: 1;
}
.item_left:nth-child(3) {
flex-basis: 30%;
flex-grow: 1;
}
/*Either for testing*/
div {
border: solid 1px;
}
<div id="container_left">
<div class="item_left"></div>
<div class="item_left"></div>
<div class="item_left"></div>
<div class="item_left"></div>
</div>
Try placing two divs in html for two columns and inside those , place two these four divs (two in each).It will be easier.
It seems you are trying to target the 2nd and 3rd child of #container-left, however, .item_left:nth-child(2) will target the 2nd child of elements with the item-left class. To target the nth element from #container-left, you will need to use #container-left:nth-child(2).
#container_left {
height: 500px;
/*height for testing*/
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: stretch;
flex-wrap: wrap;
}
.item_left {
flex-basis: 200px;
margin: 0.5%;
width: 10%;
}
#container-left:nth-child(2) {
flex-basis: 30%;
flex-grow: 1;
}
#container-left:nth-child(3) {
flex-basis: 30%;
flex-grow: 1;
}
/*Either for testing*/
div {
border: solid 1px;
}
Related
I have three flex items all with different height and different widths.
I want the second and third items to be in relation to the first.
My first item is a image, second a text, third another text
I want my second item to be at the center of the flex box and the third to be at the start of second item. I also want the second item to grow and cover the rem area.
How I want my alignment
This is what I am doing
.box {
display: flex;
justify-content: flex-start;
}
.flex-second-item {
align-self: center;
flex-grow: 1
}
You just need to use different flexboxes for them
body {
display: flex;
gap: 10px;
align-items: center;
}
.one {
width: 100px;
height: 100px;
background: red;
}
.right-side {
display: flex;
gap: 10px;
}
.two {
width: 75px;
height: 75px;
background: red;
}
.three {
width: 50px;
height: 50px;
background: red;
}
<body>
<div class="one"></div>
<div class="right-side">
<div class="two"></div>
<div class="three"></div>
</div>
</body>
Hope it helps.
Regards
You can wrap second and third item in a div, and you display flex them with align-items=flex-start.
So you may try :
.first-box-and-div-which-contains-second-and-third-boxes {
display: flex;
align-items: center;
}
.second-and-third-boxes {
display: flex;
align-items: flex-start;
}
I want to make four boxes in two rows. There will be no padding/gap between two rows. Entire section will be stretched.
Example of the boxes is as below :
How to gain this ? Please help. Thanks in advance.
You can do this by adding CUSTOM HTML module in VC, and then using flex
html, body {
height: 100%;
margin: 0;
}
.grid2x2 {
min-height: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.grid2x2 > div {
display: flex;
flex-basis: calc(50% - 0px);
justify-content: center;
flex-direction: column;
}
.grid2x2 > div > div {
display: flex;
justify-content: center;
flex-direction: row;
}
.box { margin: 0px; }
.box1 { background-color: red; }
.box2 { background-color: orange; }
.box3 { background-color: purple; }
.box4 { background-color: grey; }
<div class="grid2x2">
<div class="box box1"><div>one</div></div>
<div class="box box2"><div>two</div></div>
<div class="box box3"><div>three</div></div>
<div class="box box4"><div>four</div></div>
</div>
Sorry, another flexbox related question :)
I have two flex elements :
A container (red) containing a centered div (yellow)
A footer (blue) with an undefined height
The red container has a flex-grow:1 attribute, forcing it to take the remaining space on the screen
The issue happens when the yellow element is bigger than the screen size. I would like my red container to grow based on its content. Any idea of how I could do that ?
HTML:
<div class="container">
<div class="content"></div>
</div>
<div class="footer"></div>
CSS:
body,
html {
margin: 0;
height: 100%;
display: flex;
flex-direction: column;
}
.container {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
background: red;
}
.content {
background: yellow;
height: 2000px;
width: 100px;
}
.footer {
flex-shrink: 0;
height: 50px;
background-color: blue;
}
https://codepen.io/stepinsight/pen/roRVGQ
== EDIT ==
Andre helped me find the answer, thanks heaps !
The only thing you need to change in the code above is to replace height by min-height and the % by vh for the body/html tags 🎉
body,
html {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
Simply remove the height property on the body element and add height: 100% to html
* { box-sizing: border-box; }
html {
height: 100%
}
body {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
}
.container {
display: flex;
align-items: center;
justify-content: center;
background: red;
}
.content {
background: yellow;
height: 2000px;
width: 100px;
}
.footer {
height: 50px;
background-color: blue;
}
Corrected: https://codepen.io/ferreirandre/pen/maoVvb
Feel free to play around with the height of .content
This question already has an answer here:
Remove space (gaps) between multiple lines of flex items when they wrap
(1 answer)
Closed 4 years ago.
enter code hereI can't really explain it better than this code example.
https://codepen.io/anon/pen/BYeger
I want to make #thing_down_here touch #thing_up_here, but I can't figure out the right combination.
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box
}
#parent {
width: 100vw;
height: 100vh;
background: cornsilk;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#thing_up_here {
flex: 1 0 100%;
background: skyblue;
height: 80px;
}
#thing_down_here {
flex: 0 0 50%;
background: lightgreen;
height: 100px;
}
<div id="parent">
<div id="thing_up_here"></div>
<div id="thing_down_here"></div>
</div>
You need to use use the align-content property to set the distribution along the cross-axis.
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box
}
#parent {
width: 100vw;
height: 100vh;
background: cornsilk;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: flex-start;
}
#thing_up_here {
flex: 1 0 100%;
background: skyblue;
height: 80px;
}
#thing_down_here {
flex: 0 0 50%;
background: lightgreen;
height: 100px;
}
<div id="parent">
<div id="thing_up_here"></div>
<div id="thing_down_here"></div>
</div>
Read more about align-content.
Add align-content: flex-start to #parent
This defines the default behaviour for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).
flex-start: cross-start margin edge of the items is placed on the cross-start line
The default is stretch which is causing your issue
More on it at https://css-tricks.com/snippets/css/a-guide-to-flexbox/
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box
}
#parent {
width: 100vw;
height: 100vh;
background: cornsilk;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: flex-start;
}
#thing_up_here {
flex: 1 0 100%;
background: skyblue;
height: 80px;
}
#thing_down_here {
flex: 0 0 50%;
background: lightgreen;
height: 100px;
}
<div id="parent">
<div id="thing_up_here"></div>
<div id="thing_down_here"></div>
</div>
I'm trying to vertically/horizontally center my Title with the Subtitle directly beneath it. Here was my attempt:
html, body, h1 {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
#container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
<div id="container">
<h1>Main Title</h1>
<span>Subtitle</span>
</div>
As you can see, the subtitle is in the same line as the h1, I'm trying to get it to go beneath it. I've tried setting h1 to display: block; but that seems to not work when using display: flex on the container. Any help would be appreciated.
Set flex-direction: column on container
html, body, h1 {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
#container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
<div id="container">
<h1>Main Title</h1>
<span>Subtitle</span>
</div>
Setting flex-direction to column is one solution. It's already provided in another answer.
In some cases, if flex-direction: row is preferred (or a necessity), you can add flex-wrap: wrap to the container and give the first item a 100% width, which forces the second item to the next line.
body, h1 {
margin: 0;
padding: 0;
}
#container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-wrap: wrap; /* NEW */
align-content: center; /* NEW */
text-align: center; /* NEW */
}
h1 { flex: 0 0 100%; } /* NEW */
<div id="container">
<h1>Main Title</h1>
<span>Subtitle</span>
</div>