Komme in meinem Tutorial einfach nicht weiter. Bitte um Hilfe
Schaffe es einfach nicht, zwei Dreiergruppen zu konstruieren. Entweder zerschieße ich das Ganze
oder es geht irgendwie als 4. Feld darunter weiter.
https://jsfiddle.net/eddodtjn/
Hoffe ich habe es einigermaßen verständlich erklärt.
Der hier verwendete Code
<link rel="stylesheet" href="/css_webseite/solid.css">
<link rel="stylesheet" href="/css_webseite/awesome.css">
<style>
body{
display:flex;
flex-direction:column;
}
#reihe{
margin-left:20%;
display:flex;
flex-direction:row;
width:100%;
}
.container{
width:33%;
display:flex;
}
.container div{
flex:4;
}
.container i{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-content: stretch;
align-items: center;
flex:1;
}
i{
font-size:30px;
}
</style>
</head>
<body>
<div id="reihe">
<div class="container">
<i class="fas fa-address-card"></i>
<div>
<h5>Mobile App Development</h5>
<p>
Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500.
</p>
</div>
</div>
<div class="container">
<i class="fas fa-balance-scale"></i>
<div>
<h5>Animations</h5>
<p>
Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500.
</p>
</div>
</div>
</div> <div id="reihe">
<div class="container">
<i class="fas fa-address-card"></i>
<div>
<h5>UI/UX</h5>
<p>
Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500.
</p>
</div>
</div>
<div class="container">
<i class="fas fa-address-card"></i>
<div>
<h5>Mobile App Development</h5>
<p>
Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500.
</p>
</div>
</div></div>
<div id="reihe">
<div class="container">
<i class="fas fa-balance-scale"></i>
<div>
<h5>Animations</h5>
<p>
Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500.
</p>
</div>
</div>
<div class="container">
<i class="fas fa-address-card"></i>
<div>
<h5>UI/UX</h5>
<p>
Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500.
</p>
</div>
</div>
</div>
</body>