CSS Tutorials
Tags: ,
Categories: , ,

Overview

A Flexbox container allows for a responsive layout structure, giving you complete control over the direction, alignment, order, and size of the boxes.

Note

The following are basic examples. Towards the bottom of this page you’ll find a complete list of all applicable properties, where you can find more information on the properties discussed, and sometimes find more involved properties not discussed on this page.

Define a Flex Container

The following creates a flex container with three flex elements within.

<div class="flex_container">
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
</div>

Line 2 below, specifies that the element should be display: flex.

.flex_container {
    display: flex;
    background-color: #ffbd02;
}
.flex_container > div {
    background-color: #eaeaea;
    margin: 10px;
    padding: 20px;
    font-size: 22px;
}
Box 1
Box 2
Box 3

Flex Properties

  • CSS – align-content Property
    The align-content property modifies the behavior of the flex-wrap property by aligning multiple flex lines along the vertical axis.
  • CSS – align-items Property
    The align-items property specifies the vertical alignment for items inside the flex container. The following has three divs aligned centered on the horizontal axis.
  • CSS – align-self Property
    The align-self property specifies the alignment for the specific item inside a flexible container.
  • CSS – flex Property
    The flex property is a shorthand property for: flex-basis, flex-grow, and flex-shrink.
  • CSS – flex-basis Property
    The flex-basis property specifies the initial length of a flexible item.
  • CSS – flex-direction Property
    The flex-direction property specifies the direction of the flexible items.
  • CSS – flex-flow Property
    The flex-flow property is a shorthand property for flex-direction and flex-wrap.
  • CSS – flex-grow Property
    The flex-grow property specifies how much the item will grow relative to the rest of the flexible itemsinside the same container.
  • CSS – flex-shrink Property
    The flex-shrink property specifies how the item will shrink relative to the rest of the flexible items inside the same container.
  • CSS – flex-wrap Property
    The flex-wrap property specifies whether the flexible item should wrap or not.
  • CSS – justify-content Property
    The justify-content property aligns the flexible container’s items when the items do not use all available space on the horizontal axis.
  • CSS – order Property
    The order property specifies the order of a flexible item relative to the rest of the flexible items inside the same container.

CSS Notes:

If you like our content, and find it helpful, please consider making a small donation. Thank you!

We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.