The defining aspect of the flex layout is the ability to alter its items' width and/or height to best fill the available space on any display device. A flex container expands items to fill available free space, or shrinks them to prevent overflow

Flexible Boxes Vocabulary

img

<div class="flex-container">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
</div>


.flex-container {
    display: flex;
    // or
    display: inline-flex;    
}

  • Flex container

  • Flex item

  • Axes

Property Value
flex-direction establishes the main axis row, row-reverse, column, column-reverse
justify-content defines how flex items are laid out along the main axis on the current line
align-items defines the default for how flex items are laid out along the cross axis on the current line
align-self defines how a single flex item is aligned on the cross axis, and overrides the default established by align-items

Flex Direction
Applies to flex containers
Initial value row

row

The flex container's main-axis is defined to be the same as the text direction. The main-start and main-end points are the same as the content direction.

row-reverse

Behaves the same as row but the main-start and main-end points are permuted.

column

The flex container's main-axis is the same as the block-axis. The main-start and main-end points are the same as the before and after points of the writing-mode.

column-reverse

Behaves the same as column but the main-start and main-end are permuted.

align-items
Applies to flex containers
Initial value stretch
  • flex-start

The cross-start margin edge of the flex item is flushed with the cross-start edge of the line.

  • flex-end

The cross-end margin edge of the flex item is flushed with the cross-end edge of the line.

  • center The flex item's margin box is centered within the line on the cross-axis. If the cross-size of the item is larger than the flex container, it will overflow equally in both directions.

  • baseline All flex items are aligned such that their baselines align. The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line.

  • stretch Flex items are stretched such as the cross-size of the item's margin box is the same as the line while respecting width and height constraints.

justify-content

flex-start

http://codepen.io/keioka0828/pen/jrQdqO

flex-end

http://codepen.io/keioka0828/pen/WGYPGZ

center

http://codepen.io/keioka0828/pen/yaQkLN

space-between

http://codepen.io/keioka0828/pen/xEQrgX

space-around

Flex items are evenly distributed so that the space between two adjacent items is the same. The empty space before the first and after the last items equals half of the space between two adjacent items.

http://codepen.io/keioka0828/pen/amQXJy

  • Directions

  • Lines

  • Dimensions

Properties not affecting flexible boxes

  • column-* properties of the multiple column module have no effect on a flex item.

  • clear has no effect on a flex item.

  • float causes the display property of the element to compute to block.

  • vertical-align has no effect on the alignment of flex items.

results matching ""

    No results matching ""