Front-end-development-quiz issue

[codomposer]

I'm submitting an ISSUE: please check one with "x"

• New question{'s}
• New assessment
• Missed questions/answers
• Request for new quiz/answers/...
• Documentation issue or request for ...
• ...

Wrong answers in Front-end Development quiz:
https://github.com/Ebazhanov/linkedin-skill-assessments-quizzes/blob/main/front-end-development/front-end-development-quiz.md

---

Issue 1: Q28 - Incorrect answer about flex equal distribution

Line: https://github.com/Ebazhanov/linkedin-skill-assessments-quizzes/blob/main/front-end-development/front-end-development-quiz.md#L277

Question: Which line of code, if applied to all flex items in a flex container, would cause each flex item to take up an equal share of the total width of the container? For example, if there are four items, they would get 25% of each.

Current marked answer (WRONG):

• flex: 1 1 auto;

Correct answer should be:

• flex: 1 0 0;

Explanation:
The current answer flex: 1 1 auto; is incorrect because flex-basis: auto means items will size based on their content first, then distribute remaining space. This results in unequal widths if content differs.

For equal distribution regardless of content, you need flex: 1 0 0; where flex-basis: 0 makes all items start from zero width and then grow equally based on the flex-grow value of 1.

---

Issue 2: Q52 - Incorrect answer about flex: 1 shorthand

Line: https://github.com/Ebazhanov/linkedin-skill-assessments-quizzes/blob/main/front-end-development/front-end-development-quiz.md#L505

Question: The flex property is often applied to flex items with a value of 1. Using flex: 1 is a shorthand - what does it unpack to?

Current marked answer (WRONG):

• flex: 1 1 auto;

Correct answer should be:

• flex: 1 1 0; (or flex: 1 1 0%)

Explanation:
According to the CSS Flexible Box Layout Module specification, flex: 1 expands to flex: 1 1 0 (or flex: 1 1 0%), NOT flex: 1 1 auto. This is a critical difference in how flex items are sized.

Reference: https://www.w3.org/TR/css-flexbox-1/#flex-common

---

Issue 3: Q86 - Multiple correct answers marked

Line: https://github.com/Ebazhanov/linkedin-skill-assessments-quizzes/blob/main/front-end-development/front-end-development-quiz.md#L843

Question: Which command has no Syntax error in CSS?

Current state:

• p {font-size: 16em;}
• h2 {colour: yellow;}
• div {border-radius: 5px}
• #my-div {background-color: blue;}

Issue: Two answers are marked as correct. While both are technically valid CSS, only one should be marked. Additionally, the 3rd option is also valid CSS (missing semicolon on the last property is allowed).

---

Issue 4: Q91 - Duplicate answer option

Line: https://github.com/Ebazhanov/linkedin-skill-assessments-quizzes/blob/main/front-end-development/front-end-development-quiz.md#L890

Question: Which choice is not a valid value for the contain property?

Current options:

• content
• all
• layout
• all

Issue: "all" appears twice in the options. This appears to be a formatting error. One should likely be a different value like "strict", "none", "size", or "paint".

Valid values for contain property are: none, strict, content, size, layout, style, paint, inline-size, block-size.

[codomposer]

@Ebazhanov Please assign this ticket to me

[codomposer]

Could you please check this PR? #7174