1. CSS ID vs Class

What?

• ID is a unique identifier for an HTML element.
• Class is a reusable identifier that can be assigned to multiple elements.

When to Use?

• Use ID when you want to style or manipulate one unique element on the page.
• Use Class when you want to style or select multiple elements with the same styles.

Why?

• IDs have higher specificity, so they override classes if both are applied to the same element.
• Classes promote reusable styles and avoid duplication.

Differences

Example

<div id="header">Header</div>
<div class="box">Box 1</div>
<div class="box">Box 2</div>

#header {
  background-color: blue;
  color: white;
}

.box {
  border: 1px solid gray;
  padding: 10px;
}

2. Main Axis vs Cross Axis (Flexbox)

What?

• In Flexbox, the main axis is the direction in which flex items are laid out (horizontal by default).
• The cross axis is perpendicular to the main axis.

When?

• When working with flex containers and wanting to align or distribute items.

Why?

• Understanding these axes is key to using Flexbox properties correctly like justify-content (main axis) and align-items (cross axis).

Differences

Example

.container {
  display: flex;
  flex-direction: row; /* main axis: horizontal */
  justify-content: center; /* aligns items along main axis */
  align-items: center; /* aligns items along cross axis */
}

3. Flexbox Properties: justify-content, align-items, align-content

When & What?

• justify-content: Aligns flex items along the main axis (horizontal if flex-direction: row).
• align-items: Aligns flex items along the cross axis (vertical if flex-direction: row).
• align-content: Aligns rows of flex items (if there are multiple lines, i.e., flex-wrap: wrap).

Common values for justify-content:

• flex-start (default) — items packed at the start
• center — items centered
• flex-end — items packed at the end
• space-between — equal space between items
• space-around — equal space around items

Common values for align-items:

• stretch (default) — items stretch to fill container
• center — items centered vertically
• flex-start — items aligned at top
• flex-end — items aligned at bottom

Example

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  align-content: flex-start;
}

4. justify-content: center vs text-align: center

What?

• justify-content: center is a Flexbox container property that centers flex items horizontally along the main axis.
• text-align: center is a text property that centers inline or inline-block content inside a block container.

When?

• Use justify-content: center when working with flex containers to center child elements.
• Use text-align: center to center text or inline elements inside a block.

Differences

Example

.flex-container {
  display: flex;
  justify-content: center;
}

.text-container {
  text-align: center;
}

Interview Questions & Answers

Q1. What is the difference between an ID and a class in CSS?
A: ID is unique and used for single elements; class can be reused for multiple elements.

Q2. What is the main axis and cross axis in Flexbox?
A: Main axis is the direction flex items are laid out (default horizontal), cross axis is perpendicular to it.

Q3. How does justify-content differ from align-items in Flexbox?
A: justify-content aligns items along the main axis; align-items aligns items along the cross axis.

Q4. When would you use text-align: center instead of justify-content: center?
A: Use text-align: center to center inline text inside block elements; use justify-content: center to center flex items in a flex container.

Q5. What happens if you apply both an ID and a class to the same element with conflicting styles?
A: The ID styles usually take precedence because of higher specificity.

Q6. Can align-content be used if flex items do not wrap?
A: No, align-content only affects multi-line flex containers when flex-wrap is enabled.

Q7. Give an example of a CSS selector using ID and class.

#header { color: blue; }
.menu-item { font-weight: bold; }

If you want, I can prepare separate blog posts or detailed notes for any of these topics too!