I'm learning how to utilize flex and just started running into issues for after the flexbox is completed...
#initial {
display: flex;
flex: 1;
justify-content: space-evenly;
align-items: center;
width: 1200px;
margin-left: auto;
margin-right: auto;
border: 1px solid white;
}
#initial .menu {
display: flex;
flex: 1;
justify-content: space-evenly;
align-items: center;
margin: 15px auto 15px auto;
width: 1100px;
border: 1px solid rgba(245, 245, 245, 0.699);
border-radius: 50px;
line-height: 2rem;
font-size: 1.1rem;
overflow: hidden;
}
#initial .menu .menuItem {
display: flex;
flex: 1;
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
text-align: center;
flex-direction: column;
flex-wrap: wrap;
align-content: space-around;
justify-content: space-evenly;
}
#initial .menu .menuItem:hover {
background-color: #FDB000;
color: black;
cursor: pointer;
display: flex;
flex: 1;
text-align: center;
flex-direction: column;
flex-wrap: wrap;
align-content: space-around;
justify-content: space-evenly;
}
<div id="initial">
<div class="menu">
<div id="initialMenuHeader" class="menuItem" onclick="menuCollapsable(this)">Δ</div>
<div id="initialMenuHVQ" class="menuItem" onclick="initialHVQ()">Hivecoin</div>
<div id="initialMenuRVN" class="menuItem" onclick="initialRVN()">Ravencoin</div>
<div id="initialMenuAVN" class="menuItem" onclick="initialAVN()">Avian</div>
</div>
<div class="body">
<h1>NAME OF POOL GOES HERE</h1>
<p class="intro">¡Intro crap will go here!</p>
</div>
</div>
As it stands, my .menu looks like this. Please note that the image is uncensored and includes expletives
Everything I could find online suggests that when the flex-box is completed, it should go back to the normal flow (e.g. not floating).
Please let me know what I'm doing wrong and/or missing.
JSFiddle of my code (added some things that I didn't include above like body for background-color and color
Since you make #initial as flex, and by default flex-direction set to row your menu align with with your body. If your want menu & body in 2 lines add below css:
#initial{
flex-direction: column;
}
Related
How can make child-6 is stretch to half the height of parent?
avoiding the way of splitting 6 items into 2 groups.
I want to stretch child-6 but not working and this makes sense to me because to make a specific item stretch will be stretched the rest space, not half.
.parent {
width: 600px;
margin: 0 auto;
padding: 10px;
height: 300px;
background-color: #eee;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
align-content: space-between;
}
.parent div {
color: #eee;
background-color: rgb(29, 28, 27);
padding: 10px 0;
width: calc(94%/3);
display: flex;
justify-content: center;
}
.parent div.ch6 {
align-self: stretch;
}
<div class="parent">
<div class="ch1">1</div>
<div class="ch2">2</div>
<div class="ch3">3</div>
<div class="ch4">4</div>
<div class="ch5">5</div>
<div class="ch6">6</div>
</div>
Like below:
.parent {
width: 600px;
margin: 0 auto;
padding: 10px;
height: 300px;
background-color: #eee;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
/*align-content: space-between; removed */
}
.parent div {
color: #eee;
background-color: rgb(29, 28, 27);
padding: 10px 0;
width: calc(94%/3);
display: flex;
justify-content: center;
}
.parent div.ch6 {
align-self: stretch;
}
.parent div.ch5,
.parent div.ch4{
align-self: end; /* added */
}
<div class="parent">
<div class="ch1">1</div>
<div class="ch2">2</div>
<div class="ch3">3</div>
<div class="ch4">4</div>
<div class="ch5">5</div>
<div class="ch6">6</div>
</div>
I'm having an issue with flexbox not filling spaces as I intend, I'm trying to see what I've been missing but couldn't wrap my head around it.
Below is a reproduction of my issue with a link to a codepen.
I need the div in the middle with class="artcl-description" to fill the remaining available space, taking into consideration the header and the footer and their content, I tried giving the parent (class="artcl-content-container") properties align-items: stretch; justify-content: stretch; but no bueno, I don't want to resort to hard coded height values and percentages if that's possible :/
html:
<div class="artcl-container">
<div class="artcl-content-container">
<div class="artcl-title-container">
<h1>Some Title</h1>
</div>
<div class="artcl-description">
<p>Why is this not taking the remaining height?</p>
</div>
<div class="artcl-footer">
<div>Some guy</div>
<div>
X/X/XXXX XX:XX:XX
</div>
</div>
</div>
<img class="artcl-thumbnail" src="https://picsum.photos/200" />
</div>
scss:
$article-height: 240px;
$pad: 16px;
body {
padding: 16px;
}
* {
direction: ltr;
margin: 0px;
}
.artcl-container {
height: $article-height;
background-color: black;
color: white;
font-family: sans-serif;
border-radius: 4px;
overflow: hidden;
display: flex;
flex-direction: row;
.artcl-thumbnail {
height: $article-height;
width: $article-height;
object-fit: cover;
}
.artcl-content-container {
flex: 1;
flex-direction: column;
align-items: stretch;
justify-content: stretch;
.artcl-title-container {
padding: $pad;
border: dashed 1px wheat;
}
.artcl-description {
flex: 1;
padding: $pad;
border: dashed 1px wheat;
}
.artcl-footer {
padding: $pad;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border: dashed 1px wheat;
}
}
}
Link to Pen
You forgot to add display: flex; to your class .artcl-content-container. I added it to your pen and it just works fine.
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'm trying to tidy up my code and I have a menu that I would like to organise a little better.
Is there a way of aligning the menu at the start, end or or center while having the last item in the menu aligned to the end?
I've currently stripped out everything and kept the basics. If I remove margin-top: auto from the last div, all items are aligned in the center as stated in the .menu css.
If I keep margin-top: auto from the last div, the last div is aligned where I want it but the other items are aligned at the top and not where it's supposed to.
Here's my code:
HTML
<div class="header">
<div class="one">one</div>
<div class="two">two</div>
</div>
<div class="menu">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</div>
CSS
.header{
height:70px;
background: red;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
}
.header .one {
background: blue;
display: flex;
align-items: center;
padding: 0.5rem 1rem;
}
.header .two {
background: green;
display: flex;
align-items: center;
padding: 0.5rem 1rem;
}
.menu {
width:70px;
height: 100vh;
background: blue;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
}
.three {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
.menu div:last-of-type {
margin-top: auto;
}
Here it is in action: Fiddle
Add the following and this will work. You may want to add a padding to match your header, in this case 70px.
.menu {
padding-top: 70px;
}
.menu div {
margin-top: auto;
margin-bottom: auto;
}
.menu div:last-of-type {
margin-top: auto;
margin-bottom: 0;
}
I need a layout using flexbox, where 2 flex-items, item-1 should be aligned at top-center, while item-2 should be at bottom-center. I could not figure out how to do that.
See the below code:
.container{
padding:10px;
background: #fff;
border-radius:5px;
margin: 45px auto;
box-shadow: 0 1.5px 0 0 rgba(0,0,0,0,1.1);
}
.item{
color: #fff;
padding: 15px;
margin: 5px;
background: #3db5da;
border-radius: 3px;
}
.container{
display: flex;
min-height: 50vh;
justify-content: center;
align-items: center;
flex-direction: column;
}
.item{
/*margin: auto;*/
/*align-self: flex-start;*/
}
.item-4{
align-self: flex-start;
}
<div class="container">
<div class="item item-4">
Flex Item
<p>Vertical and horizontal align easy!</p>
</div>
<div class="item item-5"> bottom-center</div>
</div>
Here is fiddle link : https://jsfiddle.net/q5cw4xvy/
What you are looking for is justify-content: space-between; to align the items until the corners.
Add that to the .container and there you go.
.container{
/*justify-content: center;*/
justify-content: space-between;
}
On .item-4 you have align-self: flex-start; but you don't need that. just remove it.
https://jsfiddle.net/q5cw4xvy/2/
To better help you understand flexbox, there is a really nice css-tricks article.
Do you mean something like this?
https://jsfiddle.net/da4jdff7/1/
.container{
display: flex;
min-height: 50vh;
align-items: center;
flex-direction: column;
}
.item-5 {
margin-top: auto
}