div flex


display:flex; flex-flow:row wrap; justify-content:space-around;

<div class="odsCodeWrap">
<div class="odsCodeDiv">
<pre class="odsCodePre"><xmp class="odsCodeXmp">
<style type="text/css">/*
NOT USED
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ], SHORTHAND 
flex-grow: <number>; /* default 0 *
flex-shrink: <number>; /* default 1 *
flex-basis: <length> | auto; /* default auto *

By default, flex items will all try to fit onto one line.
display: flex(block); /* or inline-flex *
flex-flow: <‘flex-direction’> || <‘flex-wrap’> Default is row nowrap, SHORTHAND 
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse; wrap: multi-line / left to right

order: <integer>;
justify-content: flex-start | flex-end | center | space-between | space-around; -- horizontal, main axis,
align-items: flex-start | flex-end | center | baseline | stretch; -- vertical, cross axis
align-content: flex-start | flex-end | center | space-between | space-around | stretch; -- vertical, cross axis
align-self: auto | flex-start | flex-end | center | baseline | stretch; see align-items, individual override

text-align: center;

*/
.container1 {display:flex; margin:auto; flex-flow:row wrap; border:2px solid red; padding:20px;
justify-content: space-around; align-items: center; align-content: space-around;}
.items1 {border:2px solid blue; width:100px; height:100px;}
.container2 {}
.items2 {}
.container3 {}
.items3 {}</style>
<div class="container1">
<div class="items1"></div>
<div class="items1"></div>
<div class="items1"></div>
<div class="items1"></div>
<div class="items1"></div>
<div class="items1"></div>
<div class="items1"></div>
</div>
<div><a href="ttp://flexbox.help/" target="_blank" rel="noopener">http://flexbox.help/</a><br /> <a href="http://www.w3schools.com/css/css3_flexbox.asp" target="_blank" rel="noopener">http://www.w3schools.com/css/css3_flexbox.asp</a><br /> <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank" rel="noopener">https://css-tricks.com/snippets/css/a-guide-to-flexbox/</a></div>
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
bSundry Technologies™ | Yorba Linda, CA 92886 | 1-657-859-1338 | This email address is being protected from spambots. You need JavaScript enabled to view it.
All Content Herein is Copyright © and Trademarked (TM). | All rights reserved.