Day 13. Relearning Flexbox

Notes

• The differences between inline-flex and flex: display:flex elements will span the 100% of available space while inline-flex will span the culmulative width of the children.
• The default value of flex-direction is row. Other values are column, row-reverse and column-reverse.
• The main axis in flexbox goes from left to right. While the cross axis goes from top to bottom. This is the reverse when you change the flex-direction to column.
• If the flex-direction property of an element is set to row and the flex-wrap property is set to wrap, the height of the flex items always sum to the height of the flex container.
• Unlike CSS Grids, flexbox doesn’t provide a flexible way to add gaps or gutters to layout items. I normally make use of a percentage margin like so.

.flex {
  display: flex;
}

.flex__item {
  flex: 33%;
  margin: 1%;
}

This mostly gets the job done for me, but I learned of a more flexible way to do so with the calc() function.

.flex {
  display: flex;
}

.flex__item {
  flex: calc(33.33% - 20px);
}

• How the order property works in flexbox: All flex items have a default order of 0. Setting the order property on a flex item automatically takes it to the end of all the flex parent. You have to explicitly set the order of all the elements you want to reorder.
• Justify-content specifies how the elements are aligned on the main axis. The options are flex-state(default),flex-end (All items are flexed to the end). center (All elements at the center). space-between, space-around.
• align-items enables positioning items in the cross axis (y-axis when flex-direction is set to row. The default value is stretch. It shares the same values with the justify-content property. Except that it adds the baseline value that’ll align items according to the base of the text-content of the flex children.
• Differences between align-content and align-items. align-items will position flex items in relation to their rows, while align-content will do so in relation to the whole flex-container. Here’s a perfect example…

<div class="div">
  <li class="item">Something</li>
  <li class="item">Something</li>
  <li class="item">Something</li>
  <li class="item">Something</li>
  <li class="item">Something</li>
  <li class="item">Something</li>
  <li class="item">Something</li>
  <li class="item">Something</li>
  <li class="item">Something</li>
  <li class="item">Something</li>
  <li class="item">Something</li>
  <li class="item">Something</li>
</div>

and CSS

<style>
li {
    list-style: none;
}
.div {
    display: flex;
    flex-wrap: wrap;
    /* align-items will position elements along the cross-axis of their individual rows */
    align-items: center;
    height: 80vh;
}
.item {
    flex-basis: 33%;
    border: 1px solid red;
}
</style>

Here’s what the code will result in

When we change the align-items property to align-content, here’s what we get.

That’s all for today. See you!