---
title: Flexbox
slug: Glossary/Flexbox
tags:
  - Flexibles Boxmodul
  - flexbox
translation_of: Glossary/Flexbox
---
<p>Flexbox ist der gängige Begriff für das <a href="https://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Layout Module</a>, ein Layoutmodul zur eindimensionalen Darstellung von Elementen – als Zeile oder Spalte.</p>

<p>In der Spezifikation wird die Flexbox als Layoutmodel für Schnittstellendesign/UI Design beschrieben. Die Kernfunktion der Flexbox besteht darin, Elemente im flexiblen Layout zu vergrößern und zu verkleinern. Bereiche können Elementen direkt zugewiesen werden, auf mehrere Elemente verteilt oder auch um sie herum angeordnet werden.</p>

<p>Flexbox ermöglicht außerdem die Anordnung von Elementen auf der Haupt- oder Querachse, wodurch ein hohes Maß an Kontrolle auch über gruppierte Elemente hinsichtlich Größe und Ausrichtung ermöglicht wird.</p>

<p>Learn more</p>

<h3 id="Property_reference">Property reference</h3>

<div class="index">
<ul>
 <li>{{cssxref("align-content")}}</li>
 <li>{{cssxref("align-items")}}</li>
 <li>{{cssxref("align-self")}}</li>
 <li>{{cssxref("flex")}}</li>
 <li>{{cssxref("flex-basis")}}</li>
 <li>{{cssxref("flex-direction")}}</li>
 <li>{{cssxref("flex-flow")}}</li>
 <li>{{cssxref("flex-grow")}}</li>
 <li>{{cssxref("flex-shrink")}}</li>
 <li>{{cssxref("flex-wrap")}}</li>
 <li>{{cssxref("justify-content")}}</li>
 <li>{{cssxref("order")}}</li>
</ul>
</div>

<h3 id="Further_reading">Further reading</h3>

<ul>
 <li><em><a href="https://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Layout Module Level 1 Specification</a></em></li>
 <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li>
 <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">Relationship of flexbox to other layout methods</a></em></li>
 <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning items in a flex container</a></em></li>
 <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering flex items</a></em></li>
 <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a></em></li>
 <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering wrapping of flex items</a></em></li>
 <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Typical use cases of flexbox</a></em></li>
</ul>

<section id="Quick_links">
<ol>
 <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>

  <ol>
   <li>{{Glossary("Flex")}}</li>
   <li>{{Glossary("Flex Container")}}</li>
   <li>{{Glossary("Flex Item")}}</li>
   <li>{{Glossary("Grid")}}</li>
  </ol>
 </li>
 <li>Related CSS Properties
  <ol>
   <li>{{cssxref("align-content")}}</li>
   <li>{{cssxref("align-items")}}</li>
   <li>{{cssxref("align-self")}}</li>
   <li>{{cssxref("flex")}}</li>
   <li>{{cssxref("flex-basis")}}</li>
   <li>{{cssxref("flex-direction")}}</li>
   <li>{{cssxref("flex-flow")}}</li>
   <li>{{cssxref("flex-grow")}}</li>
   <li>{{cssxref("flex-shrink")}}</li>
   <li>{{cssxref("flex-wrap")}}</li>
   <li>{{cssxref("justify-content")}}</li>
   <li>{{cssxref("order")}}</li>
  </ol>
 </li>
</ol>
</section>