Embarking on my journey with CSS and HTML, I am eager to enhance my understanding.
While attempting to align 3 divs in an inline block at the top of the flexbox section, I expected "align-items: flex-start;" to work, but unfortunately, the divs did not respond as desired. After exploring various options, adding "margin:1vmax;" to the div attributes made it work. What is the reason behind this? What fundamental principle is at play here?
section{
background:cadetblue;
padding: 20px 20px;
display: flex;
flex-direction: row;
align-items: flex-start;
}
div{
background:black;
color: white;
height:auto;
width: 25%;
padding: 0.5em 2em;
margin:1vmax;
text-align: justify;
text-justify:inter-word;
}