Flexbox - Flex Kaplar

Uygulamanızda Flexbox'ı kullanmak için, Flexbox'ı kullanarak bir esnek konteyner oluşturmanız / tanımlamanız gerekir. display Emlak.

Usage -

display: flex | inline-flex

Bu özellik iki değeri kabul eder

flex - Blok düzeyinde esnek bir kap oluşturur.
inline-flex - Bir satır içi esnek konteyner kutusu oluşturur.

Şimdi, nasıl kullanılacağını göreceğiz. display örneklerle birlikte mülkiyet.

Esnek

Bu değer display özelliğine aktarıldığında, blok seviyesinde bir esnek konteyner oluşturulacaktır. Üst konteynerin (tarayıcının) tam genişliğini kaplar.

Aşağıdaki örnek, bir blok düzeyinde esnek kabın nasıl oluşturulacağını gösterir. Burada, farklı renklerde altı kutu oluşturuyoruz ve bunları tutmak için esnek kabı kullandık.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .container{
         display:flex;
      }
      .box{
         font-size:35px;
         padding:15px;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Aşağıdaki sonucu verecektir -

Değer verdiğimizden beri flex için display özelliği, konteyner, konteynerin (tarayıcının) genişliğini kullanır.

Aşağıda gösterildiği gibi konteynere bir çerçeve ekleyerek bunu gözlemleyebilirsiniz.

.container {
   display:inline-flex;
   border:3px solid black;
}

Aşağıdaki sonucu verecektir -

Satır içi esnek

Bu değeri displayözellik, bir satır içi düzey esnek kapsayıcı oluşturulacaktır. Sadece içerik için gereken yeri alır.

Aşağıdaki örnek, bir satır içi esnek kabın nasıl oluşturulacağını gösterir. Burada, farklı renklerde altı kutu oluşturuyoruz ve bunları tutmak için inline-flex konteyneri kullandık.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .container{
         display:inline-flex;
         border:3px solid black;
      }
      .box{
         font-size:35px;
         padding:15px;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Aşağıdaki sonucu verecektir -

Satır içi esnek bir konteyner kullandığımız için, yalnızca öğelerini sarmak için gereken alanı kapladı.