flexbox简易教程

实际案例 banner

代码语言：javascript复制

<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

代码语言：javascript复制

  <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

代码语言：javascript复制

<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>

product tabs

0 人点赞