Flex

Display Flex verteilt die darin liegenden Elemente nach bestimmten Vorgaben.
Weitere Details findest du unter: https://depot43.ch/unterlagen/flex/flex-display/

Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 / CSS - Flex</title>
	<style>
		div.container {
			display:block;
		}
		article {
			border:1px solid #000;
			background-color: #dedede;
			border-radius: 6px;
			padding:12px;
			margin:12px;
		}
	</style>
</head>
<body>
	<div class="container">
		<article class="box1">
			<h3>Titel in Box 1</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est debitis delectus voluptates nesciunt nulla, ad possimus sequi illum excepturi tempora, magnam consectetur sapiente eaque velit accusamus consequuntur obcaecati numquam ipsa.</p>
		</article>
		<article class="box2">
			<h3>Titel in Box 2</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est debitis delectus voluptates nesciunt nulla, ad possimus sequi illum excepturi tempora, magnam consectetur sapiente eaque velit accusamus consequuntur obcaecati numquam ipsa.</p>
		</article>
	</div>
</body>
</html>


 

            

Aufgabe 14> weiter

Das Standardverhalten eines div-Elements ist "display:block;". Die beiden Blöcke "div.container" werden untereinander dargestellt, sie laufen über die gesamte Breite des Fensters. Die CSS-Eigenschaft "display:flex;" kann die Child-Elemente des Containers nebeneinander verteilen.

Untersuche die CSS-Regeln, der Container ist mit der Eigenschaft "display:block;" versehen.

Passe die Eigenschaft an und mache aus dem Container einen "Flex-Box". Beispiel:

        div.container {
            display:flex;
        }

Prüfe das Ergenis in der HTML-Darstellung (unten).

Füge für beide Boxen je eine neue Regel ein, gib ihnen verschiedene Breiten. Beispiel:

        article.box1 {
            width:40%;
        }
        article.box2 {
            width:60%;
        }

Beachte, dass in einer "FlexBox" beide Boxen gleich hoch bleiben, auch wenn sie unterschiedlich viele Zeilen Inhalt haben.

Beachte: Über "FlexBox" gibt es noch viel zu erzählen. Weitere interessante beispiele findest du unter:

Depot43 Flex > Unterlagen zu weiteren Flex-Anleitungen
Flexbox Froggy > Platziere die Frösche auf dem Seerosenblatt :)

DB-Table: cssbasic14