How to make CSS flex properties compatible with older browsers?

Question

I need to create a passcode screen where I can display digits like below

I am able to create it using "Display: Flex" CSS property, But it is not compatible with older browsers (Like Android 4.2.2 browser).

How can I make it compatible?

<div class="ILS_lock">
<div class="ILS_numbers-row">
  <div class="ILS_digit">1</div>
  <div class="ILS_digit">2</div>
  <div class="ILS_digit">3</div>
</div>

          .ILS_lock {
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 999;
        background-color: {{backgroundColor}};
      }
      .ILS_lock-hidden {
        display: none;
      }
      .ILS_label-row {
        height: 50px;
        width: 100%;
        text-align: center;
        font-size: 23px;
        padding-top: 10px;
        color: {{textColor}};
      }
      .ILS_circles-row {
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 100%;
        height: 60px;
      }
      .ILS_circle {
        background-color: {{backgroundColor}}!important;
        border-radius: 50%;
        width: 10px;
        height: 10px;
        border:solid 1px {{textColor}};
        margin: 0 15px;
      }
      .ILS_numbers-row {
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 100%;
        height: 100px;
      }
      .ILS_digit {
        margin: 0 14px;
        width: 80px;
        border-radius: 10%;
        height: 80px;
        text-align: center;
        padding-top: 29px;
        font-size: 21px;
        color: {{buttonTextColor}};
        background-color: {{buttonColor}};
      }

JsFiddle link -> https://jsfiddle.net/sandeshbsuvarna/0nxrbckm/2/

possible guidance: http://stackoverflow.com/a/35137869/3597276 — Michael Benjamin, Jun 09 '16 at 20:15
@Michael_B Can you help me on the JSFiddle Link I have provided? — Sandesh B Suvarna, Jun 09 '16 at 20:21
Post your CSS in [**autoprefixer**](https://autoprefixer.github.io/). It will add the prefixes you need for older browsers. Read my answer [**here**](http://stackoverflow.com/a/35137869/3597276) to know more about browser compatibility, and also see [**caniuse.com**](http://caniuse.com/#search=flex). — Michael Benjamin, Jun 09 '16 at 20:24

score 1 · Accepted Answer · answered Jun 09 '16 at 20:44

Used Autoprefixer to make the CSS compatible. Worked like charm.

Below code is compatible with < Android 4.2.2 Browsers

      .ILS_lock {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 999;
      }
      .ILS_lock-hidden {
        display: none;
      }
      .ILS_label-row {
        height: 50px;
        width: 100%;
        text-align: center;
        font-size: 23px;
        padding-top: 10px;
      }
      .ILS_circles-row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        width: 100%;
        height: 60px;
      }
      .ILS_circle {
        border-radius: 50%;
        width: 10px;
        height: 10px;
        margin: 0 15px;
      }
      .ILS_numbers-row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        width: 100%;
        height: 100px;
      }
      .ILS_digit {
        margin: 0 14px;
        width: 80px;
        border-radius: 10%;
        height: 80px;
        text-align: center;
        padding-top: 29px;
        font-size: 21px;
      }

How to make CSS flex properties compatible with older browsers?

1 Answers1