Css Test Flashcards
What does CSS Flexbox stand for?
CSS Flexible Box Layout
True or False: Flexbox is designed for one-dimensional layouts.
True
What property is used to define a flex container?
display: flex;
Fill in the blank: The main axis can be defined using the ______ property.
flex-direction
Which value of flex-direction arranges items from left to right?
row
What property controls the alignment of items along the main axis?
justify-content
True or False: The default value of flex-direction is column.
False
Which property is used to control the spacing between flex items?
gap
What are the possible values for justify-content? (List any two)
flex-start, flex-end, center, space-between, space-around
What is the purpose of the align-items property?
To align flex items along the cross axis.
Fill in the blank: The ______ property defines how much a flex item will grow relative to the rest of the flex items.
flex-grow
Which property can be used to specify the size of a flex item?
flex-basis
True or False: Flex items can be nested within each other.
True
What value of align-items centers flex items vertically in a row layout?
center
What does the property flex-shrink do?
It defines the ability for a flex item to shrink if necessary.
Which property is used to reverse the order of flex items?
flex-direction: row-reverse; or flex-direction: column-reverse;
What is the default value of align-items?
stretch
Fill in the blank: To make a flex item take equal space, use ______: 1.
flex
What does the property flex-wrap do?
It controls whether flex items should wrap onto multiple lines.
What is the default value of flex-wrap?
nowrap
True or False: Flexbox is not compatible with older versions of Internet Explorer.
True
What does the value ‘space-between’ do in justify-content?
It distributes items evenly, with the first item at the start and the last item at the end.
Which property would you use to align a single flex item differently from the rest?
align-self
What does the value ‘flex-start’ do in justify-content?
It aligns items to the start of the flex container.
Fill in the blank: The ______ property allows you to specify the order of flex items.
order
What is the purpose of the flex-flow property?
It is a shorthand for flex-direction and flex-wrap.
What is the effect of using ‘align-content’?
It aligns flex lines within the flex container when there is extra space.
