Difference between revisions of "FlexboxGeneralinfo"
Jump to navigation
Jump to search
| Line 4: | Line 4: | ||
# Flexbox properties can the control orientation, alignment, size and spacing of child 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 | # 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 | |||
<pre> | <pre> | ||
<section class="flex-container"> | <section class="flex-container"> | ||
| Line 26: | Line 28: | ||
border: 1px solid #333; | border: 1px solid #333; | ||
display: flex; | display: flex; | ||
flex- | flex-flow: row wrap; | ||
} | } | ||
</pre> | </pre> | ||
Revision as of 20: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
<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;
}