I have a div that is vertically centered using flex box. But is there now any way to align it to the right?
One option would be to add justify-content: flex-end to the flexbox container: (example)
.parent {
display: flex;
width: 200px;
height: 200px;
border: 1px solid;
align-items: center;
justify-content: flex-end;
}
.parent > .child {
width: 50%;
height: 50%;
border: 2px solid #f00;
}
<div class="parent">
<div class="child"></div>
</div>
Alternatively, you could also add margin-left: auto to the flexbox item: (example)
.parent {
display: flex;
width: 200px;
height: 200px;
border: 1px solid;
align-items: center;
}
.parent > .child {
width: 50%;
height: 50%;
border: 2px solid #f00;
margin-left: auto;
}
<div class="parent">
<div class="child"></div>
</div>
Related
I am trying to make a fluid flex field where if there is no enough space then it should drop to next line. As you can see in this example if you decrease the size of the field it doesnt drop to next line because I am using flex.
.container {
width: 80%;
border: 2px solid #ddd;
padding: 20px;
display: flex;
overflow: hidden;
}
.container .panel {
flex: none;
}
.container .panel-info {
display: flex;
align-items: center;
}
.container .panel-info .dot {
background-color: #ccc;
width: 4px;
height: 4px;
border-radius: 50%;
margin: 0 8px;
}
<div class="container">
<div class="panel">Some Long Info</div>
<div class="panel-info">
<div class="dot"></div>
<div class="info">Information</div>
</div>
</div>
Use flex-wrap: wrap.
More information on MDN about the flex-wrap property
I have three elements currently vertically centered in a container through flex:
<div class="parent">
<div class="first">A</div>
<div class="second">B</div>
<div class="third">C</div>
</div>
with CSS:
.parent {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 800px;
}
Looking like:
I would like to change it so the first element is vertically centered and the other elements follow:
Ideally this could be done simply through flex but so far I cannot find a solution. Any help greatly appreciated.
If your elements have a fixed size, you could accomplish this with a wrapping div
which size is the same as the first element and let the following elements just overflow.
.parent {
height: 125px;
background-color: palegreen;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.item-container,
.item {
width: 200px;
height: 30px;
}
.item {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
}
.second {
height: 50px;
}
<div class="parent">
<div class="item-container">
<div class="item first">A</div>
<div class="item second">B</div>
<div class="item third">C</div>
</div>
</div>
If you can change the HTML structure, it's possible: Put the second and third elements into a wrapper DIV and put that one into the first. Then center the first one (not necessarily with flex - see below) and apply position: relative to it, and apply position: absolute and according position settings to the wrapper. For details see the snippet below.
.parent {
height: 500px;
border: 1px solid blue;
}
.first {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 100px;
width: 300px;
background: #ccc;
}
.wrap1 {
position: absolute;
top: 100%;
width: 100%;
height: auto;
border: 1px solid green;
}
.second {
background: #eee;
height: 50px;
}
.third {
background: #aaa;
height: 80px;
}
<div class="parent">
<div class="first">A
<div class="wrap1">
<div class="second">B</div>
<div class="third">C</div>
</div>
</div>
</div>
ADDITION: Actually it's also possible with flex:
.parent {
height: 500px;
border: 1px solid blue;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.first {
position:relative;
height: 100px;
width: 300px;
background: #ccc;
}
.wrap1 {
position: absolute;
top: 100%;
width: 100%;
height: auto;
border: 1px solid green;
}
.second {
background: #eee;
height: 50px;
}
.third {
background: #aaa;
height: 80px;
}
<div class="parent">
<div class="first">A
<div class="wrap1">
<div class="second">B</div>
<div class="third">C</div>
</div>
</div>
</div>
This question already has answers here:
How to disable equal height columns in Flexbox?
(4 answers)
Closed 5 years ago.
What's the best way to shrink-wrap a div using flex-box?
In the snippet below, I have a wrapper (the green border) shrink-wrapping the content (red & blue boxes) on all sides but the bottom.
How can I get this accomplished?
Here's a plunker demo: https://plnkr.co/edit/u89JPIbZObTYIfRejlO1?p=preview
.red {
width: 100px;
height: 50px;
background-color: red;
}
.blue {
width: 100px;
height: 50px;
background-color: blue;
}
.container2 {
width: 400px;
height: 300px;
border: solid;
display: flex;
justify-content: center;
}
.wrapper2 {
border: solid green;
padding: 5px;
}
<div class="container2">
<div class="wrapper2">
<div class="red">x</div>
<div class="blue">x</div>
</div>
</div>
you can use :
align-items
.container2 {
width: 400px;
height: 300px;
border: solid;
display: flex;
justify-content: center;
align-items:flex-start;/* update here */
}
.red {
width: 100px;
height: 50px;
background-color: red;
}
.blue {
width: 100px;
height: 50px;
background-color: blue;
}
.container2 {
width: 400px;
height: 300px;
border: solid;
display: flex;
justify-content: center;
align-items:flex-start;
}
.wrapper2 {
border: solid green;
padding: 5px;
/*margin:0 auto auto*/
}
<div class="container2">
<div class="wrapper2">
<div class="red">x</div>
<div class="blue">x</div>
</div>
</div>
or margin
.wrapper2 {
border: solid green;
padding: 5px;
margin:0 auto auto/* update here */
}
.red {
width: 100px;
height: 50px;
background-color: red;
}
.blue {
width: 100px;
height: 50px;
background-color: blue;
}
.container2 {
width: 400px;
height: 300px;
border: solid;
display: flex;
justify-content: center;
/* align-items:flex-start;*/
}
.wrapper2 {
border: solid green;
padding: 5px;
margin:0 auto auto
}
<div class="container2">
<div class="wrapper2">
<div class="red">x</div>
<div class="blue">x</div>
</div>
</div>
a reminder/titorial: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Use the align-items: flex-start; property on .container2
.red {
width: 100px;
height: 50px;
background-color: red;
}
.blue {
width: 100px;
height: 50px;
background-color: blue;
}
.container2 {
width: 400px;
height: 300px;
border: solid;
display: flex;
justify-content: center;
align-items: flex-start;
}
.wrapper2 {
border: solid green;
padding: 5px;
}
<div class="container2">
<div class="wrapper2">
<div class="red">x</div>
<div class="blue">x</div>
</div>
</div>
This question already has answers here:
Fill the remaining height or width in a flex container
(2 answers)
Closed 5 years ago.
I am new to flexbox, but I have a parent div which contains three child divs. The three child divs are each 100% width. The first two divs are a fixed height. I want the third child div to fill out the rest of the parent div.
* {
margin: 0;
}
.flex-container {
display: flex;
height: 300px;
flex-wrap: wrap;
border: 1px solid blue;
background-color: gray;
align-content: flex-start;
}
.flex-item1 {
width: 100%;
height: 10px;
background: yellow;
}
.flex-item2 {
width: 100%;
height: 10px;
border: 1px solid red;
background: red;
}
.flex-item3 {
width: 100%;
border: 3px solid purple;
background: purple;
align-self: stretch;
height: auto;
}
/* another attempt for the third child div */
/* .flex-item3{
width: 100%;
border: 3px solid purple;
background: purple;
flex-direction: row;
flex-grow: 1;
} */
<div class="flex-container">
<div class="flex-item1"></div>
<div class="flex-item2"></div>
<div class="flex-item3"></div>
</div>
I have made a jsFiddle here.
Can anyone tell me what I'm doing wrong?
EDIT
I am trying not to make the flex-direction: column since I would like the third child div to be a row.
use flex:1 in the 3rd item and flex-direction:column in parent
.flex-container {
display: flex;
flex-direction: column;
height: 300px;
width: 100%
}
.flex-item1 {
height: 10px;
background: yellow;
}
.flex-item2 {
height: 10px;
background: red;
}
.flex-item3 {
flex: 1;
background: blue
}
<div class="flex-container">
<div class="flex-item1"></div>
<div class="flex-item2"></div>
<div class="flex-item3"></div>
</div>
How I can align bottom many divs, one on another. Like on a picture below.
You can use Flexbox to do this
Set flex-direction: column to position divs one on top of another
align-items: flex-end to move divs to right side of parent
justify-content: flex-end to move divs to bottom of parent.
.parent {
height: 300px;
width: 200px;
border: 1px solid black;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-end;
}
.box {
width: 100px;
height: 50px;
margin: 5px;
border: 1px solid black;
}
<div class="parent">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
Update: To reverse order of divs you can use flex-direction: column-reverse and justify-content: flex-start
.parent {
height: 300px;
width: 200px;
border: 1px solid black;
display: flex;
flex-direction: column-reverse;
align-items: flex-end;
justify-content: flex-start;
}
.box {
width: 100px;
height: 50px;
margin: 5px;
border: 1px solid black;
}
<div class="parent">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
You can use flexbox with flex-direction: column-reverse; and flex-wrap: wrap-reverse;:
.x {
width: 500px;
height: 500px;
display: flex;
flex-direction: column-reverse;
flex-wrap: wrap-reverse;
border: 1px solid red;
flex-grow: 0;
flex-basis: 0%;
}
.y {
width: 80px;
height: 80px;
border: 1px solid green;
margin: 3px;
}
<div class="x">
<div class="y">1</div>
<div class="y">2</div>
<div class="y">3</div>
<div class="y">4</div>
<div class="y">5</div>
</div>