Get the Preplance app for a seamless learning experience. Practice offline, get daily streaks, and stay ahead with real-time interview updates.
Get it on
Google Play
4.9/5 Rating on Store
CSS · Question Set
Flex & Modern CSS interview questions for placements and exams.
Questions
12
Included in this set
Subject
CSS
Explore more sets
Difficulty
Mixed
Level of this set
Go through each question and its explanation. Use this set as a focused practice pack for CSS.
Flexbox (Flexible Box Layout) is a CSS layout model specialized for distributing space along a single axis (row or column). It allows flexible alignment, resizing, and ordering of items in that axis. :contentReference[oaicite:1]{index=1}
.container { display: flex; }For complete preparation, combine this set with full subject-wise practice for CSS. You can also explore other subjects and sets from the links below.
When you mark an element as `display: flex`, its **direct children** become flex items. Nested deeper descendants do not automatically become flex items unless their parent is also a flex container. :contentReference[oaicite:2]{index=2}
<div class="container" style="display:flex;"> <div>A</div> <div>B</div> </div>
In Flexbox, `justify-content` controls how items are distributed along the **main axis** (row or column). `align-items` (or `align-self`) control alignment along the **cross axis**. :contentReference[oaicite:3]{index=3}
.container { display:flex; justify-content: center; }Valid values for `flex-direction` include `row`, `row-reverse`, `column`, and `column-reverse`. `baseline` is not a valid direction. `baseline` is used in alignment contexts (like align-items) but not for direction. :contentReference[oaicite:4]{index=4}
.container { flex-direction: column-reverse; }`flex` is shorthand for `flex-grow`, `flex-shrink`, and `flex-basis`. Here it means the item can grow to fill space (1), will not shrink (0), and has initial basis 200px. :contentReference[oaicite:5]{index=5}
.box { flex: 1 0 200px; }Using `flex-wrap: wrap` on a flex container permits items to wrap onto next lines if they overflow the container width. The default is `nowrap`. :contentReference[oaicite:6]{index=6}
.container { display:flex; flex-wrap: wrap; }Flexbox simplifies alignment, distribution, and spacing along an axis without hacks. You can center items easily (vertically & horizontally), reorder without changing HTML, manage dynamic spacing, and handle different screen sizes more cleanly. It reduces reliance on floats, clears, and complex calculations. :contentReference[oaicite:8]{index=8}
.container { display: flex; justify-content: center; align-items: center; }`display: flex` makes the element a block-level flex container (takes full width, new line). `inline-flex` makes the container inline (flows within text) while still applying flex behavior to its children. So inline-flex does not break the line. :contentReference[oaicite:9]{index=9}
.menu { display: inline-flex; }The `order` property determines the visual order of a flex item relative to its siblings. Items with lower order values appear first. You can change layout order without altering HTML. The default `order` is 0. Negative or positive values shift placement. Example: `.item { order: -1; }` moves it to the front. :contentReference[oaicite:10]{index=10}
.item-1 { order: 2; } .item-2 { order: 1; }`align-content` controls how multiple rows (or columns) of flex items are spaced along the cross axis **only when the items wrap** and there is leftover space. It has no effect in a single line layout. :contentReference[oaicite:7]{index=7}
.container { flex-wrap: wrap; align-content: space-between; }You set the parent container as `display: flex`, then `justify-content: center` (horizontal centering on main axis) and `align-items: center` (vertical on cross axis). If the container is full height, this centers the child. Example: ```css .parent { display: flex; justify-content: center; align-items: center; height: 100vh; } .child { /* content */ } ```
.parent { display:flex; justify-content:center; align-items:center; height:100vh; }By default, flex items can shrink (`flex-shrink: 1`). To prevent shrinking, set `flex-shrink: 0` or use shorthand like `flex: 1 0 auto` or `flex: 0 0 auto` depending on desired behavior. You can also set a `min-width` to constrain shrinkage. Ensure you understand the combined effect of grow, shrink, and basis. :contentReference[oaicite:11]{index=11}
.item { flex-shrink: 0; }