I want to display Latest chat person 1st position(active) with firebase but firebase have not date field. so i am tring date number of milliseconds with flexbox column-reverse that will start from top but not from bottom. I have tried with position but not working.
Would you please give me a good way to do this.
.container {
display: flex;
flex-direction: column-reverse;
/*flex-flow: flex-start;*/
justify-content: flex-end;
align-items: flex-start;
height: 700px;
width: 100%;
background: blue;
position: absolute;
overflow:auto;
}
.box {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin: 20px;
width: 50px;
height: 50px;
background-color: red;
top:0px;
}
.active{
order:1;
}
<ul class="container">
<li class="box">1</li>
<li class="box">2</li>
<li class="box active">3</li>
<li class="box">4</li>
<li class="box">5</li>
<li class="box">6</li>
</ul>
Change justify-content property to flex-end - see demo below:
.container {
display: flex;
flex-direction: column-reverse;
/*flex-flow: flex-start;*/
justify-content: flex-end; /* CHANGED */
align-items: flex-start;
height: 700px;
width: 100%;
background: blue;
position: absolute;
overflow:auto;
}
.box {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin: 20px;
width: 50px;
height: 50px;
background-color: red;
top:0px;
}
<ul class="container">
<li class="box">1</li>
<li class="box">2</li>
<li class="box">3</li>
<li class="box">4</li>
<li class="box">5</li>
<li class="box">6</li>
</ul>
I was in the same situation, how I hacked it is by having the flex property - order saved in firebase for every post. Flex has an order property which you can set. It makes the ordering of elements very easy.
Just set order property and value fetched from firebase to your every post.
Here is the link of the page, I have used it on: https://hackinbits.com/blog
Here is the link to the MDN docs: Set https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items#The_order_property
Related
Well, in my react app, I want multiple rows having two columns. Just like first pink picture below.
But I am getting it like this. The divs are floating on the left side only, and nothing is working.
I think there should be a solution for using in map method. react component code.
{dog.map((data) => (
<div key={data.id} className="dogs-list">
<div id={data.id} className="first-column">
<img src={dogPic} alt="dog"></img>
<h3>Dog's Name</h3>
<h3>{data.name}</h3>
</div>
</div>
))}
Nothing is working. Can anyone please help?
this is the styling of this area.
.page .dogs-list {
/* display: flex; */
color: white;
width: 100%;
}
.page .dogs-list .first-column {
width: 50%;
/* border: 2px yellow solid; */
/* display: flex;
flex-direction: column; */
float: right;
}
.dogs-list img {
height: 250px;
width: 100%;
}
.dogs-list h3 {
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 10px;
font-size: 18px;
}
Looking forward!
If you do not have a given structure to follow, (there was none mentioned?) try the following.
.dogs-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.dog{
width: calc(50% - 4px);
background-color: beige;
border: 2px yellow solid;
display: flex;
flex-direction: column;
}
.dogs-list img {
height: 250px;
width: 100%;
}
.dogs-list h3 {
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 10px;
font-size: 18px;
}
<div className='dogs-list'>
{dog.map(data => (
<div id={data.id} className='dog'>
<img src={data.dogPic} alt='dog' />
<h3> Dog 's Name</h3> <h3> {data.name} </h3>
</div>
))}
</div>
How to center div horizontally, and vertically within the container using flexbox. In below example, I want each number below each other (in rows), which are centered horizontally.
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
}
row {
width: 100%;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
<div class="flex-container">
<div class="row">
<span class="flex-item">1</span>
</div>
<div class="row">
<span class="flex-item">2</span>
</div>
<div class="row">
<span class="flex-item">3</span>
</div>
<div class="row">
<span class="flex-item">4</span>
</div>
</div>
http://codepen.io/anon/pen/zLxBo
I think you want something like the following.
html, body {
height: 100%;
}
body {
margin: 0;
}
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.row {
width: auto;
border: 1px solid blue;
}
.flex-item {
background-color: tomato;
padding: 5px;
width: 20px;
height: 20px;
margin: 10px;
line-height: 20px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
<div class="flex-container">
<div class="row">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
</div>
See demo at: http://jsfiddle.net/audetwebdesign/tFscL/
Your .flex-item elements should be block level (div instead of span) if you want the height and top/bottom padding to work properly.
Also, on .row, set the width to auto instead of 100%.
Your .flex-container properties are fine.
If you want the .row to be centered vertically in the view port, assign 100% height to html and body, and also zero out the body margins.
Note that .flex-container needs a height to see the vertical alignment effect, otherwise, the container computes the minimum height needed to enclose the content, which is less than the view port height in this example.
Footnote:
The flex-flow, flex-direction, flex-wrap properties could have made this design easier to implement. I think that the .row container is not needed unless you want to add some styling around the elements (background image, borders and so on).
A useful resource is: http://demo.agektmr.com/flexbox/
How to Center Elements Vertically and Horizontally in Flexbox
Below are two general centering solutions.
One for vertically-aligned flex items (flex-direction: column) and the other for horizontally-aligned flex items (flex-direction: row).
In both cases the height of the centered divs can be variable, undefined, unknown, whatever. The height of the centered divs doesn't matter.
Here's the HTML for both:
<div id="container"><!-- flex container -->
<div class="box" id="bluebox"><!-- flex item -->
<p>DIV #1</p>
</div>
<div class="box" id="redbox"><!-- flex item -->
<p>DIV #2</p>
</div>
</div>
CSS (excluding decorative styles)
When flex items are stacked vertically:
#container {
display: flex; /* establish flex container */
flex-direction: column; /* make main axis vertical */
justify-content: center; /* center items vertically, in this case */
align-items: center; /* center items horizontally, in this case */
height: 300px;
}
.box {
width: 300px;
margin: 5px;
text-align: center; /* will center text in <p>, which is not a flex item */
}
DEMO
When flex items are stacked horizontally:
Adjust the flex-direction rule from the code above.
#container {
display: flex;
flex-direction: row; /* make main axis horizontal (default setting) */
justify-content: center; /* center items horizontally, in this case */
align-items: center; /* center items vertically, in this case */
height: 300px;
}
DEMO
Centering the content of the flex items
The scope of a flex formatting context is limited to a parent-child relationship. Descendants of a flex container beyond the children do not participate in flex layout and will ignore flex properties. Essentially, flex properties are not inheritable beyond the children.
Hence, you will always need to apply display: flex or display: inline-flex to a parent element in order to apply flex properties to the child.
In order to vertically and/or horizontally center text or other content contained in a flex item, make the item a (nested) flex container, and repeat the centering rules.
.box {
display: flex;
justify-content: center;
align-items: center; /* for single line flex container */
align-content: center; /* for multi-line flex container */
}
More details here: How to vertically align text inside a flexbox?
Alternatively, you can apply margin: auto to the content element of the flex item.
p { margin: auto; }
Learn about flex auto margins here: Methods for Aligning Flex Items (see box#56).
Centering multiple lines of flex items
When a flex container has multiple lines (due to wrapping) the align-content property will be necessary for cross-axis alignment.
From the spec:
8.4. Packing Flex Lines: the align-content
property
The align-content property aligns a flex container’s lines within the
flex container when there is extra space in the cross-axis, similar to
how justify-content aligns individual items within the main-axis.
Note, this property has no effect on a single-line flex container.
More details here: How does flex-wrap work with align-self, align-items and align-content?
Browser support
Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.
Centering solution for older browsers
For an alternative centering solution using CSS table and positioning properties see this answer: https://stackoverflow.com/a/31977476/3597276
Add
.container {
display: flex;
justify-content: center;
align-items: center;
}
to the container element of whatever you want to center. Documentation:
justify-content and
align-items.
You can make use of
display: flex;
align-items: center;
justify-content: center;
on your parent component
Don't forgot to use important browsers specific attributes:
align-items: center; -->
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center; -->
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
You could read this two links for better understanding flex:
http://css-tricks.com/almanac/properties/j/justify-content/ and
http://ptb2.me/flexbox/
Good Luck.
Use this:
html, body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
for some HTML markup like this:
<html>
<body>
<main>
<button> abc </button>
<p> something </p>
</main>
</body>
</html>
html, body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
<html>
<body>
<main>
<button> abc </button>
<p> something </p>
</main>
</body>
</html>
1 - Set CSS on parent div to display: flex;
2 - Set CSS on parent div to flex-direction: column; Note that this will make all content within that div line up top to bottom. This will work best if the parent div only contains the child and nothing else.
3 - Set CSS on parent div to justify-content: center;
Here is an example of what the CSS will look like:
.parentDivClass {
display: flex;
flex-direction: column;
justify-content: center;
}
diplay: flex; for it's container and margin:auto; for it's item works perfect.
NOTE: You have to setup the width and height to see the effect.
#container{
width: 100%; /*width needs to be setup*/
height: 150px; /*height needs to be setup*/
display: flex;
}
.item{
margin: auto; /*These will make the item in center*/
background-color: #CCC;
}
<div id="container">
<div class="item">CENTER</div>
</div>
margin: auto works "perfectly" with flexbox i.e. it allows to center item vertically and horizontally.
html, body {
height: 100%;
max-height: 100%;
}
.flex-container {
display: flex;
height: 100%;
background-color: green;
}
.container {
display: flex;
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS</title>
</head>
<body>
<div class="flex-container">
<div class="container">
<div class="row">
<span class="flex-item">1</span>
</div>
<div class="row">
<span class="flex-item">2</span>
</div>
<div class="row">
<span class="flex-item">3</span>
</div>
<div class="row">
<span class="flex-item">4</span>
</div>
</div>
</div>
</body>
</html>
If you need to center a text in a link this will do the trick:
div {
display: flex;
width: 200px;
height: 80px;
background-color: yellow;
}
a {
display: flex;
align-items: center;
justify-content: center;
text-align: center; /* only important for multiple lines */
padding: 0 20px;
background-color: silver;
border: 2px solid blue;
}
<div>
text
text with two lines
</div>
RESULT:
CODE
HTML:
<div class="flex-container">
<div class="rows">
<div class="row">
<span class="flex-item">1</span>
</div>
<div class="row">
<span class="flex-item">2</span>
</div>
<div class="row">
<span class="flex-item">3</span>
</div>
<div class="row">
<span class="flex-item">4</span>
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
}
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.rows {
display: flex;
flex-direction: column;
}
where flex-container div is used to center vertically and horizontally your rows div, and rows div is used to group your "items" and ordering them in a column based one.
You can add flex-direction:column to flex-container
.flex-container {
flex-direction: column;
}
Add display:inline-block to flex-item
.flex-item {
display: inline-block;
}
because you added width and height has no effect on this element since it has a display of inline. Try adding display:inline-block or display:block. Learn more about width and height.
Also add to row class( you are given row{} not taken as style)
.row{
width:100%;
margin:0 auto;
text-align:center;
}
Working Demo in Row :
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content:center;
flex-direction:column;
}
.row{
width:100%;
margin:0 auto;
text-align:center;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
display: inline-block;
}
<div class="flex-container">
<div class="row">
<span class="flex-item">1</span>
</div>
<div class="row">
<span class="flex-item">2</span>
</div>
<div class="row">
<span class="flex-item">3</span>
</div>
<div class="row">
<span class="flex-item">4</span>
</div>
</div>
Working Demo in Column :
.flex-container {
padding: 0;
margin: 0;
width: 100%;
list-style: none;
display: flex;
align-items: center;
}
.row {
width: 100%;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
display: inline-block;
}
<div class="flex-container">
<div class="row">
<span class="flex-item">1</span>
</div>
<div class="row">
<span class="flex-item">2</span>
</div>
<div class="row">
<span class="flex-item">3</span>
</div>
<div class="row">
<span class="flex-item">4</span>
</div>
</div>
Hope this will help.
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
}
row {
width: 100%;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
Using CSS+
<div class="EXTENDER">
<div class="PADDER-CENTER">
<div contentEditable="true">Edit this text...</div>
</div>
</div>
take a look HERE
I'm trying to make an entire flexbox item clickable, which is pointing at some javascript. As i'm using javascript to pull in content below the flexbox container there are multiple IDs within the structure to consider.
At the moment i'm only able to make the text clickable rather than the entire .div and if I move the link it breaks the flexbox from scaling.
There are some other similar questions on here, but because of the javascript none of the answers seem to be work.
I've added the code that i'm using here https://jsfiddle.net/xv3emywb/, and also pasted it below. Any help would be really appreciated.
Thank you!
HTML Structure:
<div class="offer-flex-container";>
<div id="solutions-anchor-div" class="offer-flex-item">
<a id="solutions-anchor" href="javascript:;">Solutions</a>
</div>
<div id = "services-anchor-div" class="offer-flex-item">
<a id="services-anchor" href="javascript:;">Services</a>
</div>
<div id="lifecycle-anchor-div" class="offer-flex-item">
<a id="lifecycle-anchor" href="javascript:;">Lifecycle</a>
</div>
</div>
CSS:
.offer-flex-container{
padding: 0;
margin: 0;
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.offer-flex-item{
background: #150f2a;
margin-right: 2px;
width: 500px;
height: 200px;
line-height: 100px;
color: white;
font-weight: 400;
font-size: 30px;
text-align: center;
padding-top: 60px;
}
And the javascript that i'm using to load content below the .div once the link has been selected.
$(document).ready(function(){
$("#solutions-content").show();
$("#services-content").hide();
$("#lifecycle-content").hide();
$("#solutions-anchor-div").css("background","#2fb4c8");
$("#solutions-anchor").click(function(){
$("#services-content").hide();
$("#solutions-content").show();
$("#lifecycle-content").hide();
$("#solutions-anchor-div").css("background","#2fb4c8");
$("#services-anchor-div").css("background","#150f2a");
$("#lifecycle-anchor-div").css("background","#150f2a");
});
$("#services-anchor").click(function(){
$("#services-content").show();
$("#solutions-content").hide();
$("#lifecycle-content").hide();
$("#services-anchor-div").css("background","#2fb4c8");
$("#solutions-anchor-div").css("background","#150f2a");
$("#lifecycle-anchor-div").css("background","#150f2a");
});
$("#lifecycle-anchor").click(function(){
$("#services-content").hide();
$("#solutions-content").hide();
$("#lifecycle-content").show();
$("#services-anchor-div").css("background","#150f2a");
$("#solutions-anchor-div").css("background","#150f2a");
$("#lifecycle-anchor-div").css("background","#2fb4c8");
});
});
It's because anchor tag is inline. So add below css code in css file and remove padding from ".offer-flex-item" class and it will work as expected.
.offer-flex-item a{
display:block;
}
.offer-flex-container {
padding: 0;
margin: 0;
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.offer-flex-item {
background: #150f2a;
margin-right: 2px;
width: 500px;
height: 200px;
line-height: 100px;
color: white;
font-weight: 400;
font-size: 30px;
text-align: center;
padding-top: 60px;
}
.full-width-link a{
display: block;
height: 100%;
}
a:hover{
background-color: white;
}
<div class="offer-flex-container">
<div id="solutions-anchor-div" class="offer-flex-item">
<a id="solutions-anchor" href="javascript:;">Solutions</a>
</div>
<div id="services-anchor-div" class="full-width-link offer-flex-item">
<a id="services-anchor" href="javascript:;">Services</a>
</div>
<div id="lifecycle-anchor-div" class="offer-flex-item">
<a id="lifecycle-anchor" href="javascript:;">Lifecycle</a>
</div>
</div>
I added an onhover class so you can see in this example what the surface of your link is. I also made the second element full size. However, still the padding of the parent element will be present.
Thanks to #CBroe for input.
The simple fix was to remove any padding from the div containers and add some styling to the link.
.offer-flex-item a{
display:block;
height: 100%
}
How to center div horizontally, and vertically within the container using flexbox. In below example, I want each number below each other (in rows), which are centered horizontally.
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
}
row {
width: 100%;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
<div class="flex-container">
<div class="row">
<span class="flex-item">1</span>
</div>
<div class="row">
<span class="flex-item">2</span>
</div>
<div class="row">
<span class="flex-item">3</span>
</div>
<div class="row">
<span class="flex-item">4</span>
</div>
</div>
http://codepen.io/anon/pen/zLxBo
I think you want something like the following.
html, body {
height: 100%;
}
body {
margin: 0;
}
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.row {
width: auto;
border: 1px solid blue;
}
.flex-item {
background-color: tomato;
padding: 5px;
width: 20px;
height: 20px;
margin: 10px;
line-height: 20px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
<div class="flex-container">
<div class="row">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
</div>
See demo at: http://jsfiddle.net/audetwebdesign/tFscL/
Your .flex-item elements should be block level (div instead of span) if you want the height and top/bottom padding to work properly.
Also, on .row, set the width to auto instead of 100%.
Your .flex-container properties are fine.
If you want the .row to be centered vertically in the view port, assign 100% height to html and body, and also zero out the body margins.
Note that .flex-container needs a height to see the vertical alignment effect, otherwise, the container computes the minimum height needed to enclose the content, which is less than the view port height in this example.
Footnote:
The flex-flow, flex-direction, flex-wrap properties could have made this design easier to implement. I think that the .row container is not needed unless you want to add some styling around the elements (background image, borders and so on).
A useful resource is: http://demo.agektmr.com/flexbox/
How to Center Elements Vertically and Horizontally in Flexbox
Below are two general centering solutions.
One for vertically-aligned flex items (flex-direction: column) and the other for horizontally-aligned flex items (flex-direction: row).
In both cases the height of the centered divs can be variable, undefined, unknown, whatever. The height of the centered divs doesn't matter.
Here's the HTML for both:
<div id="container"><!-- flex container -->
<div class="box" id="bluebox"><!-- flex item -->
<p>DIV #1</p>
</div>
<div class="box" id="redbox"><!-- flex item -->
<p>DIV #2</p>
</div>
</div>
CSS (excluding decorative styles)
When flex items are stacked vertically:
#container {
display: flex; /* establish flex container */
flex-direction: column; /* make main axis vertical */
justify-content: center; /* center items vertically, in this case */
align-items: center; /* center items horizontally, in this case */
height: 300px;
}
.box {
width: 300px;
margin: 5px;
text-align: center; /* will center text in <p>, which is not a flex item */
}
DEMO
When flex items are stacked horizontally:
Adjust the flex-direction rule from the code above.
#container {
display: flex;
flex-direction: row; /* make main axis horizontal (default setting) */
justify-content: center; /* center items horizontally, in this case */
align-items: center; /* center items vertically, in this case */
height: 300px;
}
DEMO
Centering the content of the flex items
The scope of a flex formatting context is limited to a parent-child relationship. Descendants of a flex container beyond the children do not participate in flex layout and will ignore flex properties. Essentially, flex properties are not inheritable beyond the children.
Hence, you will always need to apply display: flex or display: inline-flex to a parent element in order to apply flex properties to the child.
In order to vertically and/or horizontally center text or other content contained in a flex item, make the item a (nested) flex container, and repeat the centering rules.
.box {
display: flex;
justify-content: center;
align-items: center; /* for single line flex container */
align-content: center; /* for multi-line flex container */
}
More details here: How to vertically align text inside a flexbox?
Alternatively, you can apply margin: auto to the content element of the flex item.
p { margin: auto; }
Learn about flex auto margins here: Methods for Aligning Flex Items (see box#56).
Centering multiple lines of flex items
When a flex container has multiple lines (due to wrapping) the align-content property will be necessary for cross-axis alignment.
From the spec:
8.4. Packing Flex Lines: the align-content
property
The align-content property aligns a flex container’s lines within the
flex container when there is extra space in the cross-axis, similar to
how justify-content aligns individual items within the main-axis.
Note, this property has no effect on a single-line flex container.
More details here: How does flex-wrap work with align-self, align-items and align-content?
Browser support
Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.
Centering solution for older browsers
For an alternative centering solution using CSS table and positioning properties see this answer: https://stackoverflow.com/a/31977476/3597276
Add
.container {
display: flex;
justify-content: center;
align-items: center;
}
to the container element of whatever you want to center. Documentation:
justify-content and
align-items.
You can make use of
display: flex;
align-items: center;
justify-content: center;
on your parent component
Don't forgot to use important browsers specific attributes:
align-items: center; -->
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center; -->
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
You could read this two links for better understanding flex:
http://css-tricks.com/almanac/properties/j/justify-content/ and
http://ptb2.me/flexbox/
Good Luck.
Use this:
html, body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
for some HTML markup like this:
<html>
<body>
<main>
<button> abc </button>
<p> something </p>
</main>
</body>
</html>
html, body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
<html>
<body>
<main>
<button> abc </button>
<p> something </p>
</main>
</body>
</html>
1 - Set CSS on parent div to display: flex;
2 - Set CSS on parent div to flex-direction: column; Note that this will make all content within that div line up top to bottom. This will work best if the parent div only contains the child and nothing else.
3 - Set CSS on parent div to justify-content: center;
Here is an example of what the CSS will look like:
.parentDivClass {
display: flex;
flex-direction: column;
justify-content: center;
}
diplay: flex; for it's container and margin:auto; for it's item works perfect.
NOTE: You have to setup the width and height to see the effect.
#container{
width: 100%; /*width needs to be setup*/
height: 150px; /*height needs to be setup*/
display: flex;
}
.item{
margin: auto; /*These will make the item in center*/
background-color: #CCC;
}
<div id="container">
<div class="item">CENTER</div>
</div>
margin: auto works "perfectly" with flexbox i.e. it allows to center item vertically and horizontally.
html, body {
height: 100%;
max-height: 100%;
}
.flex-container {
display: flex;
height: 100%;
background-color: green;
}
.container {
display: flex;
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS</title>
</head>
<body>
<div class="flex-container">
<div class="container">
<div class="row">
<span class="flex-item">1</span>
</div>
<div class="row">
<span class="flex-item">2</span>
</div>
<div class="row">
<span class="flex-item">3</span>
</div>
<div class="row">
<span class="flex-item">4</span>
</div>
</div>
</div>
</body>
</html>
If you need to center a text in a link this will do the trick:
div {
display: flex;
width: 200px;
height: 80px;
background-color: yellow;
}
a {
display: flex;
align-items: center;
justify-content: center;
text-align: center; /* only important for multiple lines */
padding: 0 20px;
background-color: silver;
border: 2px solid blue;
}
<div>
text
text with two lines
</div>
RESULT:
CODE
HTML:
<div class="flex-container">
<div class="rows">
<div class="row">
<span class="flex-item">1</span>
</div>
<div class="row">
<span class="flex-item">2</span>
</div>
<div class="row">
<span class="flex-item">3</span>
</div>
<div class="row">
<span class="flex-item">4</span>
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
}
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.rows {
display: flex;
flex-direction: column;
}
where flex-container div is used to center vertically and horizontally your rows div, and rows div is used to group your "items" and ordering them in a column based one.
You can add flex-direction:column to flex-container
.flex-container {
flex-direction: column;
}
Add display:inline-block to flex-item
.flex-item {
display: inline-block;
}
because you added width and height has no effect on this element since it has a display of inline. Try adding display:inline-block or display:block. Learn more about width and height.
Also add to row class( you are given row{} not taken as style)
.row{
width:100%;
margin:0 auto;
text-align:center;
}
Working Demo in Row :
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content:center;
flex-direction:column;
}
.row{
width:100%;
margin:0 auto;
text-align:center;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
display: inline-block;
}
<div class="flex-container">
<div class="row">
<span class="flex-item">1</span>
</div>
<div class="row">
<span class="flex-item">2</span>
</div>
<div class="row">
<span class="flex-item">3</span>
</div>
<div class="row">
<span class="flex-item">4</span>
</div>
</div>
Working Demo in Column :
.flex-container {
padding: 0;
margin: 0;
width: 100%;
list-style: none;
display: flex;
align-items: center;
}
.row {
width: 100%;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
display: inline-block;
}
<div class="flex-container">
<div class="row">
<span class="flex-item">1</span>
</div>
<div class="row">
<span class="flex-item">2</span>
</div>
<div class="row">
<span class="flex-item">3</span>
</div>
<div class="row">
<span class="flex-item">4</span>
</div>
</div>
Hope this will help.
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
}
row {
width: 100%;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
Using CSS+
<div class="EXTENDER">
<div class="PADDER-CENTER">
<div contentEditable="true">Edit this text...</div>
</div>
</div>
take a look HERE
I have an outerWrapper, innerWrapper, and children. outerWrapper has a height of 300px, and is display: flex. innerWrapper is also display: flex, and is flex-direction: column.
When I add align-items with a value of anything but stretch to outerWrapper, the children display one long column. They ignore the 300px height. Here's an image of how it displays:
It should display like this:
Just with align-items: flex-end.
Why is this happening, and how can I use align-items: flex-end and have the children display like the second image?
JSFiddle
#outerWrapper {
height: 300px;
background-color: lightgreen;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-end;
}
ul {
padding: 0;
margin: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
flex-direction: column;
}
li {
list-style-type: none;
width: 100px;
height: 100px;
background-color: lightblue;
border: 1px solid;
}
<div id="outerWrapper">
<ul id="innerWrapper">
<li class="child">I'm #01</li>
<li class="child">I'm #02</li>
<li class="child">I'm #03</li>
<li class="child">I'm #04</li>
<li class="child">I'm #05</li>
</ul>
</div>
Update
The answer to this question, is to add a height of 210px to innerWrapper. But I need to get to that number using JavaScript, because the amount of boxes will be dynamic.
I tried the following code:
innerWrapper.style.height = (lastChild.offsetTop - innerWrapper.offsetTop + lastChild.offsetHeight) + 'px';
but it didn't fix it. It just made the height to: 5 * 102 (5 = number of boxes; 102 = height + border).
How can I set the correct height to innerWrapper using JavaScript? (I can't do height: 100% because I won't be able to set align-items: flex-end or center.)
JSFiddle
var innerWrapper = document.getElementById('innerWrapper');
var lastChild = innerWrapper.lastElementChild;
newHight = lastChild.offsetTop - innerWrapper.offsetTop + lastChild.offsetHeight;
innerWrapper.style.height = newHight + 'px';
#outerWrapper {
height: 300px;
background-color: lightgreen;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-end;
}
ul {
padding: 0;
margin: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
flex-direction: column;
/*height: 206px;*/
}
li {
list-style-type: none;
width: 100px;
height: 100px;
background-color: lightblue;
border: 1px solid;
}
<div id="outerWrapper">
<ul id="innerWrapper">
<li class="child">I'm #01</li>
<li class="child">I'm #02</li>
<li class="child">I'm #03</li>
<li class="child">I'm #04</li>
<li class="child">I'm #05</li>
</ul>
</div>
You've defined a height for #outerWrapper: height: 300px.
Just give the child – #innerWrapper – an equal height: height: 100%. Now they wrap.
Then, if you want the items positioned at the container bottom, use flex auto margins on the odd-numbered items.
Use an invisible pseudo-element to make the last odd-numbered item always align with the top row.
#outerWrapper {
height: 300px;
background-color: lightgreen;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-end;
}
ul {
padding: 0;
margin: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
flex-direction: column;
height: 100%; /* NEW */
}
li {
list-style-type: none;
width: 100px;
height: 100px;
background-color: lightblue;
border: 1px solid;
}
li:nth-child(odd) { margin-top: auto; } /* NEW */
ul::after {
content: ""; /* NEW */
width: 100px; /* NEW */
height: 100px; /* NEW */
border: 1px solid; /* NEW */
visibility: hidden; /* NEW */
}
<div id="outerWrapper">
<ul id="innerWrapper">
<li class="child">I'm #01</li>
<li class="child">I'm #02</li>
<li class="child">I'm #03</li>
<li class="child">I'm #04</li>
<li class="child">I'm #05</li>
</ul>
</div>
Revised Fiddle
Try adding the height of the flexbox container:
ul {
...
height: 100%;
}
Since both the outerWrapper and menu element have flex positioning, you'll have to make some adjustments to the menu elements' dimensions and alignment as well. Here's an updated fiddle with the behavior you're looking for / matches the second image:
https://jsfiddle.net/wtyqo1su/1/
#outerWrapper {
width: 100%;
height: 300px;
background-color: lightgreen;
display: flex;
justify-content: center;
align-items: center;
}
ul {
height: 250px;
width: 300px;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
}
li {
list-style-type: none;
width: 100px;
height: 100px;
background-color: lightblue;
border: 1px solid;
}
I restricted the ul to a specific width / height (so the children would actually wrap as expected). Let me know if you have any questions!