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

Styles contradicts with my HTML Code

I have created one travel page via HTML and CSS and I have added button to add another trip in the same but after clicking on the button more than 5 times the form is getting out of region. It seems the issue is coming from styles but i am unable to figure out the same.
Click here to replicate the issue
<div class="form-row">
<button class="btn btn-primary" type="button" onclick="displayResult()">Add another trip</button>
</div>

Check your JSFiddle and found the issue.
You have to add following class in your css.
form .form-row{margin-left: 0;}

you have this in your css :
.form-row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -5px;
margin-left: -5px;
}
here margin-left: -5px makes the content moves to left every time the element is created then change margin-left: -5px' tomargin-left: 0px`.
After changing Css your css will look like this
.form-row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -5px;
margin-left: 0px;
}

It seems like the way you are adding the new form sections when clicked on the 'Add another trip' is wrong. The <div class="form-new" id="space"></div> element that you have placed to insert the new form section is inside the previous <div class="form-row"></div>. You should not place it there but just after it. Try to understand with this example.
This is what you have now.
<div class="form-row"></div>
<div class="form-row"></div>
<div class="form-row">
<div class="form-new" id="space"></div>
</div>
Try making it this way,
<div class="form-row"></div>
<div class="form-row"></div>
<div class="form-row"></div>
<div class="form-new" id="space"></div>

Aligning divs using the baselines of child divs in css

I can align two div's by simply setting their display to inline-block and using same line-heights like shown in the below:
However, what I want is that aligning two nested divs according to the baseline of the inner divs like this:
I can achieve this also using jquery by taking the longest heading's height and set all the headings' height to this value.
var fitSizes = function () {
var h = 0;
$('h1').each( function(){
if(h < $(this).outerHeight()) h = $(this).outerHeight();
// select biggest height
});
$('h1').each( function(){
$(this).outerHeight(h);
// set all h1 heights to the biggest height
});
};
fitSizes();
But for some reasons I don't want to use js or jquery. Is there any "CSS only" way to achieve something like that?

Any solution I can think of here seems hacky, as are usually problems of this nature. There is ALWAYS a scenario where they will break. A programmatic approach, however bloated and ugly, will definitely give you exactly what you want.
I'm going to make an assumption that both the header and the content are of varying lengths and there may be more than just 2 on page either on a single line or multiple.
TOP DOWN APPROACH // fixed header height
There's no reason why your approach above won't work for a nested div. I would wrap the h1 if you're applying styles to it though. Setting a line-height on a h1 if it breaks across lines will cause each line in the multiline to have that line height. Wrap the header in a div and give that a static height, that way if the has styles such as a background won't be affected by the "margin".
<style>
.wrapper {
height: 2.5rem;
line-height: 2.5rem;
text-align: bottom;
// flex approach works too
}
h1 {
line-height: 1rem;
}
</style>
...
<div class="container">
<div class="wrapper">
<h1>title</h1>
</div>
<div class="content">
<p>lorem ipsum....</p>
</div>
</div>
"BOTTOM UP" APPROACH // fixed content
This would work better if the "anchor" for these components is the bottom of the page. If your content varies in length you could fix the height of the container and content.
<style>
.container {
text-align: bottom;
}
h1 {
line-height: 1rem;
}
.content {
height: 15rem;
overflow: elipsis;
}
</style>
...
<div class="container">
<h1>title</h1>
<div class="content">
<p>lorem ipsum....</p>
</div>
</div>

You could do it with flexbox, you could set make the outer div's siblings by making a container around them and do something like this:
.container {
display: flex;
align-items: flex-end;
}
If this does not fulfill your needs you could also try and see if align-items: baseline; fixes it. Just have a look at flexbox.

What You are looking for using flexbox.
.root {
display: flex;
height: 300px;
border: 2px solid black;
}
.container {
display: flex;
/* position at bottom of container */
margin-top: auto;
/* spread inside container */
flex-grow: 1;
/* align items in row and center it verticaly */
flex-direction: row;
justify-content: center;
}
.column {
display: flex;
margin: auto 5px 5px;
padding: 20px;
/* spread inside container */
flex-grow: 1;
/* align items in column, and position content at the bottom */
flex-direction: column;
justify-content: flex-end;
border: 2px solid blue;
}
.row {
margin: 5px;
padding: 10px;
border: 1px solid red;
text-align: center;
}
<div class="root">
<div class="container">
<div class="column">
<span class="row">row one</span>
</div>
<div class="column">
<span class="row">row one</span>
<span class="row">row two</span>
</div>
</div>
</div>

