CSS Tutorials
Tags: ,
Categories: , ,

Overview

The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items while filling their parent container.

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.

Shrinking the Width of Items

In the following, flex-shrink is not used, and the boxes sit at their natural size.

<div class="flex_container">
    <div class="div_1">Box 1</div>
    <div class="div_2">Box 2</div>
    <div class="div_3">Box 3</div>
    <div class="div_4">Box 4</div>
    <div class="div_5">Box 5</div>
    <div class="div_6">Box 6</div>
    <div class="div_7">Box 7</div>
    <div class="div_8">Box 8</div>
    <div class="div_9">Box 9</div>
    <div class="div_10">Box 10</div>
</div>
.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
Box 4
Box 5
Box 6
Box 7
Box 8
Box 9
Box 10

However, if we add lines 11 through 13, we can set Box 4 not to shrink along with the other flex items.

.flex_container {
    display: flex;
    background-color: #ffbd02;
}
.flex_container > div {
    background-color: #eaeaea;
    margin: 10px;
    padding: 20px;
    font-size: 22px;
}
.div_4 {
	flex-shrink: 0;
}
Box 1
Box 2
Box 3
Box 4
Box 5
Box 6
Box 7
Box 8
Box 9
Box 10

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.