Difference between revisions of "FlexboxGeneralinfo"
Jump to navigation
Jump to search
Line 6: | Line 6: | ||
* display: flex is done on the container, this allows all child items to be controlled with flex | * 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-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 | |||
<pre> | <pre> | ||
<section class="flex-container"> | <section class="flex-container"> |
Revision as of 20:44, 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
<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; }