Flexbox — Mise en pratique - Solutions

Exercice 1

ex 1
styles.css
ul {
  display: flex;
  justify-content: end;
  gap: 20px;
}
 
div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
 
nav {
  display: flex;
  gap: 20px;
}

Exercice 2

ex 1
styles.css
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
 
img {
  max-width: 100%;
}
 
article {
  display: flex;
  flex-direction: column;
  max-width: 200px;
}
 
.article-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}
 
.article-footer {
  display: flex;
  justify-content: space-between;
}