Flexbox Fun

Understanding the flexbox

by Ryan Buchholtz

HTML

<div class="body-wrap clearfix">
  <body>
   
    <div class="header-wrap">
      <header>
        <h1>Making sense out of the Flexbox Model</h1>
      </header>
    </div>

      <div class="main-body-wrap">
        <div class="main-content-wrap clearfix">
              <div class="col column-1">
                <div class="item">.item</div>
                <div class="item">.item</div>
                <div class="item">.item</div>
              </div>
              <div class="col column-2">
                <code>.item {<br>
                        width: 50px;<br>
                        height: 50px;<br>
                        background-color: #046380;<br> 
                        margin: 10px;<br>
                        color: white;<br>
                        padding-top: 5px;<br>
                      }
                </code>
                <p>div elements are block by default.</p>
              </div>
            </div>
            <div class="main-content-wrap clearfix">
              <div class="col center">
                <div class="item">.item1</div>
                <div class="item">.item2</div>
                <div class="item">.item3</div>
              </div>
              <div class="col column-2">
                <code>  .container {<br>
                        display: flex;<br>
                        justify-content: center;<br>
                        }
                </code>
                <p>Flex will default elements to row/in-line</p>
              </div>
            </div>
            
            <div class="main-content-wrap clearfix">
              <div class="col flex-start">
                <div class="item">.item1</div>
                <div class="item">.item2</div>
                <div class="item">.item3</div>
              </div>
              <div class="col column-2">
                <code>  .container {<br>
                        display: flex;<br>
                        justify-content: flex-start;<br>
         ...

CSS

/*Master*/

html {
  background-color: #efecca;
}

* {
  box-sizing: border-box;
}

.clearfix {
  overflow: auto;
}


/*Body*/

.body-wrap {
  width: 100%;
  margin: 0 auto;
}

.main-body-wrap {
  margin-top: 125px;
}

/*Header*/

.header-wrap {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  display: flex;
  justify-content: center;
  position: fixed;
  background-color: #046380;
  color: white;
}

header {
  align-self: center;
}


/*main content*/

.main-content-wrap {
  width: 100%;
  margin-top: 25px;
  display: flex;
  justify-content: space-around;
}

.col {
  border: 1px solid #002f2f;
  height: 300px;
  width: 500px;
  margin: 5px;
}

.item {
  width: 50px;
  height: 50px;
  background-color: #046380; 
  margin: 10px;
  color: white;
  padding-top: 5px;
}

.center {
  display: flex;
  justify-content: center;
}

.flex-start {
  display: flex;
  justify-content: flex-start;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
}

.space-between {
  display: flex;
  justify-content: space-between;
}

.space-around {
  display: flex;
  justify-content: space-around;
}

.center-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.left-right {
  display: flex;
}

.item1 {
  margin-right: auto;
}

.left-left-right {
  display: flex;
}

.item2 {
  margin-right: auto;
}

.row-reverse {
  display: flex;
  flex-direction: row-reverse;
}

.order {
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-order {
  order: -1;
}

.column {
  display: flex;
  flex-direction: column;
}

.column-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.column-flexstart {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.column-flexend {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.column-center-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.column-top-bottom {
  display: flex;
 ...