There’s a lot of options when it comes to designing your layout in CSS. From flexbox properties to positioning, here’s all you need to know about CSS layout to get your designs to look awesome.
Floats
Items in a web page can be floated left or right using CSS.
float: left
float: right
By default, floats make the parent container ignore floated items.
The floated items will not stay inside the parent container. This can be resolved using the following property for the parent element using CSS.
overflow: hidden
Floating elements may affect the elements coming after it that you don’t want to float. To stop the effect of floats on elements below the floats, use the following:
clear: left (clears the elements that set float left)
clear: right (clears the elements that float right)
clear: both (clears both left and right floats)
Flexbox
Flexbox can be used to position elements on a web page using CSS. To activate flexbox, you must begin by telling the parent element to display: flex using CSS. Once you tell the parent to flex, its children will flex inside it.
Parent Element {display: flex}
With flexbox, flex items will sit in either a row or a column. You can control these features using the flex-direction property and setting it to row or column. Each choice has several options.
flex-direction: row, row-reverse, column, and column reverse
You can also let items wrap around and move onto another line instead of fitting all in one row. Use the following property on the parent element. You can choose either wrap or wrap-reverse.
Parent Element {
display: flex;
flex-wrap: wrap, wrap-reverse;}
Using the flex-flow property allows you to create a shorthand that combines both the direction and the wrap properties as shown below:
flex-flow: row wrap;
To make all the flexed occupy the same amount of space, set the flex property on all the children of the flex container to 1. This is the default.
Child element { flex: 1;}
Putting different numbers on different children will change the ratio and will change how much space the child element is taking up compared to the other children. For example, child 2 will take up twice the amount of space as child one here.
child 1 {flex: 1;}
child 2 {flex: 2}
If you add flex-wrap: wrap to your parent element, and set the flex property on a child to 100%, this will set it to 100% of the width.
Parent {
display: flex;
flex-wrap: wrap;}
Child 1 { flex: 1 100%:}
Child 2 { flex: 1:}
Child 3 {flex: 1; }
You can also align flexbox content using the justify-content property on the parent element:
Parent {
display: flex;
justify-content: center, flex-start, flex-end, space-between, or space-around}
You can also align things vertically as well using the align-items property on the parent element.
align-items: center, flex-start, flex-end, stretch, and baseline
These properties are applied to all of the children of the parent. However, if you wish to target one child, you can apply the property align-self to the child element to override the parent.
Child { align-self: center, flex-start, flex-end, stretch, and baseline}
Alongside moving things around, you can also order flexed items differently using the order property.
Child 1 { order: 3;}
Child 2 { order: 2;}
Child 3 { order: 1;}
Positions
To position an element, you use the position property on the element you want to position. You can choose from 4 options: Static, Relative, Absolute, and Fixed. Static is being used by default.
Element { position: static, relative, absolute, or fixed;}
What does fixed mean? Fixing a position means you are positioning an element relative to the viewport. This won’t move and will stay there, even if you are scrolling through the page. This might have problems on mobile browers but can be handy if you want something to stay on the page at all times, regardless of where the person is located on the page.
Element: {position: fixed;}
What does relative mean? Positioning an element as relative moved the element from where it was originally displayed and leaves a space where it used to be. It can provide a point of reference for other positioned elements as well.
Element { position: relative;}
What does absolute mean? Positioning an element as absolute means that you are taking the positioned element out of the flow of the document entirely and that it is no longer associated wit the flow of the other elements. It positions relative to the nearest positioned ancestor as well.
Element { position: absolute;}
Using relative and absolute is possible and might be helpful depending on what you choose to do. By adding positioning to the parent, you change the reference point for the absolutely positioned element and make it position relative to the parent element inside of it being relative to the window.
Parent { position: relative;}
Child {
position: absolute;
top: 0;
right: 0; }
To move an element around on a webpage using positioning, you want to first establish the type of position on the element (static, relative, absolute, etc.). You can then add the following properties to move the element around on the page. You put in numbers to indicate how much you want it to move in a certain direction. Positive numbers move elements toward the center of a screen while negative numbers move it away from the center. Example:
Element {
position: relative;
top: -80px;
bottom: 40px;
left: 65px;
right: -30px;}
You can also place elements in front of or behind other elements using the z-index property. This controls the z axis which determines which element is in front. To move an element in front or behind another, insert a number into the property. Zero is the default, so putting -1 puts this element behind the other element it is on top of. Using positive numbers will place it in front.
Element {
position: absolute;
top: 0;
left: 0;
z-index: -1;}