CSS display property:flex behaves inadequately
Hello, who knows what the problem might be?
I put display:flex;, but it behaves inadequately: there are no indents, the length is fine, but some invisible indent appears at the top, when changing the location from start to end, the indent moves up and down.
.my-flex-container{
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
height:200px;
width:100%;
}
.tourdiv {
display:flex;
background:red;
width:69%;
margin:0 2% 0 0;
min-height:20%;
max-height:20%;
}
.gallery {
display:flex;
background:red;
width:28%;
margin:0 1% 0 0;
min-height:20%;
max-height:20%;
}<div class="my-flex-container">
<div class="tourdiv">
<span class="galtext">Internal Tours</span>
</div>
<div class="gallery">
<span class="galtext">Rent a Car</span>
</div>
</div>
3 answers
Maybe so?
Here is the Flexbox instruction
div {
box-sizing: border-box;
}
.my-flex-container{
display:flex;
flex-direction:row;
flex-wrap: no-wrap;
justify-content: space-between;
height: 200px;
width:100%;
border: 1px solid #333;
background-color: #f99;
}
.tourdiv {
display: block;
background:red;
width:70%;
min-height:20%;
max-height:20%;
}
.gallery {
display: block;
background:red;
width:30%;
min-height:20%;
max-height:20%;
margin-left: 20px;
}<div class="my-flex-container">
<div class="tourdiv">
<span class="galtext">Internal Tours</span>
</div>
<div class="gallery">
<span class="galtext">Rent a Car</span>
</div>
</div>Flexbox , is a concept designed for flexible layout with minimal configuration. You have too many parameters of dimensions:
width:69%;
margin:0 2% 0 0;
min-height:20%;
max-height:20%;
And everything else is a percentage. width - for example, it is replaced by flex-grow, and / or flex-basis. margin - it should be removed from the nodes at all, otherwise there will be no beautiful square margins. min-height and max-height in one value - it is a master's business, but flex implies flexibility rather than a rigid restriction.
Well, on the subject of the question:
But some invisible indent appears at the top
Change align-items to flex-start or stretch . In general, to understand the flex, I advise you to save the page: https://codepen.io/SelenIT/pen/yNNZxr to play with flex by clicking on the desktop, I would still upgrade the code and add parameters max-width, max-height , and margin for child nodes.
Make a cut to begin with *{margin:0; padding:0;} the margins will go away.