Difference between revisions of "FlexboxGeneralinfo"
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
- define a parent element as a flex container
- All child elements become flex Items
- Flexbox properties can the control orientation, alignment, size and spacing of child flex items
- 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.
- this is used to align an individual item.
- 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; }