This question already has answers here:
Prevent flex items from rendering side to side
(3 answers)
Closed 5 years ago.
I have the following code which vertically centers my content
html
<div class="titleHide flex">
<h4>...</h4>
<h1>...</h1>
</div>
css
.titleHide {
position: absolute;
top: 0; left: 0;
height: 100%; width: 100%;
background-color: rgba(209,30,93,0.8);
}
.flex {
display: flex;
flex: 1;
align-items: center;
}
.flex is used by other divs on my site. However in this case it puts the h1 and h4 titles aligned beside each other, I want them the stack on top of each other.
You may consider writing a separate CSS class for that, say:
.flex-stack {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
}
.flex,
.flex-stack {
display: flex;
flex: 1;
align-items: center;
}
.flex-stack {
flex-direction: column;
}
.module-1,
.module-2 {
margin: 1em;
}
<h3>Flex Inline</h3>
<div class="flex">
<div class="module-1">
Module #1
</div>
<div class="module-2">
Module #2
</div>
</div>
<h3>Flex Stacked</h3>
<div class="flex-stack">
<div class="module-1">
Module #1
</div>
<div class="module-2">
Module #2
</div>
</div>
Hope it was helpful. Cheers!
Related
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 2 years ago.
I have the follwing:
.container {
display: flex;
justify-content: center;
flex-direction: row;
}
.el1 {
margin-right: 10vw;
}
.el2 {}
.el3 {}
<div class="container">
<Button class="el1">Info</Button>
<input class="el2"></input>
<Button class="el3">Search</Button>
</div>
The problem is, that this created two centered elements and the first element having an unknown position since it depends on the screen size.
Instead, I want it to be next to the beginning of the screen on the left side, left aligned with the other two elements sitting in the center of the screen.
You should wrap input and last button in a div container and set the position to absolute.
.container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
.child-wrapper {
position: absolute;
margin: auto;
}
.el1 {
margin-right: auto;
}
.el2 {}
.el3 {}
<div class="container">
<Button class="el1">Info</Button>
<div class="child-wrapper">
<input class="el2"></input>
<Button class="el3">Search</Button>
</div>
</div>
You can make .el1 position: absolute, and set the align-items of the container to center. The HTML structure remains as is.
.container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.el1 {
position: absolute;
left: 0;
}
<div class="container">
<Button class="el1">Info</Button>
<input class="el2" />
<Button class="el3">Search</Button>
</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.
Hi so I just need some help on flexbox, ive looked at other people and even copied there code to test but for some reason it isnt working. I'm trying to get a div with content aligned in the center top of a website. Here is my current code,
index.html
<div class="header">
<div class="headerContent">
<h1>TEST<h1>
</div>
</div
style.css
html {
display: flex;
}
.header {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.headerContent {
background-color: #2C374C;
width: 100%;
justify-content: center;
}
when you use flex-direction: column;, to center horizontally use align-items: center; instead of justify-content: center;
You also have set a height property.
Example:
.header{
display: flex;
height: 300px;
justify-content: center;
align-items: center;
background: red
}
<header class="header">
<div>centered</div>
</header>
it seems you are doing the right thing but on the wrong element. Your are treating the .header id as the parent container when it is the child.
In this case the container hierarchy is the following html -> header -> .headerContent
So to center header you need to act on its parent. Imagine it as a parent giving order to its child (literally).
html {
display: flex;
justify-content: center;
}
by doing this the parent component is justifying its content (children)
I would also recommend instead of using html to create another div container to be the parent of your header div like so
.headerContainer {
display: flex;
justify-content: center;
background-color: red
}
.header {
display: flex;
}
.headerContent {
background-color: #2C374C;
width: 100%;
}
<div class="headerContainer">
<div class="header">
<div class="headerContent">
<h1>TEST<h1>
</div>
</div>
</div>
I think just like this
.header {
width: 100%;
}
.headerContent {
background-color: #2c374c;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
<html>
<link rel="stylesheet" href="style.css" />
<div class="header">
<div class="headerContent">
<h1>Test</h1>
</div>
</div>
</html>
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 4 years ago.
Pretty common question I guess, but couldn't find any solution to fix it.
Code is:
<div class="container">
<div class="first-item">A</div>
<div class="second-item">B</div>
</div>
Should look like this:
first-item will be at middle and second-item should be at last.
What I've tried:
.container {
display: flex;
justify-content: center;
}
.container .second-item {
align-self: flex-end;
}
How could I achieve it using flex or in any other way of css?
Almost: you just need to add a margin auto on the first element
.container {
display: flex;
justify-content: center;
}
.first-item {
margin: auto;
}
.second-item {
align-self: flex-end;
}
Codepen demo
You can try that,
.container {
display: flex;
justify-content: center;
}
.container .second-item {
right: 0;
position: absolute;
}
<div class="container">
<div class="first-item">A</div>
<div class="second-item">B</div>
</div>
This question already has answers here:
margin-top only when the flex item is wrapped
(2 answers)
Closed 4 years ago.
i have a container with two child. i set flex-wrap property and value wrap. In Small device when they break in unknown width then how can i set margin/padding between two item?
https://jsfiddle.net/irojabkhan/w1x5phya/4/
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
background: blue;
font-size: 46px;
}
<div class="container">
<div class="item">Hello World</div>
<div class="item">Keep Learning</div>
</div>
Just set the margin-bottom to the amount of space you require:
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
background: blue;
font-size: 46px;
margin-bottom: 20px; /* Set this to whatever you want it to be*/
}
.contai<div class="container">
<div class="item">Hello World</div>
<div class="item">Keep Learning</div>
</div>
Simply added margin-bottom to parent-block;
`.parent{
display: flex;
flex-wrap: wrap;
margin-top: -30px;
}
.child-1,.child-2{
margin-top: 30px
}
`
Scenario :
I'm creating a pricing comparison table and am having difficulties aligning the last div, card-vat-fee, to the bottom of the container.
I need to do this because the tiers have longer running lists than
one another, causing the last div isn't aligned with the bottom of
the container.
How can I get the last div to align to the bottom of the flexbox?
Tried Case :
Of course, if I set a min-height: 320px; on the card-vat-fee class it will align the div to the bottom, however this isn't a responsive solution and I feel like there is a better approach that uses flex properties. Moreover, setting the card-vat-fee div to flex-grow, flex: 1 1 auto, produces an unideal solution.
Code :
<div class='pricing__tier'>
<div class='uni-card-header'>
</div>
<div class='uni-card-body'>
<div class='uni-row-on'>
</div>
<div class='uni-row-off'>
</div>
<div class='uni-row-on card-vat-fee'>
<div class='vat-fee-text'>
Credit card fees and VAT apply. See below for details.
</div>
</div>
</div>
</div>
<style>
.pricing__tier {
padding: 0;
text-align: center;
display: flex;
flex-direction: column;
width: 0%;
flex: 1;
}
.uni-card-body {
display: flex;
flex-direction: column;
}
</style>
Pricing Tier
Please Suggest.
Thanks in advance
Use margin-top:auto on the last div.
.pricing__tier {
padding: 0;
text-align: center;
display: flex;
flex-direction: column;
width: 25%;
flex: 1;
height: 200px; /* for demo purposes */
border: 1px solid grey;
}
.uni-card-body {
display: flex;
flex-direction: column;
flex: 1;
}
.card-vat-fee {
margin-top: auto; /* push to bottom */
background: green;
}
<div class='pricing__tier'>
<div class='uni-card-header'>
</div>
<div class='uni-card-body'>
<div class='uni-row-on'>
</div>
<div class='uni-row-off'>
</div>
<div class='uni-row-on card-vat-fee'>
<div class='vat-fee-text'>
Credit card fees and VAT apply. See below for details.
</div>
</div>
</div>
</div>
plaesa try this one :
.uni-card-body {
display: flex;
flex-direction: column;
width: 'for example' 700px;
}
.uni-row-on.card-vat-fee{
align-self: flex-end;
}
Ihope this will help you!
.uni-card-body {
display: flex;
flex-flow: row wrap;
justify-content: center;
background: yellow;
height: 90vh;
}
.uni-row-on.card-vat-fee {
align-self: flex-end;
background: green;
}
<div class='pricing__tier'>
<div class='uni-card-header'>
</div>
<div class='uni-card-body'>
<div class='uni-row-on'>
</div>
<div class='uni-row-off'>
</div>
<div class='uni-row-on card-vat-fee'>
<div class='vat-fee-text'>
Credit card fees and VAT apply. See below for details.
</div>
</div>
</div>
</div>
I've illustrated the thing in the snippet, it'll help.
Note: Content justification, background and height are for demonstration and not necessary.
1- set the parent div relative position without top & left & right &
bottom property
2- set the last div position absolute with bottom:0;right:0;left:0;height:36px;
<style>
.pricing__tier {
position:relative;
padding: 0;
text-align: center;
display: flex;
flex-direction: column;
width: 0%;
flex: 1;
}
.pricing__tier>.vat-fee-text {
position:absolute;
bottom:0;
right:0;
left:0;
height:36px;
}
</style>