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;
}
Related
I'm trying to loop an array of objects and display them in grid view but with the flexbox concept in CSS.
<div class="container">
<div class="innercontainer">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4 (to go to row 2 if there is 4)</div>
</div>
</div>
.container {
width: 100%;
background-color: red;
}
.innercontainer {
display: flex;
gap: 5px;
flex-wrap: wrap;
}
.item {
flex: 1;
background-color: yellow;
padding: 30px;
}
The above code works perfectly fine until 3 items. When 4th item comes, I want it to go to the next row.
I tried some research and did this but not working.
<div class="container">
<div class="innercontainer">
<div class="item">1</div>
<div class="breaker"></div>
<div class="item">2</div>
<div class="breaker"></div>
<div class="item">3</div>
<div class="breaker"></div>
<div class="item">4 (to go to row 2 if there is 4)</div>
<div class="breaker"></div>
</div>
</div>
I appended this css code to above css, but not working.
.breaker {
display: none;
}
.breaker:nth-child(3n) {
display: block;
width: 100%;
height: 0;
}
You can see them in codepen. (https://codepen.io/apple-hhh/pen/bGMMByr)
What I want is:
With my first implementation, I have achieved the first 2 scenarios from the picture.
Use CSS grid for this:
.container {
display: grid;
grid-auto-flow: column;
gap: 5px;
border: 1px solid;
margin: 20px 0;
}
.container > div:nth-child(3n + 1) {grid-column: 1}
.container > div:nth-child(3n + 2) {grid-column: 2}
.container > div:nth-child(3n + 3) {grid-column: 3}
.container > div {
height: 50px;
background: red;
}
<div class="container">
<div></div>
</div>
<div class="container">
<div></div>
<div></div>
</div>
<div class="container">
<div></div>
<div></div>
<div></div>
</div>
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Try adding flex-basis: 25%; to your .item class. Usually, 33% would work but since you have padding in the item class, you might have to play around with it a bit.
flex-basis: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
In my experience using grid instead of flex is better here.
.item{
background-color: yellow;
width: 33%;
flex-grow: 1;
}
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>
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:
Targeting flex items on the last or specific row
(10 answers)
Closed 5 years ago.
I have few elements I'm trying to align. the first two rows are perfectly aligned because they have the same number of elements. the last one have less elements, and I would like to keep the bottom elements aligned with the top ones. Like this image example
HTML
<div id="bulbsCentralizer">
<div id="letterCentralizer">
<h3 class="letter">A</h3>
</div>
<div id="letterCentralizer">
<h3 class="letter">B</h3>
</div>
<div id="letterCentralizer">
<h3 class="letter">C</h3>
</div>
<div id="letterCentralizer">
<h3 class="letter">D</h3>
</div>
<div id="letterCentralizer">
<h3 class="letter">E</h3>
</div>
<div id="letterCentralizer">
<h3 class="letter">F</h3>
</div>
<div id="letterCentralizer">
<h3 class="letter">G</h3>
</div>
</div>
CSS
#bulbsCentralizer {
width: 600px;
height: auto;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: flex;
flex-wrap: wrap;
flex-flow: row wrap;
}
#letterCentralizer {
width: 40px;
height: 60px;
text-align: center;
background-color: orange;
position: relative;
float: left;
width: calc(100% * (1/8) - 10px - 1px);
margin-top:10px;
}
If you want to use flex to align your elements, don't use float or position. Use flex properties! More info on: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.container {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
width: 200px;
}
.element {
width: 50px;
height: 50px;
background-color: red;
flex: 0 0 32%;
margin: 1% 0;
}
.element:nth-child(3n-1) {
margin-left: 2%;
margin-right: 2%;
}
<div class="container">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
https://jsfiddle.net/vwkvstfg/6/
Basically, flex handles displays over one axis pretty well. But this problem's has a better solution - using display: grid
grid-template-columns is gonna be used here as more of a convenience.
Cheers!
This question already has answers here:
Equal height flex items in flex columns
(3 answers)
Closed 5 years ago.
I'm using flex to create even columns and vh to make them the same height. That's working fine but inside the columns I can have an x number of items in them. I'd like for elements in each column to be even height depending on how many items are present (using css).
1 = 100%
2 = 50%
3 = 33.33%
etc.
I know I can do this through JS but I'd like to automate this through css via flex, grid, or something elese.
I've tried replicating your problem. Use flex: 1 on .items so that each and every item take equal space (according to the problem statement).
Have a look at the snippet below:
body {
margin: 0;
}
.parent {
width: 80%;
padding: 20px;
display: flex;
border: 1px solid red;
}
.child {
flex: 1;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-end;
padding: 20px;
border: 1px solid blue;
height: 60vh;
}
.item {
flex: 1;
background: lightGreen;
border: 1px solid green;
}
<div class="parent">
<div class="child">
<div class="item">33.33%</div>
<div class="item">33.33%</div>
<div class="item">33.33%</div>
</div>
<div class="child">
<div class="item">50%</div>
<div class="item">50%</div>
</div>
<div class="child">
<div class="item">100%</div>
</div>
</div>
Hope this is what you are trying to achieve.
This is all you need to make it work with the Flexbox:
.flex-container {
display: flex;
}
.flex-item {
display: flex;
flex-direction: column;
flex: 1;
}
.item {
flex: 1;
border: 1px solid;
}
<div class="flex-container">
<div class="flex-item">
<div class="item">1/1</div>
</div>
<div class="flex-item">
<div class="item">1/2</div>
<div class="item">1/2</div>
</div>
<div class="flex-item">
<div class="item">1/3</div>
<div class="item">1/3</div>
<div class="item">1/3</div>
</div>
<div class="flex-item">
<div class="item">1/4</div>
<div class="item">1/4</div>
<div class="item">1/4</div>
<div class="item">1/4</div>
</div>
</div>