Masatoshi Nishiguchi

July 20, 2016

Flexbox notes

<div class="container">
  <div class="left">
    <!-- left column -->
  </div>
  <div class="contents">
    <!-- right column -->
  </div>
</div>

.container{
  display: flex;
}
.left{
  width: 300px;
}
.contents{
  flex: 1;
}

a shorthand property that sets flex-grow, flex-shrink, and flex-basis

July 20, 2016

<div class="col-sm-4 align-center">
  <a class="email-link" href="/contact" title="Send email">
    <i class="fa fa-envelope"></i>
  </a>
</div>

We can use title attribute:

click_link 'Send email'

We can use finders:

find(".email-link").click