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>
Related
I'm having a situation where I'm having a page title on the left side and rating number and stars on the right side. I'm trying to align all items centered once flexbox wraps. Once "Longer Page Title" reaches rating and stars and flexbox wraps, they should all be center aligned.
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.title,
.ratings-and-stars {
border: 3px solid red;
}
.ratings-and-stars {
text-align: right;
}
<div class="flex-container">
<div class="title">Longer Page Title</div>
<div class="ratings-and-stars">
<div class="ratings">10</div>
<div class="stars">**********</div>
</div>
</div>
EDIT: I need to horizontally center content on mobile once flexbox wraps
The closest to your description i can think about is to play with margin & text-align and flex-grow for the title.
Below is an average demo.
However , you will need a mediaquerie set at a fixed breakpoint to decide when to wrap. See second snippet for a possible option
.flex-container {
display: flex;
flex-wrap: wrap;
}
.title {
flex: 1;
}
.title,
.ratings-and-stars {
border: 3px solid red;
margin: auto;
text-align:center;
text-align-last:left;
}
.ratings-and-stars {
text-align: right;
}
<div class="flex-container">
<div class="title">Longer Page Title ////////////////////long_string_for_demo\\\\\\\\\\\\\\\\\\\\\\\\ .</div>
<div class="ratings-and-stars">
<div class="ratings">10</div>
<div class="stars">**********</div>
</div>
</div>
Compromise with a mediaquerie (here set at 600px, use your own breakpoint)
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
text-align: center;
}
.title,
.ratings-and-stars {
border: 3px solid red;
}
.ratings-and-stars {
text-align: right;
}
#media (max-width:600px) {
.title {
min-width: 100%;
}
.flex-container {
justify-content: center;
}
}
<div class="flex-container">
<div class="title">Longer Page Title</div>
<div class="ratings-and-stars">
<div class="ratings">10</div>
<div class="stars">**********</div>
</div>
</div>
white-space is also a possibility for an average result:
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content:center;
}
.title {
white-space:prewrap;
margin:auto auto auto 0;
}
.title,
.ratings-and-stars {
border: 3px solid red;
text-align:center;
}
.ratings-and-stars {
text-align: right;
}
<div class="flex-container">
<div class="title">Longer Page Title //////////////////// long_string_for_demo \\\\\\\\\\\\\\\\\\\\\\\\ .</div>
<div class="ratings-and-stars">
<div class="ratings">10</div>
<div class="stars">**********</div>
</div>
</div>
You are missing align-items: center more info
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center
}
.title,
.ratings-and-stars {
border: 3px solid red;
}
.ratings-and-stars {
text-align: right;
}
<div class="flex-container">
<div class="title">Longer Page Title</div>
<div class="ratings-and-stars">
<div class="ratings">10</div>
<div class="stars">**********</div>
</div>
</div>
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.
I am using bootstrap, so in laptop and desktop div working fine like:
but in Ipad or mobile, it became like:
HTML code:
<div class="thumbnail_container">
<div class="col-sm-3">
<div class="thumbnail">
<div class="caption">
<h3>First Div Test</h3>
<p>
</p>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<div class="caption">
<h3>Second Div Test</h3>
<p>
</p>
</div>
</div>
</div>
</div>
Here is CSS code to manage div display:
.thumbnail_container .thumbnail
{
border-color: white;
color: black;
width: 100%;
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
border-color: lightseagreen;
}
.thumbnail_container
{
text-align: center;
margin-top: 30px;
}
.thumbnail span
{
left:0; right:0;
margin: auto;
}
.caption > p
{
color: black;
width: 100%;
margin-top: 0px;
text-align: justify;
}
How to make all div height same in any screen resolution?
change class="thumbnail_container" to class="thumbnail_container equal"
and then copy the following code and paste it
/*make thumbnail div height equal */
#media screen and (min-width: 768px)
{
.equal, .equal > div[class*='col-']
{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex:1 1 auto;
}
}
working fiddle
Just give display: flex; to .thumbnail_container and height: 100%; to .thumbnail will make equal height.
Working Fiddle
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>
AI want to put an image and its caption into one flex-item and have several such flex-items in one flex-container. I want the image to be above its caption. But what happens is that each caption is beside its image. How do I get them one above the other?
I tried putting the captions into another flex-container below the images. But when the screen size is less wide, the images stack, then the captions stack instead of being image, then its caption, image, then its caption.
<div class="flex-item-popup" id="popup">
<div class="close"><i class="fa fa-2x fa-times-circle"></i></div>
<h2></h2>
<div class='text'></div>
<div class="videos"></div>
<div class="flex-container images"></div>
<div class="flex-container captions"></div>
</div>
css:
#popup {
width: 90%;
height: auto;
padding: 20px;
border-radius: 10px;
background-color: black;
color: white;
}
#popup .close {
/*position: absolute;
right: 10px;
top: 10px;*/
float: right;
color: white;
opacity: 1;
}
#popup .close:hover {
opacity: .7 !important;
}
.images, .captions {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
align-items: flex-start;
}
.images {
margin-top: 20px;
}
.images .flex-item, .captions .flex-item {
display: flex;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 300px;
}
Look into <figure> and <figcaption> HTML5 tags. I am pretty certain that is going to help you and it is what you are looking for.
Here is updated fiddle link.
And the SO code snippet here...
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: flex-start;
align-items: center;
}
.flex-item {
/*width: 350px;
height: null;*/
flex-grow: 1;
flex-shrink: 0;
flex-basis: 200px;
justify-content: flex-start;
display: flex;
padding-left: 20px;
}
.flex-item img {
cursor: pointer;
}
<div class="flex-container images">
<div class="flex-item">
<figure>
<img src="http://newsinteractive.post-gazette.com/hbcu/morehouse/img/grads.jpg" />
<!--<div style="clear: both;"></div>-->
<figcaption>Our grads.</figcaption>
</figure>
</div>
<div class="flex-item">
<figure>
<img src="http://newsinteractive.post-gazette.com/hbcu/morehouse/img/building.jpg" />
<figcaption>A building</figcaption>
</figure>
</div>
<div class="flex-item">
<figure>
<img src="http://newsinteractive.post-gazette.com/hbcu/morehouse/img/campus.jpg" />
<figcaption>The campus.</figcaption>
</figure>
</div>
<div class="flex-item">
<figure>
<img src="http://newsinteractive.post-gazette.com/hbcu/morehouse/img/trio.jpg" />
<figcaption>Three people</figcaption>
</figure>
</div>
</div>
Hope this helps