Flexbox is something up and coming that would be really useful to use. It's only growing in popularity.
This can answer many different problems. Such as your justification issue.
Here's a simple fiddle with little code that shows the answer to your problem: https://jsfiddle.net/hkLk53c6/
HTML:
<div class="container">
<div class="flex-item">
Item
</div>
<div class="flex-item">
Item
<br>
Item
</div>
<div class="flex-item">
Item
<br>
Item
<br>
Item
</div>
</div>
CSS:
.container {
display:flex;
justify-content: space-between;
border: 1px solid #333;
}
.flex-item {
width: 33%;
text-align: center;
background: #120321;
color: #fff;
}
Here's a link to Chris Coyier's explanation about Flexbox Properties:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I've personally found it very useful in learning more about flexbox.
You can styled based off of the baseline, you can reverse elements, justify them to be the same height both vertically and horizontally. Etc. It's very exciting because now we can get past some hacky fixes. (Like using JS which trust me, you're not the only one to do so far!)

How to align text inside a circle dynamically?

I have a div with some random text.I have designed the div as a circle. I want to align the text inside the circle in the center. I can do this manually i mean for a static text i can do this. I want to know if there is any way to do this dynamically. I want to create the circle depending on the text size automatically and positioned the text in the center and aligned.
I have the code here :
<html>
<head>
<title>Test</title>
</head>
<body>
<section class="main">
<div id="greeting">
<p>Hi, This is the greeting part of my site.</p>
</div>
</section>
</body>
</html>
Thank you.

You can use
#greeting{
display: flex;
justify-content: center;
align-items: center;
}
How it works:
justify-content defines where flex items will align according to the main axis (horizontally in our case)
align-items does the same with the axis perpendicular to the main one (vertically in our case).
It works for any element, and it's probably the easiest and shortest way to center something horizontally and vertically

I have solved the problem after doing a lot of searching. I got my one and only clue from here :
Then I have tried a lot of time and finally I have done it. Here is the javascript code:
<script type="text/javascript">
var gr = $('#gr').width();
var grt = $('#greeting').width();
//alert(grt/2.5 >=gr);
if((grt/2.5)>=gr)
{
$('#gr').css({'height':gr+'px'});
}
else{
$('#greeting').css({'width':gr*2.5+'px'});
$('#greeting').css({'height':gr*2.5+'px'});
}
</script>
Here is the HTML code:
<div id="greeting">
<p id="gr">
Hi there this is my greeting part.
</p>
</div>
finally here is the CSS part:
#greeting{
color: #F8F8F8;
margin:5px;
width:0px;
border-radius: 50%;
background-color: #F99793;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
#gr{
isplay: flex;
justify-content: center;
align-items: center;
word-wrap:break-word;
}
You can check this out in here.

Easy - use transform. This is CSS3 and remember to prefix the transform property (-webkit-, etc).
Fiddle for you
#greeting{
position: relative;
height:450px;
width:450px;
border-radius: 50%;
background-color: #779EC6;
text-align: center;
}
p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%);
}

HTML:
<section class="main">
<div id="greeting">
<p>Hi, This is the greeting part of my site.</p>
</div>
</section>
CSS:
section.main{
display: table;
border: 2px solid #999;
height: 200px;
width: 200px;
background-color: #ccc;
border-radius: 50%;
padding: 7rem;
}
section.main > #greeting{
display: table-cell;
text-align: center;
vertical-align: middle
}
FIDDLE: http://jsfiddle.net/y3699smx/

Set section with class main to display:table; and give display: table-cell; and vertical-align: middle; style to #greeting. If text size will increase in this code, alignment will get adjust accordingly.
See Working example http://jsfiddle.net/guruWork/oc9mrz38/

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