I am trying to center items vertically with justify-content while using the flex-column property applied. align-items is working as it should but the content is not responding to the Y axis. I have align-items commented out, I dont want to center X axis, just the Y axis.
.img1-container {
display: flex;
justify-content: center;
/* align-items: center; */
height: 100%;
}
.web-dev {
display: flex;
font-size: 60px;
}
.john-sass {
display: flex;
font-size: 48px;
margin-left: 38.5%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="img1">
<div class="container img1-container d-flex flex-column justify-content-center">
<h1 class="into-text web-dev"> Front-End Web Developer</h1>
<h4 class="into-text john-sass">John Sasser</h4>
</div>
</div>
You need to do some div management to get this right , like this,
.img1 {
display: table;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.container {
display: table-cell;
vertical-align: middle;
}
.content{
margin-left: auto;
margin-right: auto;
width: 400px;
}
<div class="img1">
<div class="container img1-container d-flex flex-column justify-content-center">
<div class="content">
<h1 class="into-text web-dev"> Front-End Web Developer</h1>
<h4 class="into-text john-sass">John Sasser</h4>
</div>
</div>
</div>
just add justify-content: space-between; to your .img1-container class instead of justify-content: center;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.img1-container {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
width: 100%;
background-color: gray;
padding: 30px 0px;
}
.web-dev {
font-size: 60px;
}
.john-sass {
font-size: 48px;
}
<div class="img1">
<div class="container img1-container d-flex flex-column justify-content-center">
<h1 class="into-text web-dev"> Front-End Web Developer</h1>
<h4 class="into-text john-sass">John Sasser</h4>
</div>
</div>
It's just working fine with the align-items: center; You might not be able to notice it,
Here's the working example. Tell me if I have missed something
https://codepen.io/shivam1100/pen/yLymveb?editors=1100
I keep a 100% width and 100% view height
.img1{
width: 100%;
height:100%;
}
.img1-container{
height:100vh;
display: flex;
flex-direction:column;
align-items:center;
text-align: center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="img1">
<div class="container img1-container">
<h1 class="into-text web-dev">Front-End Web Developer</h1>
<h4 class="into-text john-sass">John Sasser</h4>
</div>
</div>
It was the height on the img1-container.....
Im guessing that adding the height property messes with the code behind the flexbox.
Related
For a personal project with Angular, Angular Material and Flex-Layout I am trying to achieve a similar layout used by Bring! App:
Having images of different size (not all squared) I would like to center them proportionally and allow some text under them.
I have the following template and scss styles:
<div fxLayout="row" fxLayoutGap="5px" class="cards-container">
<div class="item-card">
<div class="image">
<img src="../../../../assets/icons/apple.png" alt="Mela" />
</div>
<span class="item-name">Mela</span>
<span class="description">12</span>
</div>
<div class="item-card">
<div class="image">
<img src="../../../../assets/icons/milk.png" alt="Latte" />
</div>
<span class="item-name">Latte</span>
<span class="description">1 description comes here, must be hidden if long text</span>
</div>
</div>
//---------------------------------------------------
.cards-container {
flex-wrap: wrap;
.item-card {
display: flex;
flex-direction: column;
justify-items: end;
color: white;
width: 7em;
height: 7em;
text-align: center;
background-color: darkslategray;
margin: 5px 0;
img {
width: 40%; // TODO: how to scale?
height: 40%;
}
.text-container {
display: flex;
flex-direction: column;
.item-name {
display: inline-block;
font-size: 1.1em;
}
.description {
width: 99%;
font-size: 0.8em;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-block;
}
}
}
}
However the images do not scale down to keep the proportions with the others images, especially if narrow and long.
It all seems to look fine but it looks like your HTML code is missing the .text-container div and class.
<div class="item-card">
<div class="image">
<img src="../../../../assets/icons/apple.png" alt="Mela" />
</div>
<span class="item-name">Mela</span>
<span class="description">12</span>
</div>
should be
<div class="item-card">
<div class="image">
<img src="../../../../assets/icons/apple.png" alt="Mela" />
</div>
<div class="text-container">
<span class="item-name">Mela</span>
<span class="description">12</span>
</div>
</div>
Now for the text-overflow: ellipsis; this doesn't work on multi-lines unless you implement some JavaScript or something.
If there is any change to your code, I'd make the images a background-image instead. There could be other ways without this, but it's what I use to make sure the container is responsive with the image always responsive and centred.
For Example: https://codepen.io/StudioKonKon/pen/wRjOzr (Includes SCSS)
.image {
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
font-size: 0;
}
.image-mela {
background-image: url("https://via.placeholder.com/150x175");
}
.image-latte {
background-image: url("https://via.placeholder.com/200x50");
}
.image-long {
background-image: url("https://via.placeholder.com/50x100");
}
.cards-container {
width: 100%;
margin: auto;
display: flex;
flex-wrap: wrap;
}
.cards-container .item-card {
display: flex;
flex-direction: column;
justify-items: end;
color: white;
width: 7em;
height: 7em;
text-align: center;
background-color: darkslategray;
margin: 5px;
padding: 0.5em;
box-sizing: border-box;
overflow: hidden;
}
.cards-container .item-card .image {
display: block;
margin: auto;
width: 40%;
height: 40%;
}
.cards-container .item-card .text-container {
display: flex;
flex-direction: column;
}
.cards-container .item-card .text-container .item-name {
display: inline-block;
font-size: 1.1em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cards-container .item-card .text-container .description {
font-size: 0.8em;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
<div fxLayout="row" fxLayoutGap="5px" class="cards-container">
<div class="item-card">
<div class="image image-mela">Mela</div>
<div class="text-container">
<span class="item-name">Mela</span>
<span class="description">12</span>
</div>
</div>
<div class="item-card">
<div class="image image-latte">Latte</div>
<div class="text-container">
<span class="item-name">Latte</span>
<span class="description">1 description comes here, must be hidden if long text</span>
</div>
</div>
<div class="item-card">
<div class="image image-long">Long Image</div>
<div class="text-container">
<span class="item-name">Long Image Text</span>
<span class="description">must be hidden if long text</span>
</div>
</div>
</div>
Have you tried:
img {
width: 40%;
height: auto;
}
It should leave the image proportions consistent.
It is simple. I think it will solve the problem. :)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>item</title>
<style type="text/css" media="screen">
.item-single{
width: 100px;
background-color: #e7e7e7;
height: 100px;
text-align: center;
}
.item-single span{
display: block;
border: 1px solid #000; /* just to show the alignment */
}
.item-single img{
width: 50%; /* you can scale it down using width */
border:1px solid #000; /* just to show the alignment */
display: block;
margin: auto;
}
</style>
</head>
<body>
<div class="item-single">
<img src="http://sugamparajuli.com.np/wp-content/uploads/2019/01/banana.png">
<span class="item-name">Mela</span>
<span class="description">12</span>
</div>
</body>
</html>
This is the result.
item-image
I am trying to vertically align divs with flexbox, by using the align-content: center. It works fine in Firefox and IE, but it does not vertically align in Chrome. In Chrome the divs stays on top.
<div class="products-wrapper">
<div class="product">
<img src="images/temporary.jpg" alt="Temporary">
<h3>Title</h3>
<p>Text.</p>
</div>
<div class="product">
<img src="images/temporary.jpg" alt="Temporary">
<h3>Title</h3>
<p>Text.</p>
</div>
<div class="product">
<img src="images/temporary.jpg" alt="Temporary">
<h3>Title</h3>
<p>Text.</p>
</div>
</div>
And CSS:
.products-wrapper {
width: 100%;
min-height: 100vh;
/* FLEX */
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: center;
}
.product {
max-width: 250px;
padding: 10px;
}
.product img {
display: block;
margin: 0 auto;
max-height: 250px;
max-width: 250px;
}
I have also been trying align-items: center; which centers the divs vertically, but it will not be a straight line with the images and text if I have different amount of text for example.
Anyone with a solution how to vertically center divs (straight), which works in all browsers?
Image example:
Edit: If you don't need the height to be dynamic, align-items: center; will work with (for example) max-height: 400px; on the .product div. Not really what I wanted though.
In order to achieve what you want you'll need to use align-items: flex-start, this way all items will be aligned to the top of their line. And to center vertically you're looking for the align-items: center property which aligns the items in the flex container along the cross axis, which in your case you'll have to use in an outer wrapper to make sure the products div is centered in the page.
The align-content: center property comes into play only when there is more than one line (wrapped content).
A better explanation about the difference between those two properties is in the answer to this stackoverflow question
.outer-wrapper {
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.products-wrapper {
width: 100%;
/* FLEX */
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
background-color: gray;
align-items: flex-start;
}
.product {
max-width: 250px;
padding: 10px;
background-color: red;
margin: 5px;
}
.product img {
display: block;
margin: 0 auto;
max-height: 250px;
max-width: 250px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="outer-wrapper">
<div class="products-wrapper">
<div class="product">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/St._Bernard_puppy.jpg/120px-St._Bernard_puppy.jpg" alt="Temporary">
<h3>Title</h3>
<p>Text.</p>
</div>
<div class="product">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/St._Bernard_puppy.jpg/120px-St._Bernard_puppy.jpg" alt="Temporary">
<h3>Title</h3>
<p>Text.</p>
</div>
<div class="product">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/St._Bernard_puppy.jpg/120px-St._Bernard_puppy.jpg" alt="Temporary">
<h3>Title</h3>
<p>Text.</p>
</div>
</div>
</div>
</body>
</html>
Make the .product element, flex container. This so you can align the content inside them.
.product {
max-width: 250px;
padding: 10px;
display: flex;
justify-content: center;
flex-direction: column;
}
Hope this helps :)
.products-wrapper {
width: 100%;
min-height: 100vh;
/* FLEX */
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: center;
}
.product {
max-width: 250px;
padding: 10px;
display: flex;
justify-content: center;
flex-direction: column;
}
.product img {
display: block;
margin: 0 auto;
max-height: 250px;
max-width: 250px;
}
<div class="products-wrapper">
<div class="product">
<img src="images/temporary.jpg" alt="Temporary">
<h3>Title</h3>
<p>Text.</p>
</div>
<div class="product">
<img src="images/temporary.jpg" alt="Temporary">
<h3>Title</h3>
<p>Text.</p>
</div>
<div class="product">
<img src="images/temporary.jpg" alt="Temporary">
<h3>Title</h3>
<p>Text.</p>
</div>
</div>
I have tried negative margins and other hacks but as far as i know, there shouldn't be any margins there in the first place. With just a simple box i can get zero margins between the tags but somehow the stuff outside that is messing with it.
The problem is with the neon blue badges in the bottom right corner.
.info{
display: flex;
flex-direction: row;
// justify-content: space-between;
}
.column {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 48%;
min-height: 61.9px;
// background-color: #00ffff;
display: flex;
flex-direction: column;
}
.info-block{
display: flex;
flex-direction: column;
}
.spacer{
height:14.7px;
width: 1px;
}
.tag{
line-height: 0;
display:inline-block;
height: 15.8px;
width:40px;
padding-right: 4px;
padding-left: 4px;
padding-top: 2px;
background-color: #00ffff;
border-radius: 4px;
}
.tag-container{
line-height: 0;
width: 168px;
height:78px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
}
.tag-text{
width:20px;
font-family: HelveticaNeue-Bold;
font-size: 8px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
text-align: center;
color: #ffffff;
}
<div class="info">
<div class="column">
<div class="info-block">
<div class="info-header">Location</div>
<div class="info-text">place</div>
</div>
<div class="spacer"></div>
<div class="info-block">
<div class="info-header">Mobile</div>
<div class="info-text">+44 (0) 788-588</div>
</div>
</div>
<div class="column">
<div class="info-block">
<div class="info-header">Menu</div>
<div class="info-text"><a>bk.com</a></div>
</div>
<div class="spacer"></div>
<div class="info-block ">
<div class="info-header">Tags</div>
<div class="tag-containter">
<div class="tag"><div class="tag-text">h</div></div>
<div class="tag"><div class="tag-text">Som</div></div>
<div class="tag"><div class="tag-text">Somethg</div></div>
<div class="tag">
<div class="tag-text">ng</div>
</div>
<div class="tag">
<div class="tag-text">Somhing</div>
</div>
</div>
</div>
</div>
You only made a silly mistake.
Just check your class name .tag-containter in css and html.
you use .tag-container instead of tag-containter class.
you mispelled the class tag-container either in the html (tag-containter) or in the css . notice the extra T in html and missing in css selector
.info {
display: flex;
flex-direction: row;
/* justify-content: space-between;*/
}
.column {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 48%;
min-height: 61.9px;
/* background-color: #00ffff;*/
display: flex;
flex-direction: column;
}
.info-block {
display: flex;
flex-direction: column;
}
.spacer {
height: 14.7px;
width: 1px;
}
.tag {
line-height: 0;
height: 15.8px;
width: 40px;
padding-right: 4px;
padding-left: 4px;
padding-top: 2px;
background-color: #00ffff;
border-radius: 4px;
}
.tag-containter {
width: 168px;
height: 78px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
}
.tag-text {
font-family: HelveticaNeue-Bold;
font-size: 8px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
text-align: center;
color: #ffffff;
}
<div class="info">
<div class="column">
<div class="info-block">
<div class="info-header">Location</div>
<div class="info-text">place</div>
</div>
<div class="spacer"></div>
<div class="info-block">
<div class="info-header">Mobile</div>
<div class="info-text">+44 (0) 788-588</div>
</div>
</div>
<div class="column">
<div class="info-block">
<div class="info-header">Menu</div>
<div class="info-text"><a>bk.com</a>
</div>
</div>
<div class="spacer"></div>
<div class="info-block ">
<div class="info-header">Tags</div>
<div class="tag-containter">
<div class="tag">
<div class="tag-text">h</div>
</div>
<div class="tag">
<div class="tag-text">Som</div>
</div>
<div class="tag">
<div class="tag-text">Somethg</div>
</div>
<div class="tag">
<div class="tag-text">ng</div>
</div>
<div class="tag">
<div class="tag-text">Somhing</div>
</div>
</div>
</div>
</div>
.tag is set to display: inline-block;, which is an inline element. Spaces between inline elements are preserved in HTML, so if you have spaces (or returns) between the elements, you will see a space between the elements on the page. To remove the spaces between the .tag boxes, remove the actual spaces between those elements.
I've got the following markup:
.row {
display: flex;
align-items: stretch;
margin: -16px;
background: #ddd;
}
.row .col {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
margin: 16px;
background: #fff;
}
.header, .content, .footer {
padding: 16px;
background: red;
}
<div class="row">
<div class="col">
<div class="header">Header #1</div>
<div class="content">Lorem Ipsum<br />Dolor<br />Sit Amet</div>
<div class="footer">Footer</div>
</div>
<div class="col">
<div class="header">Header #2</div>
<div class="content">Lorem Ipsum<br />Dolor</div>
</div>
</div>
Unfortunatly the second header isn't align vertically to the top. Is there a way to archive this with flexbox? I need the ".header" to be aligned the the top and the ".content" to be centered within the rest of the box.
Greetings!
No, not really, not without another wrapper which is a flex-container.
As flexbox is, to a certain extent based on manipulting margins, there is no method (AFAIK, although I'd be interested to find out if there is) to justify-content: center and then align-self a child element to somewhere else other than center.
I'd go with something like this: Add a wrapper to the "content" div, give it flex:1 to fill the remaining space below the header, then make that wrapper display:flex with justify-content:center.
This seems to be the most logical method
.col {
height: 150px;
width: 80%;
margin: 1em auto;
border: 1px solid grey;
display: flex;
flex-direction: column;
}
.header {
background: lightblue;
}
.content {
background: orange;
}
.flexy {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
background: plum;
}
<div class="col">
<div class="header">Header #2</div>
<div class="flexy">
<div class="content">Lorem Ipsum
<br />Dolor</div>
</div>
</div>
Codepen Demo
Flexbox opens up all sorts of opportunities with margin: auto; this is one of them. Setting margin to auto along the flex axis (vertical in this case) will absorb any extra space before dividing it up between the flex items. Finally it's possible to vertically center stuff without creating a div soup.
.row {
display: flex;
align-items: stretch;
margin: -16px;
background: #ddd;
}
.row .col {
display: flex;
flex-direction: column;
flex: 1;
margin: 16px;
background: #fff;
}
.header, .content, .footer {
padding: 16px;
background: red;
}
.content {
margin-top: auto;
margin-bottom: auto;
}
<div class="row">
<div class="col">
<div class="header">Header #1</div>
<div class="content">Lorem Ipsum<br />Dolor<br />Sit Amet</div>
<div class="footer">Footer</div>
</div>
<div class="col">
<div class="header">Header #2</div>
<div class="content">Lorem Ipsum<br />Dolor</div>
</div>
</div>
I´m trying to learn HTML/CSS and find that when I add
display: -webkit-flex; to the CSS, the last div in the nav is pushed to the next line. When I disable flex box by simply deleting the line the div jumps back up to the (inline-block) nav. I'm currently testing in safari
The page looks as it should in Firefox, though not in Safari, any suggestions as to why?
Here's the code:
<body>
<header>
<div class="logo">
<h1>Guitar site</h1>
</div>
<nav>
<div class="leftMenu">
Home
</div>
<div class="centerMenu">
<div>
Beginner
</div>
<div>
Advanced
</div>
<div>
Tips
</div>
</div>
<div class="rightMenu">
Contact
</div>
</nav>
</header>
<h1> test</h1>
</body>
This is the all the CSS I've written, there is also a CSS reset section that I haven't included.
.leftMenu,
.rightMenu,
.centerMenu {
text-align: center;
display: inline-block;
border-bottom: solid .1em;
display: -webkit-flex;
}
.leftMenu,
.rightMenu {
background-color: #454ed6;
height: 2em;
padding-top: 1em;
width: 17.5%;
-webkit-justify-content: space-around;
}
.leftMenu {
float: left;
}
.rightMenu {
float: right;
}
.centerMenu a {
display: block;
height: 2em;
}
.centerMenu {
width: 65%;
height: 6em;
background-color: #86acbe;
-webkit-flex-direction: column;
-webkit-justify-content: space-around;
}
The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space.
So the main container in your case is nav element; and you have to define display:flex property for nav element. And your navigation HTML structure is not in proper format.
Check the Demo and here is your modified CSS Code.
nav{display: -webkit-flex;
display: -webkit-box; /*for older safari version*/
display: flex;}
.leftMenu,
.rightMenu,
.centerMenu {
text-align: center;
border-bottom: solid .1em;
justify-content: space-around;
/*display: inline-block;
display: -webkit-flex;*/
}
.leftMenu,
.rightMenu {
background-color: #fbfbfb;
height: 2em;
padding-top: 1em;
width: 17.5%;
/*-webkit-justify-content: space-around;*/
}
/*.leftMenu {
float: left;
}
.rightMenu {
float: right;
}*/
.centerMenu a {
display: block;
height: 2em;
}
.centerMenu {
width: 65%;
height: 6em;
background-color: #86acbe;
/* -webkit-flex-direction: column;
-webkit-justify-content: space-around;*/
}
<header>
<div class="logo">
<h1>Guitar site</h1>
</div>
<nav>
<div class="rightMenu">
Home
</div>
<div class="rightMenu">
Beginner
</div>
<div class="rightMenu">
Advanced
</div>
<div class="rightMenu">
Tips
</div>
<div class="rightMenu">
Contact
</div>
</nav>
</header>
<h1> test</h1>