等しい高さの価格表を作成する方法


ハイ👋
このポストでは、Flexboxを使用して等しい高さの価格表を作成する方法を参照してください.containerのクラスでDIVを作成します
 <div class="container">
我々は、現在pricing-gridの内部で同じクラスcontainerで3つのDIVをつくります
<div class="pricing-grid">
      <ul>
        <li class="header">Basic</li>
        <li>10Gb Storage</li>
        <li>10 Emails</li>
        <li>10 Domains</li>
        <li>Endless Support</li>
      </ul>
      <p class="price">$ 10</p>
      <p class="month">per month</p>
      <button>Sign Up</button>
    </div>
     <div class="pricing-grid">
      <ul>
        <li class="header">Pro</li>
        <li>10Gb Storage</li>
        <li>10 Emails</li>
        <li>10 Domains</li>
        <li>Endless Support</li>
        <li>Free Hosting</li>
      </ul>
      <p class="price">$ 10</p>
      <p class="month">per month</p>
      <button>Sign Up</button>
    </div>
     <div class="pricing-grid">
      <ul>
        <li class="header">Premium</li>
        <li>10Gb Storage</li>
        <li>10 Emails</li>
        <li>10 Domains</li>
        <li>Endless Support</li>
      </ul>
      <p class="price">$ 10</p>
      <p class="month">per month</p>
      <button>Sign Up</button>
    </div>

CSS


.container{
  max-width:1024px;
  margin:0 auto;
  display:flex;
}
li{
  list-style-type:none;
  padding:30px;
  border-bottom:1px solid rgba(0, 0, 0, 0.3);
}
li:last-child{
  border-bottom:0;
}
li.header{
  border-bottom:0;
  background-color:black;
  color:#fff;
  padding:20px;
}
ul{
  margin:0;
  padding:0;
}
button{
  padding:12px 20px;
  border:none;
  background-color:#000;
  color:#fff;
  align-items:flex-end;
}
これまでのところ、価格表の基本構造を作成しました😲

これは、適切な間隔と背景色を提供します
.pricing-grid{
  flex-grow:1;
  background-color:rgba(0, 0, 0, 0.1);
  margin:20px;
  text-align:center;
  border-radius:4px;
}

期待😀



現実🤷‍♀️



これはNested Flexbox
.pricing-grid{
  display:flex;
  flex-wrap:wrap;
}
.pricing-grid > *{
  flex:1 1 100%;
}
最終的にCenterへのアイテムの整列
.container{
  align-items:center;
}
私は、このチュートリアルがあなたを助けたことを望みます.🎉