HTML Multiple Choice Questions “Styling HTML5 Layout with CSS”.
1. Which of the following overrides container’s align-items property?
a) order
b) align-self
c) align-items
d) flex
Answer: b
Clarification: align-self property is used on flex items, it overrides container’s align-items property, flex is shorthand property for flex-grow, flex-shrink, and flex-basis properties, the order specifies the order of flexible item relative to rest of the flex items inside the same container.
2. Which of the following can’t be the value of float property?
a) left
b) right
c) center
d) inheritAnswer: c
Clarification: float property can have the property left, right, none, inherit. When set to inherit value the element inherits the float value of its parent, when set to none property the element does not float, it is the default value.
3. Which of the following can’t be the value of a clear property?
a) left
b) inherit
c) right
d) center
Answer: d
Clarification: clear property specifies what elements can float beside cleared element and on which side. It can hold the values none, left, right, both and inherit. The inherit property inherits the clear value of its parent when setting to both no floating elements allowed on either the left and right side.
4. Which of the following specifies what happens if content overflow an element’s box?
a) overflow
b) overflow-x
c) overflow-y
d) float
Answer: a
Clarification: overflow property specifies what happens if content overflows an element’s box, overflow-x specifies what to do with left/right edges of the content if it overflows the element’s content area, overflow-y specifies what to do with top/bottom edges of the content if it overflows the element’s content area.
5. Which of the following was not previous layout mode?
a) Block
b) Flexbox layout
c) Inline
d) Positioned
Answer: b
Clarification: Before Flexbox layout module there were four layout modes. Block, Inline, Table, Positioned. Block is for sections in a webpage, inline is for text, table is for two dimensional table data, positioned is for explicit position of an element.
6. Which property defines in which direction the container wants to stack flex items?
a) flex-flow
b) flex-wrap
c) flex-direction
d) align-content
Answer: c
Clarification: flex-direction property defines in which direction the container wants to stack the flex items, the flex-flow property is shorthand property for setting both flex-direction and flex-wrap properties. For deciding whether the flexible items should wrap or not, flex-wrap property is used.
7. Which property is used to align flex items?
a) align-items
b) justify-content
c) align-content
d) flex-grow
Answer: b
Clarification: justify-content property is used to align flex items, the align-items property is used to align flex items vertically, the align-content property is used to align flex lines, flex-grow specifies how much a flex item will grow relative to rest of flex items.
8. Which of the following specifies initial length of flex item?
a) flex-flow
b) flex-grow
c) flex-shrink
d) flex-basis
Answer: d
Clarification: flex-basis property specifies the initial length of the flex item, flex-shrink property specifies how much a flex item will shrink relative to rest of flex items, the value must be a number and a default value is 1. The flexible-grow property is a relative comparison between the items. It decides how much item will grow relative to the rest of flexible items inside the same container.