I want to create 3 widgets that are are equal in width and height and equal distance from each other, I understand that I must use CSS flexbox but not 100% where to start
Any help would be appreciated!
You can do this by creating a div with attributes display: flex and flex-direction: row. Then inside this div, create 3 smaller divs with your width and height, then you can use column-gap to create the gap between your widgets.
If you want to center your widgets, you can use the justify-content: center property.
Use justify-content in flex container.
Widgets Evenly spaced in the row.
.container {
display: flex;
justify-content: space-evenly;
}
.widget {
width: 100px;
height: 100px;
background: #ce8888;
text-align: center;
}
<div class="container">
<div class="widget">Widget 1</div>
<div class="widget">Widget 2</div>
<div class="widget">Widget 3</div>
</div>
Equal spaces between Widgets excluding the start and end space.
.container {
display: flex;
justify-content: space-between;
}
.widget {
width: 100px;
height: 100px;
background: #ce8888;
text-align: center;
}
<div class="container">
<div class="widget">Widget 1</div>
<div class="widget">Widget 2</div>
<div class="widget">Widget 3</div>
</div>
Related
This question already has answers here:
Better way to set distance between flexbox items
(40 answers)
Closed 9 months ago.
I'm trying to manipulate divs without using float, using display: inline-block; in my css allows me to get the siblings next to each other within a container div, but with inline-block, I can't space them apart using margin-left: 20px;, margin-right :20px; ... and so on.
I'm sure there's a really simple solution, even if it doesn't involve using display: inline-block;, I just want to avoid floats and preferably avoid padding too.
you can try flex-box method to create space between two div which is inside a div (I conclude that from your question )
.parent{
border:2px solid red;
display:flex;
justify-content:space-around;
}
.parent div{
border:3px solid black;
}
<div class="parent">
<div class="child1">
child1
</div>
<div class="child2">
child2
</div>
</div>
you can also add many child div as you want , they will automatically make place in the parent container.
Here you can see below how i managed to do so without display:inline-block; and this will not break on any device unlike inline-block.
.box {
width: 200px;
height: 200px;
background: #F3F3F3;
color: #000;
display: flex;
align-items: center;
justify-content: center;
margin-left: 20px;
}
.container {
display: flex;
margin-bottom: 40px;
}
.container.two {
justify-content: space-between;
}
.container.three {
justify-content: space-evenly;
}
Margin 20px in between
<div class="container">
<div class="box">
BOX 1
</div>
<div class="box">
BOX 1
</div>
</div>
Align boxes on left and right according to width
<div class="container two">
<div class="box">
BOX 1
</div>
<div class="box">
BOX 1
</div>
</div>
Align even spacing on left and right
<div class="container three">
<div class="box">
BOX 1
</div>
<div class="box">
BOX 1
</div>
</div>
This question already has answers here:
When flexbox items wrap in column mode, container does not grow its width
(9 answers)
Closed 4 years ago.
I have problem with flexbox wrapping into column. The container doesn't fit the content width as seen in the snippet below.
This works if you replace both flex-flow of .wrapper and .container with flex-flow: row wrap, the height fit the content height its children, but the problem then is that the columns then flow horizontally and appear under each other, rather than flowing vertically and beside each other.
I expect the following result:
.wrapper {
display: flex;
flex-flow: column wrap;
max-height: 500px;
max-width: 500px;
overflow: scroll;
}
.container {
display: flex;
flex-flow: column wrap;
align-content: flex-start;
background-color: red;
margin: 5px;
}
.product {
margin: 3px;
min-width: 100px;
min-height: 100px;
background-color: #ccc;
text-align: center;
font-weight: bold;
line-height: 100px;
}
<div class='wrapper'>
<div class='container'>
<div class="product">0.1</div>
<div class="product">0.2</div>
<div class="product">0.3</div>
<div class="product">0.4</div>
<div class="product">0.5</div>
<div class="product">0.6</div>
<div class="product">0.7</div>
<div class="product">0.8</div>
</div>
<div class='container'>
<div class="product">1.1</div>
<div class="product">1.2</div>
<div class="product">1.3</div>
<div class="product">1.4</div>
<div class="product">1.5</div>
<div class="product">1.6</div>
<div class="product">1.7</div>
<div class="product">1.8</div>
</div>
<div class='container'>
<div class="product">2.1</div>
<div class="product">2.2</div>
<div class="product">2.3</div>
<div class="product">2.4</div>
<div class="product">2.5</div>
<div class="product">2.6</div>
<div class="product">2.7</div>
<div class="product">2.8</div>
</div>
<div class='container'>
<div class="product">3.1</div>
<div class="product">3.2</div>
<div class="product">3.3</div>
<div class="product">3.4</div>
<div class="product">3.5</div>
<div class="product">3.6</div>
<div class="product">3.7</div>
<div class="product">3.8</div>
</div>
</div>
The problem is that the .container doesn't have a width defined, so how .wrapper does have a maximum of with and it's a Flexbox, all the children (.container) will fit automatically to their parent, that's the problem.
You can solve it by setting a with to the container class.
Something like this: width: 212px;
I'm trying to make this layout (I've made a picture to explain what i want to do):
So I've 4 divs where I'm going to put some text inside. I've used flexbox and justify content to align them center, but i want to put a text "Latest News" that is aligned with the first div (in this case Element 1).
I'm not able to think about an elegant solution to my problem, so I'm here to ask for help.
.wrapper{
display: flex;
justify-content: center;
}
.box{
height: 200px;
background-color: red;
margin: 10px;
width: 200px;
}
<p class="section-title">Latest News</p>
<div class="wrapper">
<div class="box">Element 1</div>
<div class="box">Element 2</div>
<div class="box">Element 3</div>
<div class="box">Element 4</div>
</div>
There are a few ways you can do it, and it depends how dynamic your box elements are going to be.
One simple solution that works for n boxes is to include the section title to the first box and give it position: absolute whilst adding margin-top to the wrapper to make space for the title.
https://codepen.io/anon/pen/MJpOrM
.wrapper {
display: flex;
justify-content: center;
margin-top: 40px;
}
.box {
height: 200px;
background-color: red;
margin: 10px;
width: 300px;
}
.section-title {
position: absolute;
top: 0px;
}
<div class="wrapper">
<div class="box">
<p class="section-title">Latest News</p>
Element 1
</div>
<div class="box">Element 2</div>
<div class="box">Element 3</div>
<div class="box">Element 4</div>
</div>
Considering that you have a fixed width for your boxes, the easiest solution is to make the section-title a fixed width too:
.section-title {
width: 1260px; //This is merely 300 * 4 + the margin
margin: auto;
}
https://codepen.io/anon/pen/BpWmJV
I played a bit with flexboxes and tried to imitate a LaTeX-like table with top/mid/bottomrule. I like that the table is scaling nicely and shift to a list-like display on small screens.
However, I noticed that, if I use a whitespace in a cell's text content, the cell's height might double or even triple without any aparent reason.
Is there a flexbox-property that I overlooked and can help me fix this behavior? Why is this additional height even generated?
Screenshot:
Snippet:
div.table {
display: flex;
flex-flow: column wrap;
width: 70%;
margin: 15px auto;
border-bottom: 2px solid black;
}
div.row {
display: flex;
justify-content: space-between;
flex-flow: row wrap;
}
div.head {
flex: 1;
text-align: center;
align-items: flex-start;
font-weight: bold;
border-width: 2px 0 1px;
border-style: solid;
}
div.item {
flex: 1;
text-align: center;
align-items: flex-start;
}
<div class="table">
<div class="row">
<div class="head">Col 1</div>
<div class="head">Col 2</div>
</div>
<div class="row">
<div class="item">Cell 1</div>
<div class="item">Cell2</div>
</div>
<div class="row">
<div class="item">Cell 3</div>
<div class="item">Cell 4</div>
</div>
</div>
The problem is that, initially, .row is sized taking only the contents of .items into account. Then .items flex, and become equally wide due to flex: 1. But the contents weren't equally wide, so the longest will wrap to a second line.
It's better shown in this example:
.row {
display: inline-flex;
margin: 2px;
}
.item {
border: 1px solid;
}
.flex {
flex: 1;
}
<div class="row">
<div class="item">Cell 11111</div>
<div class="item">Cell 2</div>
(before flex)
</div>
<br />
<div class="row">
<div class="item flex">Cell 11111</div>
<div class="item flex">Cell 2</div>
(after flex)
</div>
In your example you have Cell 1 (with space) and Cell2 (without), which produces the difference.
Eventually the .row also flexes and thus a new line is no longer needed, but it seems browsers don't detect that. It's hard to say, but I think this is right. That's because
The hypothetical main size (height) of the rows is calculated, and
If a cross size is needed to determine the main size (e.g. when the
flex item’s main size is in its block axis) and the flex item’s cross
size is auto and not definite, in this calculation use fit-content as
the flex item’s cross size.
Rows flex. This determines their used height.
Cross sizes (widths) are determined. The rows are stretched to fill the table horizontally. But its too late, heights have already been calculated.
Since your column layout won't wrap because .table has an auto height, I would just use the default flex-wrap: nowrap. It fixes the problem because now the flex container will be single-line, and thus the widths of the rows will be definite:
If a single-line flex container has a definite cross size, the outer
cross size of any stretched flex items is the flex container’s inner
cross size (clamped to the flex item’s min and max cross size) and is
considered definite.
div.table {
flex-flow: column;
}
div.table {
display: flex;
flex-flow: column;
width: 70%;
margin: 15px auto;
border-bottom: 2px solid black;
}
div.row {
display: flex;
justify-content: space-between;
flex-flow: row wrap;
}
div.head {
flex: 1;
text-align: center;
align-items: flex-start;
font-weight: bold;
border-width: 2px 0 1px;
border-style: solid;
}
div.item {
flex: 1;
text-align: center;
align-items: flex-start;
}
<div class="table">
<div class="row">
<div class="head">Col 1</div>
<div class="head">Col 2</div>
</div>
<div class="row">
<div class="item">Cell 1</div>
<div class="item">Cell2</div>
</div>
<div class="row">
<div class="item">Cell 3</div>
<div class="item">Cell 4</div>
</div>
</div>
You can also try explicitly providing an explicit width:
div.row {
width: 100%;
}
Or even preventing text wrapping with whitespace: nowrap.
Just change div.item from flex: 1; to only flex-grow:1;.
Here's the working snippet.
div.table {
display: flex;
width: 70%;
margin: 15px auto;
border-bottom: 2px solid black;
}
div.row {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
div.head {
flex: 1;
text-align: center;
align-items: flex-start;
font-weight: bold;
border-width: 2px 0 1px;
border-style: solid;
}
div.item {
flex-grow: 1;
text-align: center;
align-items: flex-start;
}
<div class="table">
<div class="row">
<div class="head">Col 1</div>
<div class="head">Col 2</div>
</div>
<div class="row">
<div class="item">Cell 1</div>
<div class="item">Cell2</div>
</div>
<div class="row">
<div class="item">Cell 3</div>
<div class="item">Cell 4</div>
</div>
</div>
I am making a music playback controller, and the container has 3 sections: left, center, and right. However, since the left and right sides have different widths, the center section isn't in the true center of the div, but I need it to be. I am using flexbox's space-between option to layout the items.
#container {
display: flex;
justify-content: space-between;
background-color: lightgrey;
}
#container > div {
height: 100px;
border: 2px dashed red;
/*This is only for looks*/
text-align: center;
padding: 5px;
}
<div id="container">
<div>Left Side</div>
<div>I want this centered</div>
<div>Right Side (Extra text for extra length)</div>
</div>
You can use margins to approximate centering. But in order to get perfect centering with flexbox that's consistent across a variety of viewports, you'll have to slightly modify your HTML somewhat.
You need to turn the direct children of #container into flex containers themselves with a display:inline-flex declaration and give them a flex value of 1 and justify-content: center.
From there, you add your content into child divs. To get alignment on the left and right divs, use margin-right: auto and margin-left: auto, respectively.
#container {
display: flex;
background-color: lightgrey;
}
.flex {
flex: 1;
display: inline-flex;
justify-content: center;
}
.flex > div {
height: 100px;
border: 2px dashed red;
text-align: center;
padding: 5px;
}
.left div {
margin-right: auto;
}
.right div {
margin-left: auto;
}
<div id="container">
<div class="left flex">
<div>Left Side</div>
</div>
<div class="center flex">
<div>I want this centered</div>
</div>
<div class="right flex">
<div>Right Side (Extra text for extra length)</div>
</div>
</div>