Não importa o tamanho da tela, os elementos permanecem do mesmo tamanho.
Arquivo html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="flexbox.css">
<title>Diminuindo proporcionalmente os elementos</title>
</head>
<body>
<main class="flexContainer">
<div class="flexItem firstRow red"><p>red</p></div>
<div class="flexItem firstRow green"><p>green</p></div>
<div class="flexItem firstRow yellow"><p>yellow</p></div>
<div class="flexItem firstRow brown"><p>brown</p></div>
</main>
</body>
</html>Arquivo css:
.red{
background-color: red;
}
.green{
background-color: green;
}
.yellow{
background-color: yellow;
}
.brown{
background-color: brown;
}
.flexContainer{
display: flex;
}
.flexItem{
width: 200px;
}
.flexItem:first-child{
flex-shrink: 3;
}