I've got a flexbox. There are 4 circles that are 25% width of the parent element. I added margin between the items but now the circles "stretch" because of my padding %. I'd like to keep the padding as a % to maintain an aspect ratio I require. But when I add margin to create spacing between the items stretch.
.items {
display: flex;
flex-wrap: wrap;
}
.items>* {
flex: 1;
flex-basis: 25%;
}
.items>*:after {
content: '';
display: block;
background: #000;
margin: 5px;
padding-bottom: 100%;
border-radius: 50%;
}
<div class="items">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
The shape I want, but not the spacing:
The spacing I want, but not the shape:
Also, the reason I use margin is to have equal spacing all around the element in the case there are rows of elements.
How do I get the spacing and shape I want together?
Insert a gap in your flex element, then remove the padding and margin for the pseudoelement (::after) and use aspect-ratio
.items {
display: flex;
flex-wrap: nowrap;
gap: 20px;
}
.items > * {
flex: 1;
flex-basis: 25%;
}
.items > *::after {
content: '';
display: block;
background: #000;
aspect-ratio: 1;
border-radius: 50%;
}
<div class="items">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Why not remove the margin from the :after pseudo element and use padding on the main element? (also added box-sizing on main element):
.items {
display: flex;
flex-wrap: wrap;
}
.items>* {
flex: 1;
flex-basis: 25%;
padding: 5px;
box-sizing: border-box;
}
.items>*:after {
content: '';
display: block;
background: #000;
padding-bottom: 100%;
border-radius: 100%;
}
<div class="items">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Related
I'm trying to achieve this result, using css only: I have a container with a bunch of children inside. I would like the first child to stretch vertically and having the other children to wrap beside the first child.
expected result
this is the code:
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
align-content: center;
width: 350px;
border: 1px solid;
}
.container div {
min-height: 30px;
width: 100px;
background: green;
margin: 3px;
}
.container div:first-child {
background: red;
align-self: stretch;
}
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
this is how it looks
But apparently it is not possible with flexbox. Is there any other solutions?
I know I can achieve this by taking the first child out of the container and treat it separately. But I was wondering if I could do it without changing the markup?
Thank you all!
You need CSS grid for this. Resize the container to see the result:
.container {
display: grid;
grid-template-columns: repeat(auto-fit,100px); /* width of your element */
width: 350px;
border: 1px solid;
/* resize the container*/
overflow: auto;
resize: horizontal;
}
.container div {
min-height: 30px;
background: green;
margin: 3px;
}
.container div:first-child {
background: red;
grid-area:1/1/span 200; /* 1s row/1st column/ take many rows (stretch)*/
}
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
position: absolute can also do the job since the width is fixed:
.container {
display: flex;
flex-wrap: wrap;
padding-left: 106px;
width: 350px;
border: 1px solid;
position: relative;
/* resize the container*/
overflow: auto;
resize: horizontal;
}
.container div {
min-height: 30px;
width: 100px;
background: green;
margin: 3px;
}
.container div:first-child {
background: red;
position: absolute;
inset: 0 auto 0 0;
}
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
I am trying to find a way to distribute an uneven number of elements across the horizontal axis that satisfies the following:
the left border of the first child overlaps the left border of the container
the right border of the last child overlaps the right border of the container
uneven number of children (that is, there exists a middle item)
the middle item must be properly centered
the remaining items (i.e. items between the first and middle items and between the middle and last items) are evenly distributed
the items can vary in width (no fixed width)
Here is an example of the problem I encounter (4th condition not satisfied) with my current implementation:
#container {
display: flex;
justify-content: space-between;
}
#container > div {
background-color: black;
}
#container > div:nth-child(1) {
width: 100px;
height: 20px;
}
#container > div:nth-child(2) {
width: 80px;
height: 30px;
}
#container > div:nth-child(3) {
width: 50px;
height: 50px;
}
#container > div:nth-child(4) {
width: 40px;
height: 30px;
}
#container > div:nth-child(5) {
width: 90px;
height: 10px;
}
p {
width: 100%;
text-align: center;
}
<div id="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<p>
↑<br>
actual center
</p>
Another possible approach is given here:
#container {
display: flex;
}
#container > div {
flex: 1;
display: flex;
justify-content: center;
}
#container > div > div {
background-color: black;
}
#container > div:nth-child(1) > div {
width: 100px;
height: 20px;
margin-right: auto;
}
#container > div:nth-child(2) > div {
width: 80px;
height: 30px;
}
#container > div:nth-child(3) > div {
width: 50px;
height: 50px;
}
#container > div:nth-child(4) > div {
width: 40px;
height: 30px;
}
#container > div:nth-child(5) > div {
width: 90px;
height: 10px;
margin-left: auto;
}
p {
width: 100%;
text-align: center;
}
<div id="container">
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
</div>
<p>
↑<br>
center
</p>
While aesthetically more pleasing, this is not ideal because the second and fourth divs are centered relative to their given flow space instead of their surrounding space:
By contrast, here is what I am trying to achieve:
One possible solution would be to break the container into three flex children; left, center, and right.
To keep the center anchored, apply flex: 1; to left and right.
To get even space on the last child of left, and the first child of right, you can add an empty block psuedo-element.
#container {
display: flex;
justify-content: space-between;
}
#container>div {
display: flex;
justify-content: space-between;
}
#container>div.left,
#container>div.right {
flex: 1;
}
#container>div.left::after,
#container>div.right::before {
display: block;
content: '';
}
#container>div>div {
background-color: black;
}
#container>div.left>div:nth-child(1) {
width: 100px;
height: 20px;
}
#container>div.left>div:nth-child(2) {
width: 80px;
height: 30px;
}
#container>div.center>div {
width: 50px;
height: 50px;
}
#container>div.right>div:nth-child(1) {
width: 40px;
height: 30px;
}
#container>div.right>div:nth-child(2) {
width: 90px;
height: 10px;
}
p {
width: 100%;
text-align: center;
}
<div id="container">
<div class="left">
<div></div>
<div></div>
</div>
<div class="center">
<div></div>
</div>
<div class="right">
<div></div>
<div></div>
</div>
</div>
<p>
↑<br> actual center
</p>
I want to place the items in the flexbox take the same width.
Within the flexbox I have a searchsvg, input field and div with some text. I want each of them to take equal width themselves based on the width of the flexbox. I don't want to provide the width of each item manually. I tried using justify-content: space-evenly. In doing so, the input field takes more width than rest of them.
How can I avoid it? Below is the code:
.wrapper {
display: flex;
flex-grow: 1;
}
.items_container {
position: relative;
width: 40px;
height: 40px;
top: 16px;
margin-left: 16px;
padding-left: 5px;
display: flex;
align-items: center;
justify-content: space-evenly;
}
#media (min-width: 300px) {
.items_container.expanded {
width: 50%;
}
}
.items_container.expanded .search_input_field {
display: flex;
align-items: center;
}
<div class="wrapper">
<div class="items_container expanded">
<div class="search_input_field">
<div>
<Svgsearch/>
</div>
<input type="text" placeholder="input" />
</div>
<div>dropdown to be added</div>
</div>
.child elements should grow equally and not shrink
.parent {
display: flex;
}
.child {
flex: 1 0 0;
}
/* ignore */
.child {
padding: 5px;
height: 50px;
background: lightcoral;
margin: 2px;
text-align: center;
}
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
I moved flex-grow: 1 from where you placed it, because it wasn't doing anything. This is a rule that affects flex children. Therefore, I moved it to affect all direct children of the flex parent, .wrapper.
.wrapper {
display: flex;
/* flex-grow: 1; <-- moved below */
& > * {
flex-grow: 1;
}
}
jsFiddle
So my task is to align 5 divs to be positioned in an X position:
body{
height:300px;
width: 300px;
}
div{
height:100px;
width:100px;
float:left;
background:black;
overflow: none;
}
div:nth-child(2) {
margin-left: 100px;
}
div:nth-child(3) {
margin-left: 100px;
margin-right: 100px;
}
div:nth-child(5) {
margin-left: 100px;
}
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
As you can see I already aligned them. I can't use any other additional elements, only 5 divs. But I have a feeling that there is a more elegant solution, with less lines of css. Would be nice to see the best solution :)
body {
display: flex;
flex-wrap: wrap;
justify-content: space-between; /* align items to edges, horizontally */
align-content: space-between; /* align items to edges, vertically */
height: 300px;
width: 300px;
}
div {
height: 100px;
width: 100px;
background: black;
}
div:nth-child(2) {
position: relative; /* in-flow positioning */
top: 50%;
transform: translateY(-50%);
}
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
jsFiddle
This question already has answers here:
Fluid width with equally spaced DIVs
(7 answers)
Closed 8 years ago.
I have HTML/CSS layout problem:
I have 4 divs with the same width and height. I want to "justify them" so thay should be place from one side to the other with the same spaces between them. In other word: suppose the A, B, C, D are divs and "|" means start/end of row. So I want receive following effect of 3 divs in one row:
|A B C D|
How to do it. I was able to do it with 3 divs, but how to do it with 4 divs?
For full browser support, you can use the below:
#container {
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
width:100%;
}
#container>div {
width: 100px;
height: 100px;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
background:red;
}
span {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
<div id="container">
<div></div>
<div></div>
<div></div>
<div></div> <span></span>
</div>
Using flexible boxes:
#wrapper {
display: flex;
justify-content: space-between;
}
#wrapper {
display: flex;
justify-content: space-between;
}
<div id="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Live example is here: http://jsfiddle.net/gLxr3cqk/1/
#container {
text-align: justify;
}
#container > div {
width: 100px; /* Declare your value. Can be in relative units. */
height: 100px;
display: inline-block;
vertical-align: top;
border: 1px black solid;
/* IE fix. */
*display: inline;
zoom: 1;
}
#container:after {
content: "";
width: 100%;
display: inline-block;
}
<div id="container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>