Introduction CSS FlexBox

CSS3 introduced Flexible Boxes, or flexbox, to create page layouts for a dynamic UI. It is a layout mode that arranges elements in a predictable way for different screen sizes and browsers.

FlexBox container properties

Placing the CSS property display: flex; on an element allows you to use other flex properties to build a responsive page.

Adding a flex to an element turns it into a flex container. This makes it possible to align any children of that element into rows or columns. You do this by adding the flex-direction: property to the parent item and setting it to row or column. Creating a row will align the children horizontally, and creating a column will align the children vertically.

Values for this property are:

  • row
  • column
  • row-reverse
  • column-reverse

Sometimes the flex items within a flex container do not fill all the space in the container. It is common to want to tell CSS how to align and justify out the flex items a certain way. Fortunately, the justify-content and align-items propertes has several options to do this.

Values for this properties are as follows:

  • center | flex-start | flex-end | space-between | space-around
  • center | flex-start | flex-end | baseline

Using the flex-wrap property, it tells CSS to wrap items.

Values for this properties are as follows: nowrap| wrap| wrap-reverse

FlexBox child properties

The flex-shrink property. When it's used, it allows an item to shrink if the flex container is too small. The opposite is flex-grow property. The flex-basis property specifies the initial size of the item before CSS makes adjustments with shrinkor and grow. There is a shortcut available to set several flex properties at once. The flex-grow, flex-shrink, and flex-basis properties can all be set together by using the flex property. For example, flex: 1 0 10px; will set the item to flex-grow: 1; , flex-shrink: 0;, and flex-basis: 10px;. The order: property is used to tell CSS the order of how flex items appear in the flex container. By default, items will appear in the same order they come in the source HTML. The property takes numbers as values, and negative numbers can be used. The final property for flex items is align-self. This property allows you to adjust each item's alignment individually, instead of setting them all at once. The align-self accepts the same values as align-items and will override any value set by the align-items property.

Introduction CSS Grid

CSS Grid helps you easily build complex web designs. It works by turning an HTML element into a grid container with rows and columns for you to place children elements where you want within the grid.

Grid container properties

Turn any HTML element into a grid container by setting its display property to grid display: grid;. This gives you the ability to use all the other properties associated with CSS Grid.

To add some columns to the grid, use the grid-template-columns property on a grid container as demonstrated below: .container { display: grid; grid-template-columns: 50px 50px; } This will give your grid two columns that are 50px wide each. The number of parameters given to the grid-template-columnsproperty indicates the number of columns in the grid, and the value of each parameter indicates the width of each column.

The grid you created will set the number of rows automatically. To adjust the rows manually, use the grid-template-rows property in the same way you used grid-template-column.

Sometimes you want a gap in between the columns and rows. To add a gap between the columns, use the grid-column-gap. To add a gap between the rows, use the grid-row-gap. Shorthand property for grid-row-gap and grid-column-gap is grid-gap. If grid-gap has one value, it will a create a gap between all rows and columns. However, if there are two values, it will use the first one to set the gap between the rows and the second value for the columns.

To align and justify items in css grid use properties align-items: and justify-items. Thise properties may have values: start | center| end.

Grid child properties

To place child element within a CSS grid, use grid-column: property, and grid-row:property.

For example: grid-column: 1/5; grid-row: 1/5; will place an item in first 5 columns and first 5 rows.

The other properties for grid items is align-self. This property allows you to adjust each item's alignment individually, instead of setting them all at once. The justfy-self allows you to adjust item's justfication individually. The justfy-self and align-self accepts the same values start| center| end.