I have a Flexbox container with the following SCSS:
.picker {
height: 75px;
width: 100%;
display: flex;
flex-flow: column wrap;
}
My flex items have the following SCSS:
.pickeritem {
height: 25px;
width: 130px;
flex-shrink: 0;
display: flex;
align-items: center;
margin: 0 10px;
}
The problem I'm having is that the container is wrapping the items to the center of the div rather than next to the other items like so:
How do I make items 3 to 8 wrap next to each other leaving all of the white space to the right of the div?
Can this be achieved without using any sort of row and column methodology?
Try using the align-content property. I also made some other minor changes and added color and border for better visualization.
.picker {
height: 75px;
width: 300px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
border: 1px solid black;
}
.pickeritem {
height: 25px;
width: 50px;
flex-shrink: 0;
display: flex;
align-items: center;
margin: 0 10px;
background-color: #fbbdbd;
}
<div class='picker'>
<div class='pickeritem'>1</div>
<div class='pickeritem'>2</div>
<div class='pickeritem'>3</div>
<div class='pickeritem'>4</div>
<div class='pickeritem'>5</div>
<div class='pickeritem'>6</div>
<div class='pickeritem'>7</div>
<div class='pickeritem'>8</div>
<div class='pickeritem'>9</div>
<div>
You can use
.picker {
height: 75px;
width: 100%;
display: flex;
flex-direction: row;
justify-content:flex-start;
}
.pickeritem {
height: 25px;
flex-shrink: 0;
display: flex;
align-items: center;
margin: 0 10px;
}
Related
so I was making this layout and i can't get the header to be aligned properly
I want to move the button and heading to the red boxes
enter image description here
The code is as follows:
<div class="main">
<div class="header">
<h1 class="notes__title">Notes</h1>
<button class="notes__create">Create</button>
</div>
<div class="notes">
<div class="note">
<h3 class="note__title">Note Title</h3>
<div class="note__body">Text....</div>
</div>
</div>
and the CSS
.main {
display: flex;
width: 100%;
align-items: center;
flex-direction: column;
}
.header {
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
margin: 10px 0px;
}
.notes__title {
color: #fff;
}
.notes {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
please help
You're using space-around which is what causes the effect you are seeing.
Try:
.header {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
margin: 10px 0px;
}
.header {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
margin: 10px 0px;
max-width: 1200px;
}
ok so i did this and it worked
although I am not happy with the solution, i wanted to achieve it with flex box only#
.main {
max-width: 960px;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
min-height: 100vh;
}
.header {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
margin: 10px 0px;
}
The easiest solution I can think of is using bootstrap cols and use the space-between for Notes and Button to got to the right place
I have a simple web based text adventure which could be played using a screen reader. What I want is that when I navigate to the next page the content is read in DOM structure and then the focus is set to the button. So it should read the title, text and buttons. When I use the screen reader the focus then should be on the first button so that I don't have to navigate through the whole page to get to the button.
Is this possible?
Here is a really simple example of what I have:
* {
box-sizing: border-box;
}
html, body, tw-passage, aside, .container {
height: 100%;
}
a {
cursor: pointer;
text-decoration: underline;
}
body {
margin: 0;
}
div, p {
text-align: center;
}
.title {
font-size: 2em;
line-height: 1em;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
}
.container div:nth-of-type(2) {
display: flex;
flex-flow: row wrap;
overflow: scroll;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.contentImg {
max-height: 50vh;
max-width: 100%;
margin-bottom: 10px;
}
.content {
order: 2;
display: flex;
flex-direction: column;
}
.content a {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
background-color: #eee;
padding: 10px;
margin: 5px;
}
.content p {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
<main class="container">
<div id="title_Start" class="title">Title</div>
<div>
<span class="content">
<span id="content_Start" class="LANG">
Text...
</span>
<span class="choices">
<a>Link 1</a>
<a>Link 2</a>
</span>
</span>
<img class="contentImg" src="https://www.pngkey.com/png/detail/233-2332677_image-500580-placeholder-transparent.png"/>
</div>
</main>
I am trying to move my button on bottom (some pixel above bottom).so it always be in bottom whether it contend is less or large. I tried using flex-box also not able to do that.Container have min-height : 500px
here is my code
https://jsbin.com/joyalosate/edit?html,css,output
Expected output :: Explore products move bottom with some pixel above bottom .
.bottom__block {
position: absolute;
bottom: 20px;
padding: 0 40px;
/* display: flex;
flex-direction: column; */
border: 1px solid;
min-height:500px;
}
HTML
<div class="rh02w2">
<div class="bottom__block">
<button class="rh02-pcontent" data-lbl="panel2-home-apps-content-area">
<h1 class="rh02-ttl">Tetst <b>Applications</b></h1>
<div class="rh02-sub">Complete Suite of Apps</div>
<div class="rh02-leadin">
<p>Streamline your enterprise business process. With ERP Financials, Procurement, Project Portfolio Management and more, you can increase productivity, lower costs, and improve controls.</p>
</div>
</button>
<div class="rh02w4">
<div class="rh02-cta">
<div class="obttns">
<div>
<a data-lbl="panel2-home-apps-learn-more">Explore products</a>
</div>
</div>
</div>
</div>
</div>
</div>
css
.rh02w2 {
background-color: #325C72;
height: calc(100vh - 60px);
transform: translateY(60px);
left: 0;
min-width: 100%;
position: absolute;
margin-top: -60px;
color: #FBF9F8;
}
.bottom__block {
position: absolute;
bottom: 20px;
padding: 0 40px;
/* display: flex;
flex-direction: column; */
border: 1px solid;
min-height:500px;
}
.obttns {
width: 100%;
font-size: 1.4rem;
margin-bottom: -1.6rem;
display: -ms-flexbox;
display: flex;
flex-flow: row wrap;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-align: stretch;
align-items: stretch;
}
.obttns>div>* {
color: #161513 !important;
background: #fff;
}
.obttns a {
font-size: 1em;
font-weight: 500;
font-family: inherit;
line-height: 1.2;
padding: 10px;
border-radius: 4px;
cursor: pointer;
position: relative;
border: 0;
min-height: 30px;
height: 100%;
text-align: center;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
-ms-flex-wrap: wrap;
flex-flow: column wrap;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
}
}
Replace your CSS with this.
.rh02w2 {
background-color: #325c72;
height: calc(100vh - 60px);
transform: translateY(60px);
left: 0;
min-width: 100%;
position: absolute;
margin-top: -60px;
color: #fbf9f8;
}
.bottom__block {
position: absolute;
bottom: 20px;
padding: 0 40px;
/* display: flex;
flex-direction: column; */
border: 1px solid;
min-height: 500px;
}
.rh02w4 {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.obttns {
width: 100%;
font-size: 1.4rem;
}
.obttns > div > * {
color: #161513 !important;
background: #fff;
}
.obttns a {
font-size: 1em;
font-weight: 500;
font-family: inherit;
line-height: 1.2;
padding: 10px;
border-radius: 4px;
cursor: pointer;
position: relative;
border: 0;
min-height: 30px;
height: 100%;
text-align: center;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
-ms-flex-wrap: wrap;
flex-flow: column wrap;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
}
If you want to display your button about 10% above the bottom of the screen you can use the margin-top: 90%; in css. Here is the entire code alongside a button:
<button style="margin-top: 90%;">hi</button>
You can edit the 90% depending on how far down the button is on your screen. Since the code is also using the percentage instead of pixels, it will adjust depending on your screen size.
I've successfully coded a CSS/JS hamburger menu which has a transforming icon when clicked. However, I've just discovered a bug where, when the hamburger 'close' button is clicked, the nav menu cuts behind the header making it look messy.
Currently, the menu opens correctly when the hamburger is clicked - at 100vh - but when it closes, it appears that it cuts behind the header, so it looks like it's at about 80vh. When it's closing, I'm wanting it to remain at 100vh.
Apologies in advance for the lengthy code.
Here's my code:
// Variables
let line1 = document.getElementById("hamburger-line-1");
let line2 = document.getElementById("hamburger-line-2");
let hamburger = document.getElementById("hamburger");
let navList = document.getElementById("hamburger-nav-list");
// Function
function hamburgerActive() {
line1.classList.toggle("active");
line2.classList.toggle("active");
navList.classList.toggle("active");
}
// Event Listener
hamburger.addEventListener("click", hamburgerActive);
.universal-header-section {
height: auto;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.universal-header-container {
height: 90%;
width: 90%;
display: flex;
align-items: center;
justify-content: center;
margin: 20px auto;
}
.universal-header-hamburger {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: flex-start;
}
#hamburger {
height: 20px;
width: 40px;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
cursor: pointer;
z-index: 99;
}
.hamburger-span {
height: 5px;
width: 30px;
background-color: #342b38;
transition: all .2s ease-in-out;
cursor: pointer;
}
#hamburger-line-1.active {
transform: translateY(7.5px) rotate(-45deg);
}
#hamburger-line-2.active {
transform: translateY(-7.5px) rotate(45deg)
}
.universal-header-logo {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: center;
}
.universal-header-basket {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: flex-end;
}
#hamburger-nav-list {
height: 100vh;
width: 0;
top: 0;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
background-color: yellow;
transition: all 0.5s ease-in-out;
}
#hamburger-nav-list.active {
height: 100vh;
width: 30%;
position: fixed;
}
<header class="universal-header-section">
<div class="universal-header-container">
<div class="universal-header-hamburger">
<div id="hamburger">
<span id="hamburger-line-1" class="hamburger-span"></span>
<span id="hamburger-line-2" class="hamburger-span"></span>
</div>
</div>
<div class="universal-header-logo">
<a href="index">
<h2>Logo</h2>
</a>
</div>
<div class="universal-header-basket">
<a href="basket">
<i class="fas fa-shopping-cart fa-2x"></i>
</a>
</div>
</div>
</header>
<div id="hamburger-nav-list">
<div class="hamburger-container">
</div>
</div>
Thanks in advance.
Think this is easiest edit to make it work?
Changed the position: absolute / flex
Also the order of DOM elements changed around (most important)
Hope it didnt break anyting :)
// Variables
let line1 = document.getElementById("hamburger-line-1");
let line2 = document.getElementById("hamburger-line-2");
let hamburger = document.getElementById("hamburger");
let navList = document.getElementById("hamburger-nav-list");
// Function
function hamburgerActive() {
line1.classList.toggle("active");
line2.classList.toggle("active");
navList.classList.toggle("active");
}
// Event Listener
hamburger.addEventListener("click", hamburgerActive);
.universal-header-section {
height: auto;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.universal-header-container {
height: 90%;
width: 90%;
display: flex;
align-items: center;
justify-content: center;
margin: 20px auto;
}
.universal-header-hamburger {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: flex-start;
}
#hamburger {
height: 20px;
width: 40px;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
cursor: pointer;
z-index: 9999;
}
.hamburger-span {
height: 5px;
width: 30px;
background-color: #342b38;
transition: all .2s ease-in-out;
cursor: pointer;
}
#hamburger-line-1.active {
transform: translateY(7.5px) rotate(-45deg);
}
#hamburger-line-2.active {
transform: translateY(-7.5px) rotate(45deg)
}
.universal-header-logo {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: center;
}
.universal-header-basket {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: flex-end;
}
#hamburger-nav-list {
height: 100vh;
width: 0;
top: 0;
align-items: center;
justify-content: space-around;
flex-direction: column;
background-color: yellow;
transition: all 0.5s ease-in-out;
position:absolute;
}
#hamburger-nav-list.active {
height: 100vh;
width: 30%;
position: fixed;
z-index: ;
display:flex;
}
<div id="hamburger-nav-list">
<div class="hamburger-container">
</div>
</div>
<header class="universal-header-section">
<div class="universal-header-container">
<div class="universal-header-hamburger">
<div id="hamburger">
<span id="hamburger-line-1" class="hamburger-span"></span>
<span id="hamburger-line-2" class="hamburger-span"></span>
</div>
</div>
<div class="universal-header-logo">
<a href="index">
<h2>Logo</h2>
</a>
</div>
<div class="universal-header-basket">
<a href="basket">
<i class="fas fa-shopping-cart fa-2x"></i>
</a>
</div>
</div>
</header>
I am trying to divide a practice website into three sections of a column using flexbox. However, the middle section overflows out of the flexbox row, and the footer section is now hidden behind it.
https://jsbin.com/rerulepawu/edit?html,output
What causes this? I experimented with flex-grow and flex-shrink but it did not help.
Any advice would be appreciated. Thanks.
text in flexboxes usually overlap within the flex container to fix this you can set
.row {
flex: 1;
display: flex;
overflow:auto;
min-height: min-content;
}
and as a hack I set a non flex span inside a flex div, and set it's display to block
btw everything goes to crap when you delete it because Justify content dictates position within a flew box, if your whole site is one big flex box.
this is the full CSS that works for me displaying footer
body {
background-color: rgb(64, 160, 223);
font-family: 'Futura', sans-serif;
color: white;
}
.column {
display: flex;
height: 93%;
flex-direction: column;
}
.row {
flex: 1;
display: flex;
overflow:auto;
}
.block {
margin: auto;
}
.section_block {
margin: 20px;
height: 100px;
}
.section_left {
background-color: yellow;
width: 50%;
float: left;
height: 100%;
display: flex;
align-items: center;
justify-content: center
}
.section_right {
background-color: red;
width: 50%;
float: left;
height: 100%;
display: flex;
align-items: center;
justify-content: center
}
.section_title {
font-weight: bold;
}
.section_description {
text-align: center;
vertical-align: middle;
}
.section_photo {
margin: 0
}
.content {
border-radius: 15px;
background-color: white;
width: 80%;
color: black;
display: flex;
flex-direction: column;
}
/* why does everything go to shit when i delete this */
#contact {overflow:auto;
flex: 0;
justify-content: flex-end;}