flexbox简易教程

• 2020 年 2 月 18 日
• 筆記

实际案例 banner

<div class="banner">      <div class="banner-content">        <h1>Stripe</h1>        <p>Cool payment API</p>        <a href="#" class="btn-twitter">Start now</a>      </div>  </div>     <style>      .banner {        height: 100vh;        color: white;        background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 50%),          url('https://unsplash.it/300/250?image=0');        background-size: cover;        display: flex;        justify-content: space-around;        align-items: center;        text-align: center;        }        .banner h1 {        font-size: 50px;        font-weight: bold;      }        .banner p {        font-size: 20px;        font-weight: lighter;        opacity: 0.8;        margin-bottom: 20px;      }        </style>

实际案例 tabs

  <style>      .tabs {        background: #534540;        color: white;        padding: 10px 10px 0 10px;        display: flex;      }        .tabs h3 {        font-weight: bold;        font-size: 19px;      }        .tabs p {        font-weight: lighter;        opacity: 0.8;      }        .tabs-item {        flex: 1 0 auto;        background: #756A66;        text-align: center;      }        .tabs-item:first-child {        border-radius: 10px 0 0 0;      }        .tabs-item:last-child {        border-radius: 0 10px 0 0;      }        .tabs-item.active {        background-color: white;        color: black      }    </style>      <div class="tabs">      <div class="tabs-item active">        <h3>75</h3>        <p>Upvoted</p>      </div>      <div class="tabs-item">        <h3>75</h3>        <p>Upvoted</p>      </div>      <div class="tabs-item">        <h3>75</h3>        <p>Upvoted</p>      </div>      <div class="tabs-item">        <h3>75</h3>        <p>Upvoted</p>      </div>      </div>

实际案例 product

<link href="https://cdn.bootcss.com/font-awesome/5.11.2/css/all.css" rel="stylesheet">    <style>      .product {        display: flex;        align-items: center;        margin-bottom: 5px;        padding: 10px;      }        .product:hover {        background-color: darkkhaki;      }        .product-description {        flex: 1 0 auto;        padding: 0 10px;      }        .product-description h3 {        margin-top: 0;      }        .product-description p {        margin-bottom: 0;      }        .product-upvotes {        text-align: center;        padding: 10px;      }        .product-controls a {        font-size: 20px;        color: #ccc;      }  <div class="product">      <div class="product-upvotes">        <i class="fa fa-caret-up"> </i>        <p>34</p>      </div>      <img src="https://unsplash.it/150/100?image=0" alt="" class="product-image img-rounded">      <div class="product-description">        <h3>Intercom</h3>        <p>Cool CRM Service.</p>        </div>      <ul class="list-inline product-controls">        <li><a href=""><i class="fa fa-heart"></i></a></li>        <li><a href=""><i class="fa fa-share"></i></a></li>        <li><a href=""><i class="fa fa-star"></i></a></li>        </ul>    </div>