I'm trying to horizontally center align group1 and right align group2 with flex.
<div class="holder">
<div class="group1">
...
</div>
<div class="group2">
...
</div>
</div>
CSS:
.holder{
display: flex;
justify-content:center;
}
.group2{
align-self: flex-end;
}
But everything is just centered, what's the fix?
As flexbox is built on manipulation of margins there is no method of moving one item out of the flow other than using position:absolute.
Any other method leaves the center item affected by other elements.
.holder {
display: flex;
justify-content: center;
border: 1px solid grey;
position: relative;
}
.group1 {
background: plum;
}
.group2 {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
border: 1px solid red;
}
<div class="holder">
<div class="group1">
Group 1
</div>
<div class="group2">
Group 2
</div>
</div>
Immagine you have a button with a text and a icon and you want the text on the center and the icon on the right. Don't forget to give a width to the button.
With flexbox is really simple to do it.
button {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
width: 400px;
order: 1;
}
span {
flex: 1;
}
<button>
<span>
Click me
</span>
<i>></i>
</button>
We can achieve it using flex, grid and position.
Check out the solution for flex, grid as position has already been submitted above 👆🏻
Flex Solution:
.holder {
display: flex;
}
.group1 {
flex: 1;
text-align: center;
}
<div class="holder">
<div class="group1">...</div>
<div class="group2">.....</div>
</div>
Grid Solution:
.holder {
display: grid;
grid-template-columns: 1fr 0fr;
}
.group1 {
flex: 1;
text-align: center;
border: 1px solid green;
}
.group2 {
border: 1px solid pink;
}
<div class="holder">
<div class="group1">...</div>
<div class="group2">.....</div>
</div>
This is the best what you can do with just Flexbox
.holder{
display: flex;
justify-content: center;
}
.group1 {
flex: 1;
text-align: center;
}
.group2{
margin-left: auto;
}
<div class="holder">
<div class="group1">
Center
</div>
<div class="group2">
Right
</div>
</div>
Better option is to use relative/absolute position with Flexbox
.holder{
display: flex;
justify-content: center;
color: white;
position: relative;
}
.group1 {
flex: 1;
text-align: center;
background: black;
}
.group2{
position: absolute;
top: 0;
right: 0;
}
<div class="holder">
<div class="group1">
Center
</div>
<div class="group2">
Right
</div>
</div>
You can set a height in the .holderand the play with align-self and text-align:
CSS
.holder{
display: flex;
justify-content:center;
align-content: center;
height: 200px;
background: #ccc;
}
.group2{
align-self: center;
text-align: right;
width: 50%;
}
.group1{
align-self: center;
width: 50%;
text-align: center;
}
DEMO HERE
Related
[![Red: Centered on canvas: Black: Centered between center and top of canvas][1]][1]
Using flex, it is easy to position elements in the center of a div. But how can this be done relative to already centered elements, using flex?
Shown below in the code is the best I've come up so far. I am able to center the red square in the middle but cannot get the blue one above it to be vertically center-aligned between the red square and the top border.
.flex {
border-style: solid;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: white;
height: 100vh
}
.square {
height: 10px;
width: 10px;
}
#square1 {
background-color: blue;
}
#square2 {
background-color: red;
}
.flexdivider {
display: flex;
flex-direction: column
justify-content: center;
align-items: center;
flex: 1;
}
p {
color: white;
}
<body>
<div class="flex">
<div class="flexdivider">
<div class="square" id="square1"></div>
</div>
<div class="flexdivider">
<div class="square" id="square2"></div>
</div>
<div class="flexdivider">
</div>
</div>
</div>
</body>
[1]: https://i.stack.imgur.com/4lUop.png
I have created 2 separated approach.
h2{
color: #333;
}
.box,.fakebox{
width: 30px;
height: 30px;
background-color: red;
}
/* Example #1 */
.container-box-1{
background-color: #eee;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
}
.fakebox{
opacity: 0;
}
.box2{
position: absolute;
top: 25%;
left: 50%;
transform: translate(-50%,-50%)
}
<h2>Example #1 (Using Display Flex and position absolute)</h2>
<div class="container-box-1">
<div class="box"></div>
<div class="box box2"></div>
</div>
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 2 years ago.
How do I center an image in flex box? I tried using justify-content and align-items to center but it didnt work.
In the code down below, i set my to a green box. I want to center the green box within the red box. Any help?
.body{
display: flex;
flex: 1;
width: 250px;
height: 250px;
background-color: blue;
padding: 10px;
}
.innerDiv1{
flex: 1;
background-color:red;
}
.innerDiv2{
flex: 1;
background-color: yellow;
}
.innerDiv3{
flex: 1;
width: 50px;
height: 50px;
background-color: green;
align-items: center; /*does not work*/
justify-content: flex-end; /*does not work*/
}
<div class = "body">
<div class = "innerDiv1">
<div class = "innerDiv3">
</div>
</div>
<div class = "innerDiv2">
</div>
</div>
You need to add display: flex, align-items: center and justify-content: center to the parent of the green box (.innerDiv1), not to the green box (.innerDiv3) itself:
.body {
display: flex;
width: 250px;
height: 250px;
background-color: blue;
padding: 10px;
}
.innerDiv1 {
flex: 1;
background-color:red;
/* HERE 👇 */
display: flex;
align-items: center;
justify-content: center;
}
.innerDiv2 {
flex: 1;
background-color: yellow;
}
.innerDiv3 {
width: 50px;
height: 50px;
background-color: green;
}
<div class="body">
<div class="innerDiv1">
<div class="innerDiv3">
</div>
</div>
<div class="innerDiv2"></div>
</div>
Alternatively, you could add display: flex to the parent (.innerDiv1) and align-self: center + margin: 0 auto to the green box (.innerDiv3):
.body {
display: flex;
width: 250px;
height: 250px;
background-color: blue;
padding: 10px;
}
.innerDiv1 {
flex: 1;
background-color:red;
/* AND HERE 👇 */
display: flex;
}
.innerDiv2 {
flex: 1;
background-color: yellow;
}
.innerDiv3 {
width: 50px;
height: 50px;
background-color: green;
/* AND HERE 👇 */
align-self: center;
margin: 0 auto;
}
<div class="body">
<div class="innerDiv1">
<div class="innerDiv3">
</div>
</div>
<div class="innerDiv2"></div>
</div>
You have to apply display:flex to the parent and the justify-content and align-items need to be set on the parent as well
You can have a look at some more details regarding the alignment here: Align Items in Flexbox
.body{
display: flex;
flex: 1;
width: 250px;
height: 250px;
background-color: blue;
padding: 10px;
}
.innerDiv1{
flex: 1;
background-color:red;
display: flex;
align-items: center;
justify-content: center;
}
.innerDiv2{
flex: 1;
background-color: yellow;
}
.innerDiv3{
width: 50px;
height: 50px;
background-color: green;
}
<div class = "body">
<div class = "innerDiv1">
<div class = "innerDiv3">
</div>
</div>
<div class = "innerDiv2">
</div>
</div>
You should align the green div in the red div instead, i.e to centre a child element in its parent, you should align the content of the parent div instead of the child div (in your case) by adding align-items: center; and justify-content: center; to the red div as so:
.body{
display: flex;
flex: 1;
width: 250px;
height: 250px;
background-color: blue;
padding: 10px;
}
.innerDiv1{
display: flex;
flex: 1;
align-items: center;
justify-content: center;
background-color: red;
}
.innerDiv2{
flex: 1;
background-color: yellow;
}
.innerDiv3{
width: 50px;
height: 50px;
background-color: green;
}
<div class = "body">
<div class = "innerDiv1">
<div class = "innerDiv3">
</div>
</div>
<div class = "innerDiv2">
</div>
</div>
I have a flex parent container set to flex-wrap: wrap and justify-content: flex-end. I have one flex-child, button-group which i want to align to flex-start, but align-self is not working.
.container{
width: 500px;
height: 500px;
background: pink;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
}
.button-group {
background: lightblue;
align-self: flex-start; /* Not working!*/
padding: 5px 10px;
}
.main-box {
width: 450px;
height: 300px;
background: lime;
}
.myfooter {
width: 50%;
height: 10%;
background-color: black;
}
<div class="container">
<div class="button-group">
<button></button>
<button></button>
<button></button>
</div>
<div class="main-box"></div>
<div class="myfooter"> </div>
</div>
How can I get the button group to align itself to the left while preserving the flex wrap?
Flexbox aligns items in 1D direction. Thats why the flex-start didnt work,
In oreder to make it work wrap it with a div and add appropriate styles as shown in the snippet
.container {
width: 500px;
height: 500px;
background: pink;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
}
.button-group {
background: lightblue;
padding: 5px 10px;
display: inline-block;
}
.main-box {
width: 450px;
height: 300px;
background: lime;
}
.myfooter {
width: 50%;
height: 10%;
background-color: black;
}
.holder{width: 100%;}
<div class="container">
<div class="holder">
<div class="button-group">
<button>1</button>
<button>2</button>
<button>3</button>
</div>
</div>
<div class="main-box"></div>
<div class="myfooter"> </div>
</div>
If you don't need margin to the right side of button-group, you can simply use .margin-right:auto; on .button-group to make it align itself to the left.
.container{
width: 500px;
height: 500px;
background: pink;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
}
.button-wrap {
display: flex;
flex-basis: 100%;
}
.button-group {
background: lightblue;
align-self: flex-start;
padding: 5px 10px;
margin-right: auto;
}
.main-box {
width: 450px;
height: 300px;
background: lime;
}
.myfooter {
width: 50%;
height: 10%;
background-color: black;
}
<div class="container">
<div class="button-wrap">
<div class="button-group">
<button></button>
<button></button>
<button></button>
</div>
</div>
<div class="main-box"></div>
<div class="myfooter"> </div>
</div>
Try this. You need to use a additional wrapper for button group and apply display: flex; flex-basis: 100%; for that wrapper.
https://jsfiddle.net/Sampath_Madhuranga/7ad2u804/
.container{
width: 500px;
height: 500px;
background: pink;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
}
.button-wrap {
display: flex;
flex-basis: 100%;
}
.button-group {
background: lightblue;
align-self: flex-start; /* Not working!*/
padding: 5px 10px;
}
.main-box {
width: 450px;
height: 300px;
background: lime;
}
.myfooter {
width: 50%;
height: 10%;
background-color: black;
}
<div class="container">
<div class="button-wrap">
<div class="button-group">
<button></button>
<button></button>
<button></button>
</div>
</div>
<div class="main-box"></div>
<div class="myfooter"> </div>
</div>
Here what happened, the flex-direction default is row, so your child elements is placed horizontally, but because the container width is static and it cant expand to wrap all of your child elements, it push them down, that cause your layout may look vertically but it is still placed horizontally. And in that case (flex-direction: row) the align-self property only set the flex items in the vertical direction.
How to fix it, first, you need to apply flex-direction: column. Then you can set the align-self for your flex-items and now and it will align self horizontally
.container{
width: 500px;
height: 500px;
background: pink;
flex-direction: column;
display: flex;
flex-wrap: wrap;
}
.button-group {
background: lightblue;
align-self: flex-start; /*working now!*/
padding: 5px 10px;
}
.main-box {
width: 450px;
height: 300px;
background: lime;
align-self: flex-end;
}
.myfooter {
width: 50%;
height: 10%;
background-color: black;
align-self: flex-end;
}
<div class="container">
<div class="button-group">
<button></button>
<button></button>
<button></button>
</div>
<div class="main-box"></div>
<div class="myfooter"> </div>
</div>
I am using flexbox to center content with justify-content: center which works as intended but flexbox also moves divs to be side by side which I don't want.
Here is an example
.flex {
display: flex;
justify-content: center;
}
.content {
width: 100px;
height: 100px;
background-color: #000;
margin: 10px;
}
<div class="flex">
<div class="content">
</div>
<div class="content">
</div>
</div>
How can I use flexbox while retaining the default one div on top of the other positioning.
You can set flex-direction: column and then you have to use align-items: center. Default flex-direction is row.
.flex {
display: flex;
align-items: center;
flex-direction: column;
}
.content {
width: 100px;
height 100px;
color: #000;
border: 1px solid black;
padding: 5px;
margin: 5px;
}
<div class="flex">
<div class="content"></div>
<div class="content"></div>
</div>
Try following code,
.flex {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.content {
width: 100px;
height: 100px;
background-color: #000;
margin: 10px;
}
<div class="flex">
<div class="content">
</div>
<div class="content">
</div>
</div>
Is this scenario doable with flex? Cause I can't text-align:center item2 (full width).
<div class="container">
<div class="item1"></div>
<div class="item2"></div>
</div>
EDIT:
I did change the image cause container color was white (as page background)...
You can make both item1 and item2 as display:flex and make justify-content:center and align-items:center that would center the content on those divs
check the snippet
.container {
display: flex;
}
.container div {
background: black;
color: red;
}
.item1 {
width: 50px;
height: 50px;
align-items: center;
display: flex;
justify-content: center;
}
.item2 {
margin-left: 10px;
width: 100%;
height: 70px;
align-items: center;
display: flex;
justify-content: center;
}
<div class="container">
<div class="item1">text</div>
<div class="item2">text</div>
</div>
hope it helps
Here's an example using flex: grow; for .item1 and .item2
CSS:
.container {
display: flex;
flex-wrap: wrap-reverse;
width: 700px;
background-color: black;
padding:33px;
vertical-align:middle;
}
.item1 {
flex-grow: 1;
background: yellowgreen;
height:200px;
margin: 15px;
text-align: center;
display: flex;
align-items: center;
justify-content: center
}
.item2 {
flex-grow: 2;
background: aquamarine;
height:200px;
margin: 15px;
display: inline-block;
text-align: center;
display: flex;
align-items: center;
justify-content: center
}
HTML
<div class="container">
<div class="item1">text</div>
<div class="item2">text</div>
</div>
JSFiddle