Last updated on February 28, 2020
I focus on this writing blog post is how quickly we can build an application with JavaScript. The first thing we are lagging while building applications is with UI design and CSS layout.
In order to overcome this, I help developers who need the required pieces alone so they can focus only on building other elements.
Introduction
When starting to design the UI elements for layout, the easiest layout would be Flex-box out of many layout options. It is for One Dimensionallayout.
Before looking forward, whatever layout option we choose will always comprise of container and child elements. In terms of responsive, we should always set up the properties to the container element first.
When resizing the web page if we see some or the other child elements within the container, not auto-adjusting then we should set up flexbox settings to the child element.
Essential Key Terms
I list out down here the most essential things you need to know about Flex-box. The below properties will always assign to the container element.
display: ‘flex’
- display
- flex-direction
- justify-content
- align-items
- flex-basis
When the flexbox child items are not responding for resizing properly then will have to set the below properties on the required basis,
- align-self
- justify-items
The above said two properties will vary on the axis level based on flex-direction property we set either row or column.
// styles.css
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
The above screenshot was taken from one of the UI design work which I did.
When we want to center the element of the web page, this is the easiest way to go. How do you want to spread/position the elements within the container is the only thing you need to decide, Once decided then to set flex-directionCSS property would meet your needs.