HTML/CSS?
Hallo,
ich möchte Abstand nach unten, rechts, links beim header, aber ich darf nicht margin, position, gap etc. benutzen also nur flexbox (das ist ja auch unser aktuelles thema).
P.S. Es sollte am Ende wie auf Bild 2 aussehen
CSS-Code:
*{
margin: 0;
box-sizing: border-box;
}
.main {
display: flex;
justify-content: center;
}
.layout {
display: flex;
justify-content: center;
}
.container {
height: 130px;
width: 100%;
background-color:rgb(80, 98, 104);
display: flex;
justify-content: space-around;
align-items: center;
}
.item {
background-color: rgb(39, 185, 171);
width: 120px;
height: 50px;
color: #fff;
font-weight: bold;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: large;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
}
.item1 {
background-color: rgb(193, 67, 67);
width: 115px;
height: 50px;
color: #fff;
font-weight: bold;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: large;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
}
.item2 {
background-color: rgb(112, 29, 189);
width: 80px;
height: 90px;
color: #fff;
font-weight: bold;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: small;
display: flex;
text-align: center;
justify-content: center;
flex-direction: column;
}
.item3 {
background-color: rgba(112, 29, 189, 0);
width: 80px;
height: 110px;
display: flex;
text-align: center;
justify-content: center;
flex-direction: column;
}
.box1 {
background-color: burlywood;
height: 150px;
width: 900px;
display: inline;
justify-content: flex-start;
align-items: center;
flex-direction: column;
}
Würde mich für schnelle Antworten freuen. Danke im Voraus!
LG
1 Antwort
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, Webentwicklung, Programmieren & Softwareentwicklung
Und woran hakt es bei dir jetzt? Bei konkreten Fragen helfen wir dir ja gerne aber wir machen keine Hausaufgaben für dich.
Warum ihr margin und padding nicht nutzen dürft, verstehe ich zwar nicht, da das ja auch bei Flexbox angewendet wird. Allerdings bekommt man das gewünschte auch mit entsprechenden Höhen- und Breitenabgaben und der richtige Ausrichtung in Flexbox hin.
Woher ich das weiß:Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.