This content originally appeared on DEV Community and was authored by Vigneshwaralingam
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
| Feature | ID | Class |
|---|---|---|
| Uniqueness | Unique per page | Can be used on multiple elements |
| Selector syntax | #idName |
.className |
| Specificity | Higher | Lower |
| Usage | Single element styling | Group of elements |
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) andalign-items(cross axis).
Differences
| Property | Main Axis | Cross Axis |
|---|---|---|
| Direction | Defined by flex-direction
|
Perpendicular to main axis |
| Alignment props | justify-content |
align-items / align-content
|
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 ifflex-direction: row). -
align-items: Aligns flex items along the cross axis (vertical ifflex-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: centeris a Flexbox container property that centers flex items horizontally along the main axis. -
text-align: centeris a text property that centers inline or inline-block content inside a block container.
When?
- Use
justify-content: centerwhen working with flex containers to center child elements. - Use
text-align: centerto center text or inline elements inside a block.
Differences
| Feature | justify-content: center |
text-align: center |
|---|---|---|
| Applies To | Flex container’s children (flex items) | Inline or inline-block content inside a block element |
| Effect | Centers flex items along the main axis | Centers inline text or elements horizontally |
| Works With | Flexbox layout | Normal block layout |
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!
This content originally appeared on DEV Community and was authored by Vigneshwaralingam
Vigneshwaralingam | Sciencx (2025-06-11T17:32:01+00:00) CSS Blog: ID vs Class, Main Axis vs Cross Axis, Flexbox Properties, Justify Content vs Text Align Center —Interview Q&A. Retrieved from https://www.scien.cx/2025/06/11/css-blog-id-vs-class-main-axis-vs-cross-axis-flexbox-properties-justify-content-vs-text-align-center-interview-qa/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.