Mise en page avec Flexbox et Grid

Question 1

What are the HTML5 container elements used in structure divisions?

Answer 1

<header>, <footer>, <nav>, <main>

## Footnote

These elements help in organizing the structure of a webpage.
</main></nav></footer></header>

Question 2

What is the main property for Flexbox?

Answer 2

display: flex

This property enables the flex container for flexible layout.

Question 3

What property controls the orientation of Flexbox elements?

Answer 3

flex-direction

This can set the direction as column, row, etc.

Question 4

Which properties are used for aligning elements in Flexbox?

Answer 4

justify-content, align-items

These properties manage the alignment along the main and cross axes.

Question 5

What does the flex-wrap property do?

Answer 5

Contrôle de l’enroulement des éléments

It determines whether the flex items should wrap onto multiple lines.

Question 6

What is the main property for Grid layout?

Answer 6

display: grid

This property creates a grid container for layout.

Question 7

What does the gap property define in a Grid layout?

Answer 7

Espacement entre les lignes/colonnes

It specifies the space between grid items.

Question 8

What is the purpose of grid-template-areas in Grid?

Answer 8

Organisation des éléments

This property allows for a visual representation of the layout.

Question 9

What properties define the dimensions of rows and columns in Grid?

Answer 9

grid-template-rows, grid-template-columns

These properties specify the size of each row and column in the grid.

Question 10

How are the starting and ending points defined in a Grid layout?

Answer 10

grid-column-start, grid-row-start

These properties indicate where a grid item should begin in the grid.