One place for hosting & domains

      A CSS Flexbox Cheatsheet


      Introduction

      Flexbox is a great way to get more flexibility in your layouts and to simplify responsive layout design. It makes it easy to align elements on a 2D plane and is pretty easy to use once you get familiar with the main properties.

      The first step is to set display: flex on a container element. The children to the flex container become flex items. A set of properties can be applied to flex containers, and have an effect to all the items as a whole, and a different set of properties can be applied to flex items and have their effect on the targeted items. Flex items can in turn also be flex containers for the elements it contains, making it easy to create complex layouts.

      Browser Support: 2020 data shows 98% of browsers worldwide now support flexbox without the need for vendor prefixes.

      Following is a quick primer to help make sense of Flexbox at a glance. This won’t be an exhaustive list of all the available properties, values and edge cases, but rather a quick rundown of the most useful or commonly used properties. For an in-depth guide, try this excellent Flexbox guide.

      Flex Container Properties

      Here’s a container with 3 span flex items, without Flexbox:

      <div class="box">
        <span class="item">
          <img src="https://www.digitalocean.com/images/dino.svg" width="64" height="45" alt="Dino Sammy">
        </span>
        <span class="item">
          <img src="/images/steampunk.svg" width="64" height="45" alt="Steampunk Sammy">
        </span>
        <span class="item">
          <img src="/images/skeleton.svg" width="64" height="45" alt="Skeleton Sammy">
        </span>
      </div>
      

      display: flex

      Now, let’s improve it automagically simply by setting display: flex on the container. Notice how the items now automatically expand to the available space in the container:

      .container {
        display: flex;
      }
      

      flex-direction

      You can change the direction of the items using the flex-direction property:

      .container {
        display: flex;
        flex-direction: column;
      }
      

      The default is row and the additional available values are row-reverse, column, column-reverse.

      row-reverse and column-reverse change the visual order of the items, without having to change the order of the HTML markup:

      .container {
        display: flex;
        flex-direction: column-reverse;
      }
      

      The ability to change between the row and column directions makes it very easy to adapt layouts on smaller devices with just one CSS rule change in a media query.

      justify-content

      Use justify-content to align the items on the main axis. The main axis is the Y axis when flex-direction is column and the X axis when flex-direction is row.

      The default value is flex-start and the additional available values are flex-end, center, space-between, space-around and space-evenly.

      align-items

      align-items is analogous to justify-content, but allows to align the items in the cross-axis. It defaults to stretch and also accepts flex-start, flex-end, center and baseline:

      align-content

      align-content is similar to align-items, but it only has an effect when there’s more than one line of flex items (see flex-wrap below). It defaults to stretch and also accepts flex-start, flex-end, center, space-between, space-evenly:

      flex-wrap

      By default items won’t wrap (default of nowrap), so if the items take more space than what’s available they’ll overflow. This can be fixed with flex-wrap set to a value of wrap:

      Flex Item Properties

      align-self

      align-self is just like align-items, but only for specific items. This makes it easy to have flex items that break out of the main rule:

      flex-grow

      With flex-grow we can control the amount of space that a flex item takes compared to the other items. flex-grow accepts a numeric value and it represents a fraction of the available space, depending on the flex-grow value of the other items. It defaults to a value of 0, which means that the item won’t take up available empty space.

      Since it’s based on proportion, setting all items to, for example, a flex-grow of 200 is the same as setting all items to a flex-grow of 1.

      In the below example, the first item has a default flex-grow value of 0, the second item has a value of 1 and the third item has a value of 2:


      Punk Sammy


      Pony Sammy
      flex-grow: 1


      Dino Sammy
      flex-grow: 2

      flex-shrink

      flex-shrink is the opposite of flex-grow and defines the shrinkability of items. It defaults to a value of 1, meaning that the items can shrink and, just as with flex-grow, it’s based on proportion with the other items.

      flex-basis

      flex-basis defines the starting space that an item takes, but it’s not a guarantee because it also depends on space availability or if there’s extra space to fill.

      To illustrate, in the following example, all items have a flex-basis of 25%:

      …but now let’s also give a flex-grow of 1 to the first flex item. In the following example, all items have a flex-basis of 25%, but the first item takes up the rest of the available space because it has a flex-grow value of 1:

      …and finally, here our third item has a flex-basis of 77% and refuses to shrink to make space for the other items that have a flex-basis of 25% because it has a flex-shrink value of 0:


      Punk Sammy


      Pony Sammy


      Dino Sammyflex-basis: 77%; flex-shrink:0;
      .item {
        flex-basis: 25%;
      }
      .item:last-child {
        flex-basis: 77%;
        flex-shrink: 0;
      }
      

      flex

      flex is a shorthand property for the combination of flex-grow, flex-shrink and flex-basis. For example, here’s the syntax for an item that has a flex-grow value of 2, flex-shrink value of 0 and flex-basis of 2rem:

      .item {
        flex: 2 0 2rem;
      }
      



      Source link

      Making Elements Stick in CSS Using position: sticky


      While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or
      edited it to ensure you have an error-free learning experience. It’s on our list, and we’re working on it!
      You can help us out by using the “report an issue” button at the bottom of the tutorial.

      There’s a new value in town for the CSS position property: sticky. It allows us to make elements stick when the scroll reaches a certain point. An element with position: sticky will behave like a relatively-positioned element until it reaches a specified point and then starts behaving like a statically-positioned element. In this post we’ll create a simple example to illustrate.

      We’ll have a div container that will be a flex container and then 4 additional div elements that will be the flex items. Note we don’t have to use flexbox at all for position: sticky to work, here it’s just that flexbox happens to work great for our example.

      Check our flexbox primer if you’d like a refresher on the different flexbox properties and values.

      Here’s the simple markup:

      <div class="container">
        <div class="item punk">
          <img src="https://www.digitalocean.com/images/punk.svg" width="100" alt="Item 1">
        </div>
        <div class="item pony">
          <img src="/images/pony.svg" width="100" alt="Item 2">
        </div>
        <div class="item dino">
          <img src="/images/dino.svg" width="100" alt="Item 3">
        </div>
        <div class="item steampunk">
          <img src="/images/steampunk.svg" width="100" alt="Item 4">
        </div>
      </div>
      

      And now our styles, with the important rules highlighted:

      .container {
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
      
        border: 2px dashed rgba(114, 186, 94, 0.35);
        height: 400px;
        background: rgba(114, 186, 94, 0.05);
      }
      
      .punk {
        position: -webkit-sticky;
        position: sticky;
        top: 4rem;
      }
      
      .pony {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
      }
      
      .dino {
        position: -webkit-sticky;
        position: sticky;
        bottom: 1rem;
        align-self: flex-end;
      }
      

      And here’s the result. Try scrolling the page up and down to notice what happens:

      If position: sticky is not working: There are two common scenarios where an element set to position: sticky; won’t actually stick to the window as intended:

      1. No position property has been defined: Make sure the sticky element has top, bottom set. Or in the case of horizontal scrolling, left or right.)
      2. One of the element’s ancestors has incompatible overflow: If any of the parents above the sticky element have overflow (x or y) set to hidden, scroll or auto, sticky will not work.

      Conclusion

      Here are a few additional things to note:

      • With our example, the align-items: flex-start rule on the flex container is important because otherwise flex items default to a value of stretch where the elements would take the whole height of the container, cancelling the sticky effect.
      • We need to make use of the -webkit-sticky vendor prefix for it to work in Safari.
      • Notice how sticky-positioned elements are only sticky within their parent element.
      • Browser support for position: sticky: As of 2020, 95% of browsers have some level of support. For details see Can I Use css-sticky



      Source link

      Masking Images in CSS Using the mask-image Property


      While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or
      edited it to ensure you have an error-free learning experience. It’s on our list, and we’re working on it!
      You can help us out by using the “report an issue” button at the bottom of the tutorial.

      We covered the use of the clip-path property for clipping using CSS, so it’s only natural that we now go over masking. Contrary to clipping, where a part of an image or element is either completely invisible or completely visible, with masking we can hide or show parts of an image with different levels of opacity.

      Masking in CSS is done using the mask-image property, and an image has to be provided as the mask. Anything that’s 100% black in the image mask with be completely visible, anything that’s 100% transparent will be completely hidden, and anything in-between will partially mask the image. Linear and radial gradients in CSS are generated images, so they can be used as the image mask. SVGs that use the mask element can also be used as the image mask. Let’s go over the 3 possibilities for image masks with concrete examples:

      Masking Using Gradients

      Let’s first use a simple linear gradient that goes from transparent to black. The first image is our default starting image, and the second image has our linear gradient applied as the mask-image value:

      Without mask
      With gradient mask

      Here’s the CSS rules used here:

      .mask1 {
        -webkit-mask-image: linear-gradient(to bottom, transparent 25%, black 75%);
        mask-image: linear-gradient(to bottom, transparent 25%, black 75%);
      }
      

      Here are two more examples of interesting effects that can be accomplished with masking using gradients:

      Gradient mask example 2
      Gradient mask example 3

      And the CSS rules for these 2 gradient masks:

      .mask2 {
        -webkit-mask-image: radial-gradient(circle at 50% 60%, black 50%, rgba(0, 0, 0, 0.6) 50%);
        mask-image: radial-gradient(circle at 50% 60%, black 50%, rgba(0, 0, 0, 0.6) 50%);
      }
      .mask3 {
        -webkit-mask-image: radial-gradient(ellipse 90% 80% at 48% 78%, black 40%, transparent 50%);
        mask-image: radial-gradient(ellipse 90% 80% at 48% 78%, black 40%, transparent 50%);
      }
      

      Masking Using Images

      Here’s we’re using an image that was created using Sketch as our image mask. The first image is the image mask itself, and the second image has that mask applied to it:

      Image mask
      With image mask

      And our CSS looks like this:

      .mask4 {
        -webkit-mask-image: url("/path/to/image-mask.png");
        mask-image: url("/path/to/image-mask.png");
        -webkit-mask-size: 400px 600px;
        mask-size: 400px 600px;
      }
      

      We specified a value for mask-size here because our image mask is 800px by 1200px, but here we want everything shrunk by half so that the image can look sharp on retina displays.

      Masking Using SVG Masks

      Finally, if SVG is your groove, you can define image masks using the SVG mask element.

      The first example currently only seems to be working in Firefox (you probably won’t see anything in non-supporting browsers). It defines the SVG mask and then we reference the ID of the mask in CSS as usual. The second example seems to have wider support and defines the image as part of the SVG element itself.

      Also note that with SVG masks, the colors to use are white and black instead of transparent and black. The colors also work in reverse and white/partially white is what will be visible.

      See the Pen mdPBExv by alligatorio (@alligatorio) on CodePen.

      Example 1 (triangle)

      Here’s the SVG markup for the first example:

      <svg width="0" height="0" viewBox="0 0 400 600">
        <defs>
          <mask id="my-svg-mask">
            <rect fill="#000000" x="0" y="0" width="400" height="600"></rect>
            <polygon fill="#FFFFFF" points="200.5 152 349 449 52 449"></polygon>
          </mask>
        </defs>
      </svg>
      

      Then we can apply the mask to our image with mask-image as usual by refecencing the ID of the SVG mask:

      .mask5 {
        -webkit-mask-image: url(#my-svg-mask);
        mask-image: url(#my-svg-mask);
      }
      

      Example 2 (bubbles)

      For our second SVG example, everything is contained in the SVG definition, including our main image itself:

      <svg width="400px" height="600px" viewBox="0 0 400 600">
        <defs>
          <mask id="my-svg-mask2">
            <rect id="Rectangle" fill="#000000" x="0" y="0" width="400" height="600"></rect>
            <circle id="Oval" fill="#FFFFFF" cx="67.5" cy="51.5" r="67.5"></circle>
            <circle id="Oval" fill="#FFFFFF" cx="296.597656" cy="118.597656" r="56.5976562"></circle>
            <circle id="Oval" fill="#FFFFFF" cx="53.4648437" cy="256.464844" r="81.4648437"></circle>
            <circle id="Oval" fill="#FFFFFF" cx="239.587891" cy="313.587891" r="70.5878906"></circle>
            <circle id="Oval" fill="#FFFFFF" cx="366.597656" cy="562.597656" r="56.5976562"></circle>
            <circle id="Oval" fill="#FFFFFF" cx="93.203125" cy="486.203125" r="76.203125"></circle>
          </mask>
        </defs>
        <image mask="url(#my-svg-mask2)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://www.digitalocean.com/images/css/masking/masking-example1.jpg" width="400" height="600"></image>
      </svg>
      



      Source link