CSS – Using a Grid Layout for a Responsive Design
A CSS grid Layout offers a grid-based system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
CSS – Using Media Queries for a Responsive Design
CSS media queries not only look for the screen size to determine which styles to apply, but also look at the user’s device type and its capabilities.
CSS – Flexbox – Define a Flex Container
A Flexbox container allows for a responsive layout structure, giving you complete control over the direction, alignment, order, and size of the boxes.
CSS – Flexbox – Define the Flex Direction
The flex-direction property defines in which direction a flex container will stack the flex items within.
CSS – Flexbox – Define the Flex Wrap
The flex-wrap property specifies whether the flex items should wrap or not wrap within the flex container.
CSS – Flexbox – Define Content Justification
The justify-content property is used to align the flex items within the flex container.
CSS – Flexbox – Vertically Aligning the Content
The align-items property is used to vertically align the flex items within the flex container.
CSS – Flexbox – Vertically Aligning a Specified Flex Item
The align-self property defines the alignment for a specified item and overrides the default vertical alignment set by the container’s align-items property.
CSS – Flexbox – Vertically Align Wrapped Content
The align-content property is used to vertically align the wrapped flex lines of items within the flex container.
CSS – Flexbox – Centering Horizontally and Vertically
Using Flexbox, the justify-content property, and align-items property, an element can be centered both horizontally and vertically within it’s parent.
CSS – Flexbox – Specifying the Order of Items
The order property determines the order of a flex item. The first flex item to appear in the code does not have to appear as the first item in the layout.
CSS – Flexbox – Specify the Initial Length of Items
The flex-basis property specifies the initial length of a flex item.
CSS – Flexbox – Growing the Width of Items
The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items to fill their parent container.
CSS – Flexbox – Shrinking the Width of Items
The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items while filling their parent container.
CSS – align-content Property
The align-content property modifies the behavior of the flex-wrap property by aligning multiple flex lines along the vertical axis.
CSS – align-items Property
The align-items property specifies the vertical alignment for items inside the flex container. The following has three divs aligned centered on the horizontal axis.
CSS – align-self Property
The align-self property specifies the alignment for the specific item inside a flexible container.
CSS – flex Property
The flex property is a shorthand property for: flex-basis, flex-grow, and flex-shrink.
CSS – flex-direction Property
The flex-direction property specifies the direction of the flexible items.