Flexbox - HackMD

# Flexbox ### CSS solution your needs --- ## What is flexbox? A flexible way to build css layouts. The container element tells the browser how to render its layout. - no position - no floats - no MESS!!! --- ## Flexbox Example ```css= .class{ display: flex; } ``` --- ## Container Attributes CSS attributes for flex box that allow you to manipulate elements. ```htmlembedded=  ``` --- ## flex-direction Determines the direction of the content. ```css= .class{ display:flex; flex-direction: ? } ``` - ```row``` - ```column``` - ```row-reverse``` - ```column-reverse``` --- ## flex-wrap Determine how to sytle the content when it takes up more space than the containers width. ```css= .class{ display:flex; flex-wrap: ? } ``` - ```no-wrap``` *(default)* - ```wrap``` - ```wrap-reverse``` --- ## justify-content Determines how the elements in the container will line up veritcally along the outer margins on a specific container. ```css= .class{ display:flex; justify-content: ? } ``` - ```flex-start``` *(default)* - ```space-between``` - ```space-around``` - ```center``` - ```flex-end``` --- ## align-items Determined how elements are positioned against the cross axis. ```css= .class{ display:flex; align-items: ? } ``` - ```flex-start``` - ```flex-end``` - ```center``` - ```baseline``` --- ## Item Properties Ability to style the direct children of the flex container. --- ## Order Allows you to manually set the order of elements within the parent container. *Default value is 0* ```css= .childClass { order: 1 } ``` --- ## flex-grow & flex-shrink Property allows you to change the size of a flex item along the main axis. *Default value is 0* --- ## flex-basis Defines the size of the property befroe the space in the parent container is distributed. ```css= .childClass { flex-basis: /*value: %, px, em, rem, auto*/ } ``` --- ## align-self Allows you to overwrite an individual flex item's position regardless of ```align-items``` ```css= .childClass { align-self: /*value: %, px, em, rem, auto*/ } ``` - ```flex-start``` - ```flex-end``` - ```center``` - ```baseline``` --- # CSS Grid Create gird systems for user interface --- ## Syntax ```css= .class{ display: grid; } ``` #### *Notes: All children of this container will become grid elements* --- ## Components - Rows - Columns - Lines - Gutters --- ## Columns Columns are defined using ```grid-template-columns``` ```css= .class{ display: grid grid-template-columns: 100px 100px 100px 100px } ``` or ```css= .class{ display: grid grid-template-columns: repeat(6, 1fr); } ``` --- ## Rows Rows are defined using ```grid-template-rows``` ```css= .class{ display: grid grid-template-rows: 100px 100px 100px 100px } ``` or ```css= .class{ display: grid grid-template-rows: repeat(6, 1fr); } ``` --- ## Gutters Gutters give the cells space in between them ```css= .class{ display: grid grid-template-columns: repeat(4, 1fr); row-gap: 20px; column-gap: 40px; } ```