Day 3 of My Java full Stack Learning:Flex

Flex Container

• It's a CSS layout to arrange and align items in a container
• To create a flexible container,set display:flex

Container{
display:flex;
}

This allows you to use flexbox properties to control the layout of child elements

Styling a List

ul{
display:flex;
gap:10px;
flex-direction:row;
justify-content:center;
}

Explanation

• gap:20px- To add a gap between flex items
• flex-directionproperty can be set to row or column to control the direction of flex items
• Additionally, align and justify properties can be used to control alignment,but only when display:flex is set

Section Styling

• section { border:1px solid } - adds a 1px solid line around a section
• border-width:10px - sets the border thickness to 10px
• border-radius:10px - curves the corners by 10px

Box Model

• *{ margin:auto;}- centers an element horizontally with equal outside space
• padding:10px - adds 10px inside space around content
• if no pixel is set,margin or padding applies to all four sides