FlexboxGeneralinfo

From rbachwiki
Revision as of 20:15, 9 February 2017 by Bacchas (talk | contribs)
Jump to navigation Jump to search

Using Flexbox

  1. define a parent element as a flex container
  2. All child elements become flex Items
  3. Flexbox properties can the control orientation, alignment, size and spacing of child flex items
  4. container are set to either row or column orientation
<section class="flex-container">
<div class="box">
<h3>one</h3>
</div>
<div class="box">
<h3>two</h3>
</div>
<div class="box">
<h3>three</h3>
</div>
<div class="box">
<h3>four</h3>
</div>
</section>

CSS

.flex-container{
margin: 1em 0;
	border: 1px solid #333;
  display: flex;
  flex-direction: row;
}