This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 6 years ago.
I have a requirement as shown below:
|[] [][]|
One element at left side of the viewport and two elements on right side of the viewport. To learn display: flex, I am trying this layout without wrapping the elements.
Is this layout possible with flexbox?
Here is the HTML:
<div class="parent">
<div class="child child--left"></div>
<div class="child child--right"></div>
<div class="child child--right"></div>
</div>
I tried using align-items and align-self but no use. Please help.
CSS:
.parent{
display: flex; // flexbox
}
You can use margin-left:auto in the div you need in the right side:
.parent {
display: flex;
height: 100px;
width: 100%;
}
.child {
flex: 0 0 20px;
border: solid 1px green;
}
.child--right {
margin-left: auto;
}
<div class="parent">
<div class="child"></div>
<div class="child child--right"></div>
<div class="child"></div>
</div>
you need to use a spacer defined as flex:auto; in order to align the flex-boxes as intended: DEMO
CSS
.parent{
display:flex;
}
.spacer{
flex:auto;
}
and your HTML would be:
<div class="parent">
<div class="child child--left"></div>
<div class="spacer"></div>
<div class="child child--right"></div>
<div class="child child--right"></div>
</div>
You can use flex to fill a space
body {
margin: 0;
}
.flex {
display: flex;
background: purple;
width: 100%;
height: 75px;
}
.item {
background: orange;
width: 50px;
height: 50px;
margin: 12.5px;
}
.filler {
flex-grow: 1;
}
<div class="flex">
<div class="item"></div>
<div class="filler"></div>
<div class="item"></div>
<div class="item"></div>
</div>
You'll notice I've added a div with the class filler and set it to have flex-grow: 1; This means that div will always take up the remaining space.
Applying: margin-<direction>: auto on the child of a flex item will essentially float the item in the opposite direction (with none of the complications of float).
.child--right {
margin-left: auto;
}
A way to do this without using an extra filler element is to use auto-margins.
CSS
.child--left {
margin-right: auto; /* <== here's the auto margin */
}
It will add a margin to the right of .child--left which will fill up the available space within .parent (essentially acting like there's a filler element between the left and right children, but actually without the filler element)
HTML
<div class="parent">
<div class="child child--left"><div class="box"></div></div>
<div class="child child--right"><div class="box"></div></div>
<div class="child child--right"><div class="box"></div></div>
</div>
css
.parent{
display: flex;
justify-content: center;
}
.box{
width: 200px;
height: 200px;
background: #333;
margin: 20px
}
Source: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Fiddle: https://jsfiddle.net/rittamdebnath/315wps5g/
Related
This question already has answers here:
Targeting flex items on the last or specific row
(10 answers)
Make container shrink-to-fit child elements as they wrap
(4 answers)
Closed 1 year ago.
I have a parent div element containing several children. The parent div is contained inside an outer container div. I want the parent div to be centered inside the container but the problem is that the parent uses flex-wrap: wrap to wrap all of its child divs.
The parent div is centered in the container as expected:
#container {
width: 500px;
display: flex;
justify-content: center;
background-color: #c0faff;
}
#parent {
display: flex;
flex-wrap: wrap;
}
.child {
background-color: #5bb4bb;
width: 100px;
height: 100px;
margin: 5px;
}
<div id="container">
<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
But, as soon as there is 1 child that must be wrapped onto the 2nd row, the parent div floats to the left and ignores the container's justify-content: center; css property:
#container {
width: 500px;
display: flex;
justify-content: center;
background-color: #c0faff;
}
#parent {
display: flex;
flex-wrap: wrap;
}
.child {
background-color: #5bb4bb;
width: 100px;
height: 100px;
margin: 5px;
}
<div id="container">
<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
How can I make the previous code snippet's result look like this?:
You can only achieve this if you set a fixed width to the container that holds the flexbox-items. You can make it a bit simpler and use calc(...) function in CSS here. If you know how many items should be in one row, you can just change the number for multiple breakpoints easily. Even easier if you set the width of one item as a css custom property.
#container {
width: 500px;
display: flex;
justify-content: center;
background-color: #c0faff;
}
#parent {
display: flex;
flex-wrap: wrap;
width: calc(4* 110px)
}
.child {
background-color: #5bb4bb;
width: 100px;
height: 100px;
margin: 5px;
}
<div id="container">
<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
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:
How to disable equal height columns in Flexbox?
(4 answers)
Closed 5 years ago.
What I basically want is to make each child element's height to wrap its content.
Here is my code:
<style>
.parent{
display: flex;
}
.child{
padding: 5px;
margin: 10px;
background: green;
height: auto;
}
</style>
<div class="parent">
<div class="child">child1</div>
<div class="child">child2</div>
<div class="child">child3</div>
<div class="child" style="height:50px">child1</div>
</div>
Output:
Expected output:
You just need to set align-items: flex-start on parent element because default value is stretch.
.parent {
display: flex;
align-items: flex-start;
}
.child {
padding: 5px;
margin: 10px;
background: green;
height: auto;
}
<div class="parent">
<div class="child">child1</div>
<div class="child">child2</div>
<div class="child">child3</div>
<div class="child" style="height:50px">child1</div>
</div>
I'm trying to achieve the effect where the boxes labeled "HALF", take up only 50% of the width (aka they share the first row evenly).
The base requirement is that they remain in a single container. Is this possible to achieve using flexbox?
I've tried playing around with flex-grow, flex-shrink, and flex-basis but I'm afraid I'm not understanding how to make it work, or if it's even possible, given the single container requirement.
Consider this fiddle: http://jsfiddle.net/GyXxT/270/
div {
border: 1px solid;
}
.container {
width: 400px;
display: flex;
flex-direction: column;
}
.child {
height: 200px;
}
.child.half {
flex: 1 1 10em;
color: green;
}
.child:not(.half) {
flex-shrink: 2;
flex-basis: 50%;
color: purple;
}
<div class="container">
<div class="child half">
HALF
</div>
<div class="child half">
HALF
</div>
<div class="child">
FULL
</div>
<div class="child">
FULL
</div>
<div class="child">
FULL
</div>
<div class="child">
FULL
</div>
</div>
Instead of flex-direction: column, you can try a wrapping flexbox using flex-wrap: wrap; and you can set:
flex-basis: 50% for the half width divs
flex-basis: 100% for the full width divs
See that I have thrown in box-sizing: border-box to adjust for the widths when using flex-basis.
See demo below:
div {
border: 1px solid;
box-sizing: border-box;
}
.container {
width: 400px;
display: flex;
flex-wrap: wrap;
}
.child {
height: 200px;
}
.child.half {
flex-basis: 50%;
color: green;
}
.child:not(.half) {
flex-basis: 100%;
color: purple;
}
<div class="container">
<div class="child half">
HALF
</div>
<div class="child half">
HALF
</div>
<div class="child">
FULL
</div>
<div class="child">
FULL
</div>
<div class="child">
FULL
</div>
<div class="child">
FULL
</div>
</div>
The flex sizing properties -- flex-grow, flex-shrink, flex-basis and flex -- work only along the main axis of the flex container.
Since your container is flex-direction: column, the main axis is vertical, and these properties are controlling height, not width.
For sizing flex items horizontally in a column-direction container you'll need the width property.
(Here's a more detailed explanation: What are the differences between flex-basis and width?)
To achieve your layout with a single container, see another answer to this question.
If you want to stay in column-direction, you'll need to wrap the .half elements in their own container.
.container {
display: flex;
flex-direction: column;
width: 400px;
}
.container > div:first-child {
display: flex;
}
.child.half {
flex: 1 1 10em;
color: green;
width: 50%;
}
.child {
height: 200px;
width: 100%;
border: 1px solid;
}
* {
box-sizing: border-box;
}
<div class="container">
<div><!-- nested flex container for half elements -->
<div class="child half">HALF</div>
<div class="child half">HALF</div>
</div>
<div class="child">FULL</div>
<div class="child">FULL</div>
<div class="child">FULL</div>
<div class="child">FULL</div>
</div>
The base requirement is that they remain in a single container.
That can also be done without flexbox, by simply float the 2 half elements
div {
border: 1px solid;
box-sizing: border-box;
}
.container {
width: 400px;
}
.child {
height: 200px;
}
.child.half {
float: left;
width: 50%;
color: green;
}
.child:not(.half) {
width: 100%;
color: purple;
}
<div class="container">
<div class="child half">
HALF
</div>
<div class="child half">
HALF
</div>
<div class="child">
FULL
</div>
<div class="child">
FULL
</div>
<div class="child">
FULL
</div>
<div class="child">
FULL
</div>
</div>
If the purpose is to hardcode the size in CSS units, or in percentages (which was mentioned the question), #kukkuz's solution is good as it is.
If you want to size element widths according to their own individual contents, then align-tems: flex-start or similar could do the job. It's possible to deal with the dimension perpendicular to that of the flex layout itself. See a tester on the bottom of the doc page
(Old question, but previous answers were incomplete, some are misleading)
This question already has answers here:
Make div (height) occupy parent remaining height
(9 answers)
Closed 6 years ago.
I have one div-container and children inside it.
<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child" id="last-child"></div>
</div>
I don't know height of children (every time different content), but i have
#parent {
min-height: 500px;
}
I want to stretch last-child to the bottom of parent (it has to fill free space from his subling to parent bottom).
You can use flexbox for this (background colors added for visibility):
#parent {
min-height: 500px;
display: flex;
flex-direction: column;
background: #999;
}
.child {
background: #eee;
}
#last-child {
flex-grow: 1;
background: #faa;
}
<div id="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child" id="last-child">4</div>
</div>
Make the parent a flex box with display:flex; and the flex--direction being column. Next give the last child element the flex:1; property to make it expand to the remainder of the space in the parent.
#parent {
min-height: 500px;
display:flex;
flex-direction: column;
}
#last-child{
flex:1;
background:blue;
}
.child{
background:red;
}
<div id="parent">
<div class="child">jljlkj</div>
<div class="child">kjljlkjl</div>
<div class="child">kljlkjlhi</div>
<div class="child" id="last-child"></div>
</div>