I'm trying to create a header using flexbox that features 3 divs: left = navigation, center = logo, right = social icons/links. The problem I am running into is that each div in my header is not even, so the logo is not directly centered directly in the header.
I thought if I set the flex-grow property to 1, then each section would have the same width.
Here's my code:
<html>
<head>
<style>
*, *:before, *:after {
box-sizing:border-box;
}
body {margin: 0}
.header {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
position: relative;
width: 100%;
padding:25px 20px;
background-color:#f0f0f0;
}
.header__left {
flex-grow:1;
-webkit-align-items: flex-start;
align-items: flex-start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
text-align: left;
}
.header__center {
flex-grow:1;
-webkit-align-items: center;
align-items:center;
-webkit-justify-content: center;
justify-content: center;
text-align: center;
}
.header__right {
flex-grow:1;
-webkit-align-items: flex-end;
align-items: flex-end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
text-align: right;
}
</style>
</head>
<body>
<header class="header">
<div class="header__left">
<nav class="header__navigation">
Menu
</nav>
</div>
<div class="header__center">
<div class="header__logo">Flexbox</div>
</div>
<div class="header__right">
<div class="header__social">
Facebook
Twitter
</div>
</div>
</header>
</body>
</html>
Use flex:1; instead of flex-grow:1;
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
margin: 0
}
.header {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
position: relative;
width: 100%;
padding: 25px 20px;
background-color: #f0f0f0;
}
[class*="header__"] {
border: 1px solid green;
}
.header__left {
flex: 1;
-webkit-align-items: flex-start;
align-items: flex-start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
text-align: left;
}
.header__center {
flex: 1;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
text-align: center;
}
.header__right {
flex: 1;
-webkit-align-items: flex-end;
align-items: flex-end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
text-align: right;
}
<header class="header">
<div class="header__left">
<nav class="header__navigation">
Menu
</nav>
</div>
<div class="header__center">
<div class="header__logo">Flexbox</div>
</div>
<div class="header__right">
<div class="header__social">
Facebook
Twitter
</div>
</div>
</header>
Related
I have divs that contain each individual arrow (one for the greater than text and another for the less than text). However, when I hover over the less than arrow, it pushes all the other elements to the right a bit. How can I have the hover effect not push any other elements away?
This is my HTML:
<div className="datepicker-wrapper">
<div className="dates">
<div className="arrows prev-month"><</div>
<div className="months">
<div className="start-month">February</div>
<div className="end-month">March</div>
</div>
<div className="days"></div>
<div className="arrows next-month">></div>
</div>
<div className="selected-dates">
<div className="check-in-date">02/13/2020</div>
</div>
</div>
And this is my CSS:
#import 'variables.css';
.datepicker-wrapper {
position: relative;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: flex-start;
width: 100%;
height: 50px;
background: transparent;
}
.datepicker-wrapper .dates {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
width: 60%;
height: 100%;
}
.datepicker-wrapper .selected-dates {
display: flex;
flex-direction: column;
cursor: default;
width: 40%;
height: 100%;
}
.datepicker-wrapper .dates .arrows .previous-month {
}
.datepicker-wrapper .dates .arrows:hover {
width: 15px;
height: 15px;
background: var(--light-gray);
border-radius: 50%;
cursor: pointer;
}
.datepicker-wrapper .dates .months {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
NOTE
I've tried giving the arrows prev-month div a set width, but that doesn't seem to have any effect.
You give the width and height only on hover.. try to give the styles to the arrows anyway, and on hover only change the background-color
.datepicker-wrapper {
position: relative;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: flex-start;
width: 100%;
height: 50px;
background: transparent;
}
.datepicker-wrapper .dates {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
width: 60%;
height: 100%;
}
.datepicker-wrapper .selected-dates {
display: flex;
flex-direction: column;
cursor: default;
width: 40%;
height: 100%;
}
.datepicker-wrapper .dates .arrows {
width: 15px;
height: 15px;
border-radius: 50%;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.datepicker-wrapper .dates .arrows:hover {
background: #c1c1c1;
}
.datepicker-wrapper .dates .months {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
<div class="datepicker-wrapper">
<div class="dates">
<div class="arrows prev-month"><</div>
<div class="months">
<div class="start-month">February</div>
<div class="end-month">March</div>
</div>
<div class="days"></div>
<div class="arrows next-month">></div>
</div>
<div class="selected-dates">
<div class="check-in-date">02/13/2020</div>
</div>
</div>
Setting the styles on :hover impacts the CSS box model for the .arrows element:
All four of those impact the overall space an element takes.
I would like for my header to change when viewed on mobile. On the big screen is shows the logo with the text beside it. On mobile I would like for the text to go below the logo and maybe even just 1 line with a bullet between. Right now when I view on mobile, the logo and text resize, but the text gets too big and falls off the screen.
Here is a link to the site:
jeepscycleclub.x10host.com
Here is my css for the #pageheader:
#pageheader {
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
position: relative;
text-align: center;
overflow: hidden;
background-color: #2f2f37;
max-height: 15vh;
}
#pageheader img {
max-height:15vmax;
}
and my html:
<div id="pageheader">
<img src="images/pageheader.gif">
<header>
<h2 style="font-size: 3vh;">Club Info: 316-755-0909</h2>
<h2 style="font-size: 3vh;">FM 100.9 for Race PA System</h2>
</header>
</div>
This is just my test site so I can get everything done before going live with it.
Thank you in advance.
Add flex-wrap: wrap; for this. And you have to change the width/max-width, otherwise there won't be space for the text when it goes under the logo.
#pageheader {
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
position: relative;
text-align: center;
overflow: hidden;
background-color: #2f2f37;
flex-wrap: wrap;
}
#pageheader img {
max-height:15vmax;
}
<div id="pageheader">
<img src="http://placehold.it/150x80/a0f">
<header>
<h2 style="font-size: 3vh;">Club Info: 316-755-0909</h2>
<h2 style="font-size: 3vh;">FM 100.9 for Race PA System</h2>
</header>
</div>
I am using flex for making a searchbar/input element stay centered and change width as the screen size changes.
This is my html:
<div class="flex-container">
<div class="flex-row">
<h1 class="brandname">Hello</h1>
</div>
<div class="flex-row">
<form>
<!-- <div class="search centered"> -->
<div class="search">
<div class="input-container">
<input type="text" name="query" class="searchbar" />
<button type="submit" class="search-button">Search</button>
</div>
</div>
</form>
</div>
</div>
and this is my css:
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.flex-container{
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
-webkit-flex-direction: row;
flex-direction: row;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
.flex-row {
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
flex: 1;
-webkit-flex: 1;
}
form{
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
flex: 1;
-webkit-flex: 1;
}
.search{
display: flex;
display: -webkit-flex;
flex: 0 1 455px;
-webkit-flex: 0 1 455px;
}
.input-container{
display: flex;
display: -webkit-flex;
flex: 1;
-webkit-flex: 1;
min-width: 0;
}
.searchbar{
flex: 1;
-webkit-flex: 1;
min-width: 0;
}
.flex-container > .flex-row:first-child{
flex: 0 1 100%;
-webkit-flex: 0 1 100%;
}
.brandname {
position: relative;
font-size: 500%;
font-family: 'Lato', sans-serif;
color: #1f0e3e;
text-align: center;
margin-bottom: 30px;
margin-top: 5%;
}
body {
margin: 10px;
}
.input-container{
/*float: left;*/
/*display: block;*/
flex: 1;
-webkit-flex: 1;
outline-style: solid;
outline-color: #e3e3e3;
outline-width: 1px;
}
.searchbar{
margin-left: 5px;
}
.search button {
background-color: rgba(152,111,165,0.38);
background-repeat:no-repeat;
border: none;
cursor:pointer;
border-radius: 0px;
/*overflow: hidden;*/
outline-width: 1px;
outline-style: solid;
outline-color: #e3e3e3;
color: white;
}
.search input{
outline-width: 0px;
outline-style: none;
border-width: 0px;
}
and it works in chrome, ie edge and in this fiddle, but not in safari.
In Safari the searchbar goes above the .brandname element and to the right of it and takes a width of 150px.
any ideas on how to make this work in safari?
One thing that is not working is the the first flex row width of 100% is not working. In safari it is making the two felx-row elements be right next to each other and both of them together are taking 100% of the width.
I changed .flex-row css rules to:
.flex-row {
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
flex: 1;
-webkit-flex: 0 1 100%;
}
and changed the flex-row first child css rules to:
.flex-container > .flex-row:first-child{
flex: 0 1 100%;
-webkit-flex: 0 1 auto;
}
and then it works.
I thought about doing this after reading that flex-wrap is buggy in safari from this SO question which suggests that setting flex-wrap in safari is buggy
Always use the non-prefixed setting last in your CSS rules. In your first rule that would be:
.flex-container{
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
similar for all other rules.
I've asked a similar question and tried to modify it's answer for this but I'm not sure what to do.
I have a div of unknown dimensions and I need to place an img, span, or div in one of 9 positions within it.
top left
top middle
top right
center left
center middle
center right
bottom left
bottom middle
bottom right
The question from above works for images but not with anything of unknown dimensions.
I've tried various combinations but cannot figure it out. http://jsfiddle.net/g7hydky2/3/ is what I'm working with.
The only thing I can think of is using display: table and display: table-cell on the outer and inner elements because then I can fully use vertical-align and text-align. However, this seems like a bad hack and I feel like there has to be a better way.
Also, I need this to work on IE 8...
Solved with flexbox,
Acknowledging this article - Getting Dicey with Flexbox
.pip {
width: 10px;
height: 10px;
border-radius: 50%;
background: black;
}
.one {
justify-content: flex-start;
align-items: flex-start;
}
.two {
justify-content: center;
align-items: flex-start;
}
.three {
justify-content: flex-end;
align-items: flex-start;
}
.four {
justify-content: flex-start;
align-items: center;
}
.five {
justify-content: center;
align-items: center;
}
.six {
justify-content: flex-end;
align-items: center;
}
.seven {
justify-content: flex-start;
align-items: flex-end;
}
.eight {
justify-content: center;
align-items: flex-end;
}
.nine {
justify-content: flex-end;
align-items: flex-end;
}
body {
text-align: center;
}
.dice {
width: 50px;
height: 50px;
padding: 5px;
border: 1px solid grey;
border-radius: 15px;
display: inline-flex;
vertical-align: top;
margin: 10px;
}
.pip {
width: 10px;
height: 10px;
border-radius: 50%;
background: black;
}
.one {
justify-content: flex-start;
align-items: flex-start;
}
.two {
justify-content: center;
align-items: flex-start;
}
.three {
justify-content: flex-end;
align-items: flex-start;
}
.four {
justify-content: flex-start;
align-items: center;
}
.five {
justify-content: center;
align-items: center;
}
.six {
justify-content: flex-end;
align-items: center;
}
.seven {
justify-content: flex-start;
align-items: flex-end;
}
.eight {
justify-content: center;
align-items: flex-end;
}
.nine {
justify-content: flex-end;
align-items: flex-end;
}
<div class="dice one">
<div class="pip"></div>
</div>
<div class="dice two">
<div class="pip"></div>
</div>
<div class="dice three">
<div class="pip"></div>
</div>
<div class="dice four">
<div class="pip"></div>
</div>
<div class="dice five">
<div class="pip"></div>
</div>
<div class="dice six">
<div class="pip"></div>
</div>
<div class="dice seven">
<div class="pip"></div>
</div>
<div class="dice eight">
<div class="pip"></div>
</div>
<div class="dice nine">
<div class="pip"></div>
</div>
For absolute certainty {pun intended} and older browswer support use positioning: Codepen Demo
I have started on this fiddle using CSS:
.cont {
border:1px solid #F36F25;
}
.ticketnumber {
display:inline-block;
}
.status {
display:inline-block;
}
.summary {
display:inline-block;
float:left;
}
.last_updated {
display:inline-block;
float:right;
}
.box {
}
http://jsfiddle.net/3qbn222u/
i want to create something that looks like this image:
how can i achieve this in the easiest way?
//HTML BLOCK
<div class="cont">
<div class="header_box">
<div class="ticket_box">
<div class="ticketnumber">ID#0000001234</div>
<div class="summary">Subject: Grumpy Cat</div>
<div class="summary">Summary: blaahh</div>
</div>
<div class="summary_box">
<div class="last_updated">10 minutes ago</div>
<div class="status"></div>
</div>
</div>
<div class="wrapper_box">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
//CSS BLOCK
.cont {
display: flex;
display: -webkit-flex;
height: 200px;
border-radius: 5px;
flex-direction: column;
-webkit-flex-direction: column;
border: 1px solid #dddddd;
box-shadow: 0 1px 5px rgba(0,0,0,.6);
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,.6);
}
.header_box{
display: flex;
display: -webkit-flex;
flex: 1;
-webkit-flex: 1;
font-size: 12px;
}
.wrapper_box{
display: flex;
display: -webkit-flex;
flex: 2;
-webkit-flex: 2;
}
.ticket_box{
display: flex;
display: -webkit-flex;
flex: 6;
-webkit-flex: 6;
flex-direction: column;
-webkit-flex-direction: column;
justify-content: center;
-webkit-justify-content: center;
align-items: flex-start;
-webkit-align-items: flex-start;
margin: 10px 10px;
}
.summary_box{
display: flex;
display: -webkit-flex;
flex: 4;
-webkit-flex: 4;
flex-direction: column;
-webkit-flex-direction: column;
justify-content: center;
-webkit-justify-content: center;
align-items: flex-end;
-webkit-align-items: flex-end;
margin: 10px 10px;
}
.ticketnumber {
display: flex;
display: -webkit-flex;
}
.summary {
display: flex;
display: -webkit-flex;
}
.last_updated {
display: flex;
display: -webkit-flex;
}
.status {
display: flex;
display: -webkit-flex;
height: 15px;
width: 15px;
margin: 10px 0px;
border-radius: 50%;
background: red;
}
.box {
display: flex;
display: -webkit-flex;
flex: 1;
-webkit-flex: 1;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
border: 10px solid #f3f3f3;
margin: 5px 5px;
background: #ccc;
background: url(http://www.freeallimages.com/wp-content/uploads/2014/09/grumpy-cat-no-1.jpg) no-repeat;
background-size: cover;
-webkit-background-size: cover;
background-position: center;
-webkit-background-position: center;
color: #fff;
}
Agreed using FlexBox would be the easiest way.
Here is a good reference guide to FlexBox:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes