We Keep Coding

Flex only for two out of three elements

I have 3 seperate elements all in one container/wrapper.
I have flex applied so the image and Text are side by side. However i want the "Scroll Down" div to be placed underneath the other two elements while still using Flex.
Is there any flex property to somehow only apply Flex on the two first elements?
Image:
https://gyazo.com/a391508e26aff2486103579134c051e1
<section class="home-section">
<div class="home-wrapper">
<div class="home-column">
<div class="home-row">
<h1>Centuries Gaming</h1>
<h2>Roleplay on a different level</h2>
<p>From the aspirations and dreams of others, we stand tall, proud, and loyal
to our visions and project. We provide the best and most immersive...</p>
<div class="home-buttons">
<div class="home-button home-button-left">
Apply
</div>
<div class="home-button home-button-right">
Read More <i class="fas fa-arrow-right"></i>
</div>
</div>
</div>
<div class="home-row">
<div class="home-image">
<img src="images/home-image.png" alt="Vehicle Drifting">
</div>
</div>
</div>
</div>
<div class="home-scroll">
<button>
<span>Scroll Down</span>
<img src="icons/mouse.svg" alt="Mouse Scroll Icon">
</button>
</div>
</section>
/* Home Section */
.home-section {
height: 100vh;
display: flex;
align-items: center;
}
.home-column {
display: flex;
}
.home-row h1 {
font-size: 60px;
color: white;
font-weight: 700;
margin-bottom: 7x;
}
.home-row h2 {
font-weight: 500;
color: #ffffff80;
margin-bottom: 20px;
}
.home-row p {
color: #ffffff80;
font-size: 14px;
max-width:600px;
}
.home-row .home-buttons {
display: flex;
margin-top: 50px;
}

If you add flex-direction: column; to .home-section then the parent element will display its children vertically. And the scroll element will be below the order elements.

You can use flex-direction:column
.home-section {
height: 100vh;
display: flex;
align-items: center;
flex-direction: column;
}
The default is row, but you can change that property to stack the elements vertically. https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

Open modal on button click with date and time in a singl popup page? HTML and JavaScript

I was trying hard to open a modal on button click to display the calendar date and time also but nt getting anything. can any one share your knowledge.
i added the sample image how i want to display it.

Since you gave an image as an example I thought you wanted to create that exact look.
The following should work inside your modal.
const dateInput = document.getElementById('input-date');
const displayDate = document.getElementById('currentDate');
// init view
(() => {
let date = new Date().toISOString().slice(0, 10);
dateInput.value = date;
displayDate.innerText = date;
})();
.wrapper {
padding: 1rem;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
#time-picker {
padding: 1rem;
border: 1px solid #000;
-webkit-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
text-align: center
}
#header-row {
display: grid;
grid-template-columns: 2fr 1fr;
}
#data-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.bordered {
border: 1px solid #000;
margin: 1rem;
}
#time-picker .bordered > div {
margin: 0.5rem;
}
#time-picker > a {
width: 100%;
}
#currentDate {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
}
#button-row {
display: flex;
flex-flow: row nowrap;
justify-content: space-evenly;
align-items: center;
}
<div id="outer">
<div class="wrapper">
<label for="input-date">Need Date</label>
<input type="date" id="input-date">
</div>
<div id="time-picker">
<div id="header-row">
<div>Hours of Day</div>
<div>Minutes</div>
</div>
<div id="data-row">
<div class="bordered">
<div>00</div>
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
<div>07</div>
<div>08</div>
<div>09</div>
<div>10</div>
<div>11</div>
</div>
<div class="bordered">
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20</div>
<div>21</div>
<div>22</div>
<div>23</div>
</div>
<div class="bordered">
<div>00</div>
<div>05</div>
<div>10</div>
<div>15</div>
<div>20</div>
<div>25</div>
<div>30</div>
<div>35</div>
<div>40</div>
<div>45</div>
<div>50</div>
<div>55</div>
</div>
</div>
Clear Time
</div>
<h2 id="currentDate" class="row"></h2>
<div id="button-row">
<button>Cancel / Exit</button>
<button>Save / Exit</button>
</div>
</div>

I want the button above the box with the time

I want the buttons to be positioned above the box, but i don´t know how to do it, i tried many thigs but didn´t work
Something like this, idk how to put those button above
This is my HTML Code
<div id="clockdiv">
<div id="time">
<span class="minutes"></span>
:
<span class="seconds"></span>
</div>
</div>
<div>
<div>
<img src="imgs/stop.png" class="btnStop" id="btnStop"/>
</div>
<div>
<img src="imgs/play.png" class="btnPlay" type="button" id="btnPlay"/>
</div>
<div>
<img src="imgs/pause.png" class="btnPause" type="button" id="btnPause"/>
</div>
<div>
<img src="imgs/play.png" class="btnResume" type="button" id="btnResume"/>
</div>
</div>
</body>
</html>
This is my CSS
.btnStop {
width: 30%;
height: 30%;
display: none;
}
.btnResume {
width: 30%;
height: 30%;
}
.btnPlay {
width: 30%;
height: 30%;
}
.btnPause {
width: 30%;
height: 30%;
display: none;
}
Idk what to try, because im so useless with CSS

This is a perfect use-case for css grids
With the little info you have provided I can only help you so much but I am sure you can customize my solution for your needs
#container {
display: inline-grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, max-content);
align-items: center;
align-content: center;
justify-content: center;
}
#container > button {
width: 30px;
height: 30px;
}
#timer {
grid-column: 1 / span 4;
grid-row: 2;
text-align: center;
font-size: 30px;
}
<div id="container">
<button class="btnPlay">▶️</button>
<button class="btnPause">⏸️</button>
<button class="btnStop">⏹️</button>
<button class="btnResume">⏯️</button>
<div id="timer">30:00</div>
</div>

arrange element bottom to top using CSS

I am trying to arrange DOM elements display order bottom to top.But not able to find the way to do it. I am beginner in CSS. Please help me resolve this.It is a dynamic DOM generated by JS so can't change HTML.
e.g:
<div>
<img src='abc.jpg'>
<a href='google.com'>Google</a>
<p >It is google</p>
</div>
Expected Result:
<div>
<p >It is google</p>
<a href='google.com'>Google</a>
<img src='abc.jpg'>
</div>
or:
<div>
<a href='google.com'>Google</a>
<p >It is google</p>
<img src='abc.jpg'>
</div>

div {
display: flex;
flex-flow:wrap;
}
img{
order: 3;
flex-basis: 100%;
}
a {
order: 2;
flex-basis: 100%;
}
p {
order:1 ;
flex-basis: 100%;
}

Use flexbox:
http://jsbin.com/mesijerike
div {
width: 200px;
display: flex;
flex-direction: column-reverse;
}
img {
max-width: 100%
}

You can just put these flex box css in your parent div
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column-reverse;

Rendering a list of divs from left to right in a row, then rendering rows bottom to top (via CSS/jQuery)

I have a situation where I have a list of divs with a specific order that need to be rendered in quite a complex way. In simple terms, this is my HTML:
<div>
<div class="box">1 (first in list)</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9 (last in list)</div>
</div>
The way in which I want to display the divs is in rows of 4 from left to right, with each row stacked from bottom to top, like this:
9
5 6 7 8
1 2 3 4
I have created a fiddle of the result that shows what I'm after: http://jsfiddle.net/mpcjs/ - However, I would like a solution that doesn't require re-ordering of the divs in the HTML. Also note that the number of divs is variable.
Is this even possible? CSS3/jQuery solutions are welcome!

This is possible using the jQuery Plugin jQuery Masonry.
Replace this (starting at line 287)
var position = {
top: minimumY + this.offset.y
};
with
var position = (this.options.fromBottom) ? {
bottom: minimumY + this.offset.y
} : {
top: minimumY + this.offset.y
};
jsFiddle: http://jsfiddle.net/fnexE/

You should look into flexbox. Here's a fiddle demonstrating how it would work, with the caveat that I have only tested it in Chrome.
.flex{
width:400px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap-reverse;
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
-webkit-box-pack: start;
-moz-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;}

This is not a viable solution, yet, but with chrome and safari you can use writing-mode in CSS3. Check out the w3-dev section on vertical text.
.row {
writing-mode: bt-rl;
}
.box {
display: inline-block;
vertical-align: top;
}
http://jsfiddle.net/mpcjs/4/

I am unsure how to stack the DIVs from the bottom, but this will reverse them:
HTML:
<div>
<div>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
<div class='box'>4</div>
<div class='box'>5</div>
<div class='box'>6</div>
<div class='box'>7</div>
<div class='box'>8</div>
<div class='box'>9</div>
</div>
</div>
CSS:
.box{
float:left;
border:1px solid #000;
width:22%;
margin:1%;
}
jQUERY:
$('div > .box').each(function() {
$(this).prependTo(this.parentNode);
});

If you want a pure CSS solution, it would like that:
the basic HTML
<div class="container">HOVER ME!
<div class="inner">one</div>
<div class="inner">two</div>
<div class="inner">three</div>
<div class="inner">four</div>
<div class="inner">five</div>
<div class="inner">six</div>
<div class="inner">seven</div>
</div>
and we float the inner to the right:
.inner {
float: right;
width: 100px;
height: 100px;
background-color: lightsalmon;
margin: 5px;
font-size: 20px;
}
That's all !
Well, not all, you still need to hover
.container:hover,
.container:hover div {
-webkit-transform: rotate(180deg);
-webkit-transition: all 3s;
}
Well, that was only to make it a little fun, but the efect is nice, isn't it ?
test it