Hallo.
Ich versuche gerade shrink und grow anhand eines pens (original https://codepen.io/AllThingsSmitty/pen/mwEVZX) zu verstehen.
Das ungewöhnliche daran: u.a. wird nicht direkt mit
Jedenfalls ist mir das Grundgerüst klar, und mir ist auch halbwegs klar, wie ich sozusagen die Länge der einzelnen Items auf gleich bekomme (border-bottom weg, border um flex-item = ist vielleicht nicht die eleganteste Art).
Meine Frage:
In der ersten Zeile (class="package-top") fließt der Text raus. besagtes package-top bräuchte also mehr width oder muss schrumpfen, dass es trotzdem lesbar bleibt, probiert habe ich das, aber das hat gar nicht geklappt.
Was habe ich übersehen?
lg, ansophie
Ich versuche gerade shrink und grow anhand eines pens (original https://codepen.io/AllThingsSmitty/pen/mwEVZX) zu verstehen.
Das ungewöhnliche daran: u.a. wird nicht direkt mit
flex-direction
oder justify-content
gearbeitet aber mit width: 0;
.Jedenfalls ist mir das Grundgerüst klar, und mir ist auch halbwegs klar, wie ich sozusagen die Länge der einzelnen Items auf gleich bekomme (border-bottom weg, border um flex-item = ist vielleicht nicht die eleganteste Art).
Meine Frage:
In der ersten Zeile (class="package-top") fließt der Text raus. besagtes package-top bräuchte also mehr width oder muss schrumpfen, dass es trotzdem lesbar bleibt, probiert habe ich das, aber das hat gar nicht geklappt.
Was habe ich übersehen?
HTML:
<div class="flex-container">
<div class="flex-item">
<ul class="package">
<li class="package-top">BASICS</li>
<li class="gray">$ 20/month</li>
<li>20GB Storage</li>
<li>100 Domains</li>
<li>1TB Bandwidth</li>
<li>1000 Email Boxes</li>
</ul>
</div>
<div class="flex-item">
<ul class="package">
<li class="package-top highlight">Very Medium Paket</li>
<li class="gray">$ 30/month</li>
<li>100GB Storage</li>
<li>500 Domains</li>
<li>2TB Bandwidth</li>
<li>1000 Email Boxes</li>
</ul>
</div>
<div class="flex-item">
<ul class="package">
<li class="package-top">XXXXLLARGE (Long Text)</li>
<li class="gray">$ 60/month</li>
<li>250GB Storage</li>
<li>500 Domains</li>
<li>5TB Bandwidth</li>
<li>1000 Email Boxes</li>
</ul>
</div>
<div class="flex-item">
<ul class="package">
<li class="package-top">SUPERLARGELARGE PAKET</li>
<li class="gray">$ 60/month</li>
<li>250GB Storage</li>
<li>500 Domains</li>
<li>5TB Bandwidth</li>
<li>1000 Email Boxes</li>
</ul>
</div>
</div>
CSS:
* {
box-sizing: border-box;
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen-Sans,
Ubuntu,
Cantarell,
"Helvetica Neue",
sans-serif;
margin: 0;
padding: 0;
}
.flex-container {
display: flex;
padding: 1rem;
}
.flex-item {
flex: 1;
width: 0;
}
.flex-item:not(:last-child) {
margin-right: 1rem;
}
.package {
border: 1px solid #eee;
list-style-type: none;
margin: 0;
padding: 0;
transition: 0.25s;
}
.package:hover {
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2);
transform: scale(1.025);
}
.package .package-top {
background-color: #333;
color: #fff;
font-size: 1.5em;
}
.package .highlight {
background-color: #29b6f6;
}
.package li {
background-color: #fff;
border-bottom: 1px solid #eee;
padding: 1.2em;
text-align: center;
}
.package .gray {
background-color: #eee;
font-size: 1.25em;
}
@media only screen and (max-width: 600px) {
.flex-container {
flex-wrap: wrap;
}
.flex-item {
flex: 0 0 100%;
margin-bottom: 1rem;
width: 100%;
}
.package:hover {
box-shadow: none;
transform: none;
}
}
lg, ansophie