SHARE
TWEET

Untitled

a guest Oct 16th, 2019 65 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Flex</title>
  9.     <style>
  10.         .container>div {
  11.             background-color: #fff;
  12.             margin: 10px;
  13.             padding: 20px;
  14.             font-size: 30px;
  15.         }
  16.  
  17.         .container {
  18.             display: flex;
  19.             flex-direction: row-reverse;
  20.             /* flex-direction: column-reverse; */
  21.             flex-wrap: wrap-reverse;
  22.             /* flex-wrap: nowrap; */
  23.             justify-content: center;
  24.             height: 300px;
  25.             align-items: center;
  26.             background-color: rgb(11, 170, 143);
  27.         }
  28.     </style>
  29. </head>
  30.  
  31. <body>
  32.     <div class="container">
  33.         <div style="flex-grow: 6;">1</div>
  34.         <div>2</div>
  35.         <div>3</div>
  36.         <div>4</div>
  37.         <div>5</div>
  38.         <div>6</div>
  39.         <div>7</div>
  40.         <div>8</div>
  41.         <div>9</div>
  42.         <div>10</div>
  43.         <div>11</div>
  44.         <div>12</div>
  45.         <div>13</div>
  46.         <div>14</div>
  47.         <div>15</div>
  48.     </div>
  49. </body>
  50.  
  51. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top