HTML – Basic Float and Flexbox Page Layouts
There are many ways to do HTML layouts that are both semantic and able to accommodate varying screen sizes. For instance, for beginner’s the CSS Float and Flexbox layouts.
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.
CSS – flex-flow Property
The flex-flow property is a shorthand property for flex-direction and flex-wrap.
CSS – flex-grow Property
The flex-grow property specifies how much the item will grow relative to the rest of the flexible itemsinside the same container.
CSS – flex-shrink Property
The flex-shrink property specifies how the item will shrink relative to the rest of the flexible items inside the same container.
CSS – flex-wrap Property
The flex-wrap property specifies whether the flexible item should wrap or not.
CSS – justify-content Property
The justify-content property aligns the flexible container’s items when the items do not use all available space on the horizontal axis.
CSS – order Property
The order property specifies the order of a flexible item relative to the rest of the flexible items inside the same container.
CSS – List of Flex Properties
This is a quick reference list of CSS flex properties used to create flex templates and style them for a responsive design.