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
Related
I am using this to center things in CSS:
.testclass {
display: flex;
justify-content: center;
}
but when i want to scale elements using width and height, it doesn't work and my elements are not centered.
Like this:
.testclass {
display: flex;
justify-content: center;
width: 200px;
height: 200px;
}
What's the problem?
This looks like the expected behavior.
Remember that in this case justify-content: center; centers what is inside the container - not the container itself.
EDIT:
I added margin: 0 auto; to center the container.
#container1 {
display: flex;
justify-content: center;
border: 1px solid red;
}
#container1 > div {
border: 1px solid blue;
background: yellow;
}
#container2 {
display: flex;
justify-content: center;
border: 1px solid red;
width: 200px;
height: 200px;
margin: 0 auto;
}
#container2 > div {
border: 1px solid blue;
background: yellow;
}
<div id="container1">
<div>test 1</div>
</div>
<div id="container2">
<div>test 2</div>
</div>
display: flex; and justify-content: center;
works for parent elements. That is, child elements of that particular parent will be centered, not the parent.
To center .testclassHTML
<div class="parent">
<div class="testclass"></div>
</div>
CSS
.parent {
background-color: red;
display: flex;
justify-content: center;
}
.testclass {
background-color: green;
width: 200px;
height: 200px;
}
If you want full center (horizontal vertical) you can use this code:
.container {
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
<div class="container">
<div class="testclass">Content</div>
</div>
This question already has answers here:
White space under image [duplicate]
(5 answers)
Remove white space from image
(3 answers)
Closed 5 years ago.
So I have two divs in a full width container that I want to give variable sizing with flexbox, but no matter what I do, there is an annoying offset at the bottom. Using margins I can come close to fixing the problem, but it's never perfect.
If you run the code snippet below and scroll to the bottom you can see it, the image and the black content container are not aligned at the bottom.
What's going on?
#container {
width: 100%;
display: inline-flex;
flex-direction: row;
}
#image-wrapper {
flex-grow: 3;
max-width: 1000px;
position: relative;
/*background-color: black;*/
}
#menu {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 50px;
background-color: #101010;
color: #fefefe;
align-items: stretch;
display: flex;
margin-bottom:7px;
}
#form {
width: 100px;
}
#image {
width: 100%;
}
<div id="container">
<div id="image-wrapper">
<img id="image" src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg"/>
</div>
<div id="menu">
<div id="form">
CONTENT<br>CONTENT<br>
</div>
</div>
</container>
There is some space below the image since the image is an inline-element and as such there is some space reserved below the (invisble) baseline that the image is aligned to vertically. To avoid that, there are two possible solutions:
1.) Apply display: block; to the image (see first snippet)
or
2.) Apply font-size: 0 to the image container (see second snippet)
#container {
width: 100%;
display: inline-flex;
flex-direction: row;
}
#image-wrapper {
flex-grow: 3;
max-width: 1000px;
position: relative;
/*background-color: black;*/
}
img {
display: block;
}
#menu {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 50px;
background-color: #101010;
color: #fefefe;
align-items: stretch;
display: flex;
}
#form {
width: 100px;
}
#image {
width: 100%;
}
<div id="container">
<div id="image-wrapper">
<img id="image" src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" />
</div>
<div id="menu">
<div id="form">
CONTENT<br>CONTENT<br>
</div>
</div>
</div>
SECOND SOLUTION:
#container {
width: 100%;
display: inline-flex;
flex-direction: row;
}
#image-wrapper {
flex-grow: 3;
max-width: 1000px;
position: relative;
/*background-color: black;*/
font-size: 0;
}
#menu {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 50px;
background-color: #101010;
color: #fefefe;
align-items: stretch;
display: flex;
}
#form {
width: 100px;
}
#image {
width: 100%;
}
<div id="container">
<div id="image-wrapper">
<img id="image" src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" />
</div>
<div id="menu">
<div id="form">
CONTENT<br>CONTENT<br>
</div>
</div>
</div>
#container {
width: 100%;
display: inline-flex;
flex-direction: row;
}
#image-wrapper {
flex-grow: 3;
max-width: 1000px;
position: relative;
/*background-color: black;*/
}
#menu {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 50px;
background-color: #101010;
color: #fefefe;
align-items: stretch;
display: flex;
margin-bottom:4px;
}
#form {
width: 100px;
}
#image {
width: 100%;
}
<div id="container">
<div id="image-wrapper">
<img id="image" src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg"/>
</div>
<div id="menu">
<div id="form">
CONTENT<br>CONTENT<br>
</div>
</div>
</container>
Looks like the margin is just a bit off
Is it possible to use flexbox to center vertically and horizontally for background color purposes?
.wrapper {
display: flex;
width: 100vw;
height: 100vh;
text-align: center;
}
.item {
flex: 1;
background-color: green;
align-self: center;
justify-content: center;
}
<div class='wrapper'>
<div class='item'>
sdafsdfs
</div>
</div>
If I add a height: 100% the text moves back to the top.
Add display: flex for your items. Then only it can align items inside it as per your requirements. Please have a look at the updated code.
.wrapper {
display: flex;
width: 100vw;
height: 100vh;
text-align: center;
}
.item {
display: flex;
background-color: green;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
<div class='wrapper'>
<div class='item'>
sdafsdfs
</div>
</div>
Hope this help
I need to place the orange button align at the bottom of the blue one.
With my current flex code I cannot get the result wanted. Any ideas how to fix it? Thanks
.content {
width: 350px;
height: 150px;
background-color: yellow;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.row1 {
background-color: red;
}
.row2 {
background-color: blue;
height: 100px
}
.icon {
width: 50px;
height: 50px;
background-color: orange;
align-items: center;
justify-content: center;
}
<div class="content">
<div class="row1">
</div>
<div class="row2">
<div class="icon">
</div>
</div>
</div>
You also need to set display: flex on row2 and then you can use align-self: flex-end on orange element.
.content {
width: 350px;
height: 150px;
background-color: yellow;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.row1 {
background-color: red;
}
.row2 {
background-color: blue;
display: flex;
height: 100px
}
.icon {
width: 50px;
height: 50px;
background-color: orange;
align-self: flex-end;
}
<div class="content">
<div class="row1"></div>
<div class="row2">
<div class="icon"></div>
</div>
</div>
Here we add this css in "row 2",
display: flex;
flex-direction: column;
its means if any object put at bottom then just parent block set above css and element we need to set as bottom add css "margin-top:auto;"
.content {
width: 350px;
height: 150px;
background-color: yellow;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.row1 {
background-color: red;
}
.row2 {
background-color: blue;
height: 100px;
display: flex;
flex-direction: column;
}
.icon {
width: 50px;
height: 50px;
background-color: orange;
align-items: center;
justify-content: center;
margin-top: auto;
}
<div class="content">
<div class="row1">
</div>
<div class="row2">
<div class="icon">
</div>
</div>
</div>
There is lot of stylings that can be removed from your code if it is not required, please find it here, I have changed .content and .row2 stylings
.content {
width: 350px;
height: 150px;
background-color: yellow;
display: flex;
}
.row1 {
background-color: red;
}
.row2 {
background-color: blue;
height: 100px;
flex: 1;
align-self: flex-end;
display: flex;
align-items: flex-end;
}
.icon {
width: 50px;
height: 50px;
background-color: orange;
align-items: center;
justify-content: center;
}
<div class="content">
<div class="row1">
</div>
<div class="row2">
<div class="icon">
</div>
</div>
</div>
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