daily pastebin goal
16%
SHARE
TWEET

Untitled

a guest Dec 14th, 2018 67 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* Styles */
  2. /* -------------------------------------------------------------------------- */
  3.  
  4. body {
  5.   margin: 10px;
  6. }
  7.  
  8. .container {
  9.   border-width: 1px;
  10.   border-color: brown;
  11.   border-style: solid;
  12.   border-radius: 8px;
  13. }
  14.  
  15. .item {
  16.   min-width: 100px;
  17.   padding: 10px;
  18.   color: white;
  19.   font-weight: bold;
  20.   text-align: center;
  21.   border-radius: 8px;
  22. }
  23.  
  24. .item:nth-child(odd) {
  25.   background-color: cadetblue;
  26. }
  27.  
  28. .item:nth-child(even) {
  29.   background-color: coral;
  30. }
  31.  
  32. /* Flex container */
  33. /* -------------------------------------------------------------------------- */
  34.  
  35. .container {
  36.   display: flex;
  37.  
  38.   /* flex-direction: column-reverse; */
  39.  
  40.   flex-wrap: wrap;
  41.  
  42.   justify-content: space-between;
  43.  
  44.   align-items: flex-start;
  45. }
  46.  
  47. .container {
  48.   height: 170px;
  49. }
  50.  
  51. /* Flex items */
  52. /* -------------------------------------------------------------------------- */
  53.  
  54. .item:not(:last-child) {
  55.   margin-right: 10px;
  56. }
  57.  
  58. .item:nth-child(2) {
  59.   align-self: flex-end;
  60. }
  61.  
  62. .item:nth-child(3) {
  63.   align-self: stretch;
  64. }
  65.  
  66. .item:nth-child(4) {
  67.   align-self: center;
  68. }
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