Difference between revisions of "FlexboxGeneralinfo"

From rbachwiki
Jump to navigation Jump to search
 
(4 intermediate revisions by the same user not shown)
Line 10: Line 10:
** second value is flex shrink
** second value is flex shrink
** third value is flex basis (starting size)
** third value is flex basis (starting size)
* align-self
** this is used to align an individual item.
*** example 3 divs with class of mydiv, center div with additional class of mydivA. if align-self: stretch is on mydivA it will affect only that div.
* align-content: will align all content
==[https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Complete guide to flexbox]==
==[http://smarchal.com/sass-flexbox/ Flex Mixin for SCSS]==
<pre>
<pre>
<section class="flex-container">
<section class="flex-container">

Latest revision as of 23:26, 9 February 2017

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
  • display: flex is done on the container, this allows all child items to be controlled with flex
  • flex-flow: row wrap; // this aligns content in a row. contents that are overflowing will wrap to the next row
  • flex: 1 1 100px;
    • first value is flex grow
    • second value is flex shrink
    • third value is flex basis (starting size)
  • align-self
    • this is used to align an individual item.
      • example 3 divs with class of mydiv, center div with additional class of mydivA. if align-self: stretch is on mydivA it will affect only that div.
  • align-content: will align all content

Complete guide to flexbox

Flex Mixin for SCSS

<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-flow: row wrap;
}