Block grid/inline-flex issue because of text length
Question
I've got a block grid of squares with text inside each. Everything works fine when there is only one line of text. More text in a square makes it move below the others and break the grid.
The other problem is that I would like one square to have an additional line of text at the top as shown by the class="notice" . But I can't get this to work either.
I've created a jsfiddle to show more clearly what the issue is. I've had a look through this guide on flexbox but can't seem to solve the issue, not sure if it is related. Any help is greatly appreciated for a newbie.
<body>
<div class="container">
<div class="products">
<div class="product">
<p>Apples</p>
<a href="#"><span class="link"></span></a>
</div>
<div class="product">
<p class="notice">You won't find cheaper</p>
<p>Best price you will find on grapes</p>
<a href="#"><span class="link"></span></a>
</div>
<div class="product">
<p>Orange</p>
<a href="#"><span class="link"></span></a>
</div>
<div class="product" id="no">
<p>Best price you will find on grapes, bananas, kiwis</p>
<a href="#"><span class="link"></span></a>
</div>
<div class="product">
<p>Orange</p>
<a href="#"><span class="link"></span></a>
</div>
<div class="product">
<p>Orange</p>
<a href="#"><span class="link"></span></a>
</div>
</div>
</div>
</body>
.products {
text-align:center;
}
.product {
background-color: red;
display: inline-flex;
height: 10em;
margin-bottom: 10px;
position: relative;
width: 10em;
justify-content:center;
align-items:center;
}
.product p {
color: black;
}
.product p.notice {
font-size: 14px;
color: yellow;
}
.link {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
.product:hover, div.product:focus {
background-color: green;
}
2 answers
solution1
1 ACCPTED 2016-02-13 22:19:48
Not sure why you need display: inline-flex for each of your product items. You could simply make the parent a flex container with display: flex , making all product items flex items.
HTML (no changes)
CSS (adjusted sections only)
.products {
display: flex; /* establish primary flex container */
flex-wrap: wrap; /* enable flex items to wrap */
justify-content: center; /* center flex items horizontally, in this case */
}
.product {
height: 10em;
width: 10em;
margin: 5px;
position: relative;
display: flex; /* establish nested flex container */
flex-direction: column; /* stack flex items vertically */
justify-content: center; /* center flex items vertically, in this case */
align-items: center; /* center flex items horizontally, in this case */
background-color: red;
}
solution2
0 2016-02-13 22:33:07
inline-flex, inline-block,inline-table,inline, img, .. all of them stands on a baseline, you may use vertical-align:
.product {
background-color: red;
display: inline-flex;
vertical-align:top; /* HERE */
height: 10em;
margin-bottom: 10px;
position: relative;
width: 10em;
justify-content:center;
align-items:center;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.