Flex Learning

flex.scss

display: flex; // Inside will be flex item
// With flex block with can

// Horizontal align content
// Use on flex object (display: flex), affect to child flex-item
justify-content: flex-start; // (flex-start, flex-end, space-around, space-between, center)

// Vertical align content
// Use on flex object (display: flex), affect to child flex-item
align-content: stretch; // (stretch, flex-start, flex-end, space-around, space-between, center)

// Define direction of content
// Usally be used with flex-wrap
// Use on flex object (display: flex), affect to child flex-item
flex-direction: row; // (row, row-reverse, column, column-reverse)

// Wrap content
// Use on flex object (display: flex), affect to child flex-item
flex-wrap: nowrap; // (nowrap, wrap, wrap-reverse)

// Combine flex-direction and flex-wrap
// Use on flex object (display: flex), affect to child flex-item
flex-flow: <flex-direction> <flex-wrap>;

// Align items in flex object
// Use on flex object (display: flex), affect to child flex-item
align-items: stretch; // (stretch, center, flex-start, flex-end, baseline)


// Align invidial item in flex object
// Use on flex item
align-self: stretch; // (stretch, center, flex-start, flex-end, baseline)

// Specify order of an flex item
// Use on flex item
order: 0; // integer number -1, 0, 1, 2, 3...