FlexboxGeneralinfo
Jump to navigation
Jump to search
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
<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; }