<!doctype html>
<html>
<head>
<title>CSS3 Flex Tests - RJM Programming - November, 2017 - https://www.w3schools.com/css/css3_flexbox.asp</title>
<style>
select {
display: inline-block;
}
div {
background-color:yellow;
padding: 8px 8px 8px 8px;
margin: 2px 2px 2px 2px;
}
.flex-container-row {
display: flex;
flex-direction: row;
background-color: lightblue;
}
.flex-container-column {
display: flex;
flex-direction: column;
background-color: lightblue;
}
.flex-container-row-reverse {
display: flex;
flex-direction: row-reverse;
background-color: lightblue;
}
.flex-container-column-reverse {
display: flex;
flex-direction: column-reverse;
background-color: lightblue;
}
</style>
<script type='text/javascript'>
var htype='div';
var fld='row';
var planets=['Mercury','Venus','Earth','Mars','Jupiter','Saturn','Uranus','Neptune','Pluto'];
var months=['January','February','March','April','June','July','August','September','October','November','December'];
var days=['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
var numbers=['0','1','2','3','4','5','6','7','8','9'];
var letters=['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
var colours=['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
var gases=['Hydrogen (H)','Helium (He)','Nitrogen (N)','Oxygen (O)','Fluorine (F)','Neon (Ne)','Chlorine (Cl)','Argon (Ar)','Krypton (Kr)','Xenon (Xe)','Radon (Rn)'];
var continents=['Africa','Antarctica','Asia','Australia','Europe','North America','South America'];
var oceans=['Arctic','Antarctic','Atlantic','Indian','Pacific'];
var longest_rivers=['Nile (4,180)','Amazon (3,912)','Mississippi (3,710)','Yangtze (3,602)','Ob (3,459)','Yellow (2,900)','Yenisei (2,800)','Parana (2,795)','Irtish (2,758)','Congo (2,716)'];
function redraw(tv,md) {
var myarr=[], jj, ih='';
var divs=document.getElementsByTagName(htype);
if (divs.length > 0) {
if (md == 0) {
fld=tv;
divs[0].className='flex-container-' + tv;
} else if (md == 1) {
eval("myarr=" + tv.replace(' ','_') + ";");
for (jj=0; jj<myarr.length; jj++) {
if (tv == "colours") {
ih+='<div style=background-color:' + myarr[jj] + ';>' + myarr[jj] + '</div>';
} else {
ih+='<div>' + myarr[jj] + '</div>';
}
}
divs[0].innerHTML=ih;
}
}
}
</script>
</head>
<body>
<h1>CSS3 Flex Tests</h1>
<h3>RJM Programming - November, 2017</h3>
<h4>Thanks to <a target=_blank title='https://www.w3schools.com/css/css3_flexbox.asp' href='https://www.w3schools.com/css/css3_flexbox.asp'>https://www.w3schools.com/css/css3_flexbox.asp</a></h4>
<br>
<select onchange='redraw(this.value,1);'><option value='letters'>Content [letters]</option><option value='numbers'>numbers</option><option value='days'>days</option><option value='months'>months</option><option value='planets'>planets</option><option value='colours'>colours</option><option value='gases'>gases</option><option value='continents'>continents</option><option value='oceans'>oceans</option><option value='longest_rivers'>longest rivers</option></select> <select onchange='redraw(this.value,0);'><option value='row'>Flex-direction [row]</option><option value='column'>column</option><option value='column-reverse'>column-reverse</option><option value='row'>row</option><option value='row-reverse'>row-reverse</option></select>
<br>
<div class="flex-container-row">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
<div>H</div>
<div>I</div>
<div>J</div>
<div>K</div>
<div>L</div>
<div>M</div>
<div>N</div>
<div>O</div>
<div>P</div>
<div>Q</div>
<div>R</div>
<div>S</div>
<div>T</div>
<div>U</div>
<div>V</div>
<div>W</div>
<div>X</div>
<div>Y</div>
<div>Z</div>
</div>
</body>
</html>