flexbox-float-2-ref.xhtml (936B)
1 <?xml version="1.0" encoding="UTF-8"?> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <!-- 7 This reference case uses a div with "text-align: center" in place of a 8 flex container, and has the text "lll" and "rrr" already placed at the 9 target position instead of having it positioned with the "float" property. 10 --> 11 <html xmlns="http://www.w3.org/1999/xhtml"> 12 <head> 13 <style> 14 div.flexbox { 15 text-align: center; 16 font-family: sans-serif; 17 width: 400px; 18 margin-bottom: 2px; 19 background: lightgreen; 20 justify-content: space-around; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="flexbox"> 26 lllaaabbb 27 </div> 28 <div class="flexbox"> 29 aaabbbrrr 30 </div> 31 32 <div class="flexbox"> 33 lllaaabbb 34 </div> 35 <div class="flexbox"> 36 aaabbbrrr 37 </div> 38 </body> 39 </html>