flexbox-float-2-ref.xhtml

Enable keyboard shortcuts

<?xml version="1.0" encoding="UTF-8"?>

<!--

     Any copyright is dedicated to the Public Domain.

     http://creativecommons.org/publicdomain/zero/1.0/

-->

<!--

     This reference case uses a div with "text-align: center" in place of a

     flex container, and has the text "lll" and "rrr" already placed at the

     target position instead of having it positioned with the "float" property.

-->

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <style>

      div.flexbox {

        text-align: center;

        font-family: sans-serif;

        width: 400px;

        margin-bottom: 2px;

        background: lightgreen;

        justify-content: space-around;

    </style>

  </head>

  <body>

    <div class="flexbox">

      lllaaabbb

    </div>

    <div class="flexbox">

      aaabbbrrr

    </div>

    <div class="flexbox">

      lllaaabbb

    </div>

    <div class="flexbox">

      aaabbbrrr

    </div>

  </body>

</html>