Skip to main contentSkip to site searchSkip to component search
Honeycomb

Group item

The group-item helpers classes allow you to customize how individual items from a flex group component ( flix-group, flix-btn-group and flix-tag-group) behave. These are intended to be used on outlying group items, and for fine tuning flex-box item properties.

More group item helpers may be added in the future.

Grow: flex-1

flix-group-item--flex-1

This modifier makes the item grow to fill all available space to it. It translates to flex: 1 in CSS.

Group item
`
Group item
Your special group item 
<div class="flix-group">
  <div class="flix-box flix-box--small">
    Group item
  </div>`
  <div class="flix-box flix-box--small">
    Group item
  </div>
  <div class="flix-box flix-box--success flix-box--small flix-group-item--flex-1">
    Your special group item
  </div>
</div>

Shrink: flex-0

flix-group-item--flex-0

This modifier makes the item shrink as much as possible, depending on the content inside of it. It translates to flex: 0 in CSS.

A very long group item that will overpower the size of other group items if the group item does not shrink.
A very long group item that will overpower the size of other group items if the group item does not shrink.
Your special group item 
<div class="flix-group flix-group--align-stretch">
  <div class="flix-box flix-box--small">
    A very long group item that will overpower the size of other group items if the group item does not shrink.
  </div>
  <div class="flix-box flix-box--small">
    A very long group item that will overpower the size of other group items if the group item does not shrink.
  </div>
  <div class="flix-box flix-box--success flix-box--small flix-group-item--flex-0">
    Your special group item
  </div>
</div>

No shrink

flix-group-item--no-shrink

When a group item is being squeezed by other chunky siblings it might be useful to tell it not to shrink. E.g.: to preserve the size of an image. It translates to flex-shrink: 0 in CSS.

Group item box box box box box box box box box box box box box box box box box box box box box box box
Group item box box box box box box box box box box box box box box box box box box box box box box box
Your special group item 
<div class="flix-group">
  <div class="flix-box flix-box--small">
    Group item box box box box box box box box box box box box box box box box box box box box box box box
  </div>
  <div class="flix-box flix-box--small">
    Group item box box box box box box box box box box box box box box box box box box box box box box box
  </div>
  <div class="flix-box flix-box--success flix-box--small flix-group-item--no-shrink">
    Your special group item
  </div>
</div>

Align self

flix-group-item--align-self-{start|center|end|baseline|stretch}

The align self modifier allows you to change the alignment of an item in a group that has a different alignment.

Group item
box
box
box
Group item
box
Your special group item 
<div class="flix-group flix-group--align-stretch">
  <div class="flix-box flix-box--small">
    Group item <br /> box <br /> box <br /> box
  </div>
  <div class="flix-box flix-box--small">
    Group item <br /> box
  </div>
  <div class="flix-box flix-box--success flix-box--small flix-group-item--align-self-start" >
    Your special group item
  </div>
</div>
Group item
box
box
box
Group item
box
Your special group item 
<div class="flix-group flix-group--align-stretch">
  <div class="flix-box flix-box--small">
    Group item <br /> box <br /> box <br /> box
  </div>
  <div class="flix-box flix-box--small">
    Group item <br /> box
  </div>
  <div class="flix-box flix-box--success flix-box--small flix-group-item--align-self-center" >
    Your special group item
  </div>
</div>
Group item
box
box
box
Group item
box
Your special group item 
<div class="flix-group flix-group--align-stretch">
  <div class="flix-box flix-box--small">
    Group item <br /> box <br /> box <br /> box
  </div>
  <div class="flix-box flix-box--small">
    Group item <br /> box
  </div>
  <div class="flix-box flix-box--success flix-box--small flix-group-item--align-self-end" >
    Your special group item
  </div>
</div>
Group item
box
box
box
Group item
box
Your special group item 
<div class="flix-group flix-group--align-center">
  <div class="flix-box flix-box--small">
    Group item <br /> box <br /> box <br /> box
  </div>
  <div class="flix-box flix-box--small">
    Group item <br /> box
  </div>
  <div class="flix-box flix-box--success flix-box--small flix-group-item--align-self-stretch" >
    Your special group item
  </div>
</div>

Related Components