Flexbox and Display Properties

What is the 'display' property used for in CSS?

• It is used to specify the type of box used for an HTML element.

• It is used to change the font size of an HTML element.

• It is used to add a border to an HTML element.

• It is used to create a shadow effect for an HTML element.

Explain the 'flex' value for the 'display' property in CSS.

• inline

• block

• grid

• flex

What are the possible values for 'flex-direction' property in CSS?

• horizontal, vertical, diagonal, reverse

• left, right, top, bottom

• start, end, center, justify

• row, row-reverse, column, column-reverse

How does the 'justify-content' property work in flexbox?

• It has no effect on the alignment of flex items.

• It only works for inline elements, not flex containers.

• It aligns the flex items along the main axis of the flex container.

• It aligns the flex items along the cross axis of the flex container.

What are the different alignment values for the 'align-items' property in flexbox?

• flex-start, flex-end, center, baseline, and stretch

• top, bottom, middle

• start, end, middle

• left, right, center

Explain the purpose of the 'flex-wrap' property in flexbox.

• It is used to add a border to the flex items

• It is used to control whether the flex items are forced into a single line or can be wrapped onto multiple lines.

• It is used to change the color of the flex items

• It is used to change the font size of the flex items

What is the default value of the 'flex-direction' property in flexbox?

• row-reverse

• wrap

• row

• column

How can you make an element disappear from the layout using CSS?

• display: none;

• position: absolute; top: -9999px;

• opacity: 0;

• visibility: hidden;

Differentiate between 'display: none' and 'visibility: hidden' in CSS.

• The 'display: none' property hides the element but still takes up space in the layout, while 'visibility: hidden' completely removes the element from the document.

• The 'display: none' property removes the element from the flow of the document, while 'visibility: hidden' hides the element but still takes up space in the layout.

• The 'display: none' property hides the element but still takes up space in the layout, while 'visibility: hidden' removes the element from the flow of the document.

• Both 'display: none' and 'visibility: hidden' remove the element from the flow of the document.

What is the purpose of the 'flex' shorthand property in CSS?

• To change the font style of the text

• To set the background color of the element

• To set the flexible length on flexible items.

• To add a border around the element