2
Ich möchte drei Artikel auf der Startseite der Desktop-Version angezeigt werden, jeder Artikel in einer eigenen Spalte. Da ich Flexbox benutze, sollte dies leicht gemacht werden, wie ich in einigen Tutorials gelesen habe.Flexbox zeigt keinen Text in Spalten
Aber nichts ändert sich, die Artikel sind immer noch unter einander. Ich habe versucht, mit diesem Tutorial: https://davidwalsh.name/flexbox-column
HTML
<!DOCTYPE html>
<html>
<head>
<title>Munchies</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style3.css">
</head>
<body>
<nav>
<ul class="navigation">
<li class="nav-item"><a href="index.html">Home</a></li>
<li class="nav-item"><a href="world.html">Around the globe</a></li>
<li class="nav-item"><a href="where.html">Where to eat?</a></li>
<li class="nav-item"><a href="recipes.html">Recipes</a></li>
<li class="nav-item"><a href="about.html">About me</a></li>
</ul>
</nav>
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger"></label>
<div class="wrapper">
<div class="main-content">
<article>
<h3>Featured:</h3>
<h2 id="brussels">Brussels</h2>
<h3>Belgian Food</h3>
<p>
Traditional Belgian food is not for the faint hearted, with dishes such as bloedworst (black pudding made from pig's blood, served with apple sauce), breugel kop (chunks of beef and tongue set in gelatine) and paar de filet/steack de cheval (horse
steak). But there are more elegant spins on the local fare available: try La Maison du Cygne, which fuses Belgian and French cuisine and also offers glorious views of Brussels' gabled, gilded Grand Place.
</p>
</article>
<article>
<h3>Featured:</h3>
<h2>Real guacamole</h2>
<h3>Ingredients:</h3>
<ul class="recipe">
<li>4 mild chillies, finely chopped</li>
<li>bunch coriander, chopped</li>
<li>2 tomatoes, finely chopped</li>
<li>salt, to taste</li>
<li>1 onion, finely chopped</li>
<li>½ lime, juice only</li>
<li>3 ripe avocados</li>
</ul>
<h3>Directions:</h3>
<p>
In a pestle and mortar, pound the chillies, coriander, tomatoes, salt and onion to a fine paste.
</p>
<p>
Add a little water and lime juice to make a looser mixture. Mash in the avocados. Serve.
</p>
</article>
<article>
<h3>Featured:</h3>
<h2 id="belgium">Belgium</h2>
<h3>Waffles</h3>
<p>
Belgian waffles (gauffres) are internationally known, but in Belgium there are two different types: the Brussels waffle and the Liège waffle. The Brussels waffle is rectangular, golden brown on the outside, dusted with powdered/icing sugar and then
sometimes covered with syrup, slices of fruit, chocolate spread and whipped cream - all of which is deemed a mite inauthentic by waffle connoisseurs! The denser textured Liege waffle is square and has burnt sugar on the outside. They are sold
by street vendors and gourmet restaurants alike, all over Belgium.
</p>
</article>
</div>
<aside class="aside aside-2">
MUNCHIES
</aside>
</div>
</body>
</html>
CSS /CSS/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* Site wrapper, using flexbox*/
.wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
text-align: center;
flex: 1 100%;
min-height: 100%;
min-width: 100%;
background-color: rgb(237, 237, 237);
position: relative;
top: 0;
bottom: 100%;
left: 0;
z-index: 1;
padding: 0em;
background-size: 200%;
}
.main {
padding: 1em;
flex: 1 100%;
text-align: justify;
background: rgb(237, 237, 237);
order: 3;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
line-height: 1.3;
}
.aside-1 {
padding-top: 1em;
padding-left: 5em;
padding-right: 5em;
padding-bottom: 1em;
margin-top: 0em;
flex: 1 100%;
background: rgb(224, 224, 224);
order: 2;
}
.aside-2 {
padding: 10px;
margin-top: 0em;
flex: 1 100%;
background: rgb(55, 60, 57);
order: 1;
font-family: Impact, sans-serif;
font-size: 50px;
color: white;
}
/*Navigation menu*/
.navigation {
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
list-style: none;
background: rgb(35, 36, 35);
}
/*List items width in navigation menu*/
.nav-item {
width: 200px;
border-top: 1px solid rgb(73, 70, 70);
border-bottom: 1px solid rgb(73, 70, 70);
}
/*Appearance for navigation menu links*/
.nav-item a {
display: block;
padding: 1em;
background: rgb(35, 36, 35);
color: white;
font-size: 1.2em;
text-decoration: none;
transition: background 0.5s;
}
/*Changing the color of the link when hovering over with the cursor*/
.nav-item a:hover {
background: black;
}
/*Navigation trigger*/
.nav-trigger {
/*hide the checkbox input*/
position: absolute;
clip: rect(0, 0, 0, 0);
}
label[for="nav-trigger"] {
/*critical positioning styles */
position: fixed;
left: 15px;
top: 15px;
z-index: 2;
/*styles */
height: 30px;
width: 30px;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6'/><rect y='24' width='30' height='6'/><rect y='12' width='30' height='6'/></svg>");
background-size: contain;
}
.nav-trigger+label, .wrapper {
transition: left 0.3s;
}
.nav-trigger:checked+label {
left: 215px;
}
.nav-trigger:checked~.wrapper {
left: 200px;
}
.responsive-image {
max-width: 100%;
}
html, body {
height: 100%;
}
body {
/*Without this, the body has excess horizontal scroll when the menu is open*/
overflow-x: hidden;
margin-left: 0px;
margin-right: 0px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
/*Styles for table of content*/
.content {
list-style-type: none;
text-align: center;
font-size: 18px;
max-width: 15em;
margin: auto;
}
.content li a {
display: block;
padding: 0.7em;
background: rgb(35, 36, 35);
/*SPREMENI BARVO TEKSTA, ISTO KOT OZADJE*/
color: white;
font-size: 1em;
text-decoration: none;
transition: background 0.5s;
/*SPREMENI BARVO BORDERJA, ISTO KOT OZADJE*/
border-top: 1px solid white;
border-bottom: 1px solid white;
border-radius: 10px;
}
.content a:hover {
background: black;
}
.profile-pic {
border-radius: 50%;
max-width: 30%;
max-height: 30%;
float: left;
margin: 1em 1em 1em 1em;
}
#social img {
display: inline-block;
max-height: 50px;
max-width: 50px;
margin: 1em 1em 1em 1em;
float: left;
}
.anchor:before {
content: "";
display: block;
height: 50px;
/* fixed header height*/
margin: -50px 0 0;
/* negative fixed header height */
}
.index-img {
max-width: 70%;
border-radius: 25px;
display: block;
margin: auto;
padding: 10px;
}
.recipe {
list-style: none;
}
/*Tablets responsive*/
@media all and (min-width: 700px) {
/* Navigation Menu - Background */
.navigation {
/* critical sizing and position styles */
height: 6em;
z-index: 2;
overflow: hidden;
/* non-critical appearance styles */
background: rgb(55, 60, 57);
}
/* Navigation Menu - List items */
.nav-item {
/* non-critical appearance styles */
width: 20%;
height: 6em;
border-top: none;
border-bottom: none;
float: left;
}
.nav-item a {
/* non-critical appearance styles */
width: auto;
height: 6em;
background: rgb(55, 60, 57);
font-size: 1em;
transition: color 0.2s, background 0.5s;
text-align: center;
padding-top: 2.3em;
border-left: 1px solid rgb(73, 70, 70);
border-right: 1px solid rgb(73, 70, 70);
}
/* Nav Trigger */
.nav-trigger {
display: none;
}
label[for="nav-trigger"] {
/* critical positioning styles */
display: none;
}
.nav-trigger+label, .wrapper {
transition: none;
}
.nav-trigger:checked+label {
left: 0;
}
.nav-trigger:checked~.wrapper {
left: 0px;
}
.main {
padding: 10px;
flex: 1 100%;
}
.recipe {
}
.aside-1 {
padding: 10px;
flex: 1 100%;
font-size: 18px;
/*position: fixed;*/
height: 100%;
}
.aside-2 {
background: red;
margin-top: 1.5em;
flex: 0 0 100%;
}
body {
margin-top: 0em;
}
.responsive-image {
margin: auto;
padding: 20px;
display: block;
width: 40%;
}
/*Styles for table of content*/
.content {
list-style-type: none;
text-align: center;
font-size: 18px;
}
.content li a {
display: block;
padding: 0.7em;
background: rgb(55, 60, 57);
/*SPREMENI BARVO TEKSTA, ISTO KOT OZADJE*/
color: white;
font-size: 1em;
text-decoration: none;
transition: background 0.5s;
/*SPREMENI BARVO BORDERJA, ISTO KOT OZADJE*/
border-top: 1px solid rgb(237, 237, 237);
border-bottom: 1px solid rgb(237, 237, 237);
}
.index-img {
max-width: 50%;
}
}
/*Desktop responsive*/
@media all and (min-width: 900px) {
/* Navigation Menu - Background */
.navigation {
/* critical sizing and position styles */
height: 3em;
z-index: 2;
overflow: hidden;
/* non-critical appearance styles */
background: rgb(55, 60, 57);
}
/* Navigation Menu - List items */
.nav-item {
/* non-critical appearance styles */
width: auto;
height: 3em;
border-top: none;
border-bottom: none;
float: left;
}
.nav-item a {
/* non-critical appearance styles */
width: auto;
height: 3em;
background: rgb(55, 60, 57);
font-size: 1em;
transition: color 0.2s, background 0.5s;
padding: 1em;
}
/* Nav Trigger */
.nav-trigger {
display: none;
}
label[for="nav-trigger"] {
/* critical positioning styles */
display: none;
}
.nav-trigger+label, .wrapper {
transition: none;
}
.nav-trigger:checked+label {
left: 0;
}
.nav-trigger:checked~.wrapper {
left: 0px;
}
.main {
padding: 10px;
flex: 1 60%;
}
.aside-1 {
padding: 10px;
font-size: 18px;
flex: 0 0 200px;
height: auto;
}
.aside-2 {
background: white;
margin-top: 0;
color: black;
flex: 0 0 100%;
}
body {
margin-top: 3em;
}
/*.responsive-image {
margin: auto;
padding: 20px;
display: block;
width: 40%;
}*/
/*Styles for table of content*/
.content {
list-style-type: none;
text-align: center;
font-size: 18px;
max-width: 10em;
/*margin-top: 6em;*
/*position: fixed;
left: 4em;*/
padding: 1em;
}
.content li a {
display: block;
padding: 0.7em;
background: rgb(55, 60, 57);
color: white;
font-size: 1em;
text-decoration: none;
transition: background 0.5s;
border-top: 1px solid rgb(237, 237, 237);
border-bottom: 1px solid rgb(237, 237, 237);
}
.index-img {
max-width: 31%;
display: block;
margin: auto;
}
.recipe {
}
.content-wrapper{
position: fixed;
}
.main-content{
order: 2;
}
.main-content > article {
width: 30%;
padding: 10px;
order: 2;
}
}
https://jsbin.com/kakiqanaho/edit?output Danke für die Hilfe zurückgesetzt!
In 'Anzeige: flex' zu' .main-content'. Der Bereich des Flex-Layouts ist die Eltern-Kind-Beziehung. Elemente, die nicht das übergeordnete Element oder ein untergeordnetes Element dieses übergeordneten Elements sind, akzeptieren keine flex-Eigenschaften. –
Hallo, ich kann nur einen Link senden [link] (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) Hier habe ich viel über gute Informationen gefunden. –
Ja, ich habe mit flex angefangen, weil ich auf diese Seite gestoßen bin. Aber danke! –