Rumah > Artikel > hujung hadapan web > Apakah sifat susun atur css3?

Apakah sifat susun atur css3?

青灯夜游asal: 2022-02-25 18:12:542173semak imbas

Atribut reka letak css3 termasuk: flex-direction, flex-wrap, flex-flow, justify-content, align-item, align-content, order, flex-grow, flex-shrink, dsb.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3, komputer Dell G3.

1 Kotak Fleksibel atau Flexbox

Ciri terbesar model kotak fleksibel ialah ia boleh mengubah suai lebar sub-elemen secara dinamik dan ketinggian untuk memenuhi reka letak yang sesuai pada saiz skrin yang berbeza.

(1) Sifat bekas fleksibel

arah-flex: Tetapkan arah paksi utama dan tentukan susunan sub-elemen elastik

flex- balut: Apabila anjal Sama ada elemen anak membalut apabila ia melebihi skop bekas fleksibel

aliran lentur: pintasan untuk atribut arah lentur dan balut lentur, atribut majmuk

kandungan justify : penjajaran pada paksi utama

item penjajaran: Penjajaran pada paksi silang

kandungan penjajaran: Penjajaran pada paksi silang apabila terdapat ruang pada paksi silang

(2) Atribut sub Elemen elastik

tertib: Kawal susunan sub-elemen dalam bekas fleksibel

flex-grow: Tetapkan nisbah pengembangan bagi subelemen anjal

kecutan lentur: Tetapkan subelemen anjal Nisbah pengecutan unsur,

asas lentur: Menentukan nilai saiz lalai subelemen anjal sebelum regangan , bersamaan dengan atribut lebar dan tinggi

flex: flex-grow, flex-shrink dan flex- Atribut komposit bagi atribut asas

align-self: membenarkan sub-elemen flex bebas mengatasi tetapan penjajaran lalai bekas flex

Pertempuran sebenar item menu Flexbox

 <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Flexbox</title>
      <link rel="stylesheet" href="style.css">
  </head>
  <body>
      <!--
          响应式菜单html架构，emmet的方式进行简写
          ul.menu>li*6>a[href="#"]{HTML}
      -->
      <ul class="menu">
          <li><a href="#">HTML</a></li>
          <li><a href="#">CSS</a></li>
          <li><a href="#">JavaScript</a></li>
          <li><a href="#">Sass</a></li>
          <li><a href="#">Ruby</a></li>
          <li><a href="#">Mongo</a></li>
      </ul>
  </body>
  </html>

.menu{
      list-style-type: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-flow: row wrap;
  }
   
  .menu li{
      height: 40px;
      text-align: center;
      line-height: 40px;
      flex: 1 1 100%;
  }
   
  .menu li:nth-child(1){
      background-color: #39ADD1;
  }
  .menu li:nth-child(2){
      background-color: #3079AB;
  }
  .menu li:nth-child(3){
      background-color: #982551;
  }
  .menu li:nth-child(4){
      background-color: #E15258;
  }
  .menu li:nth-child(5){
      background-color: #CC6699;
  }
  .menu li:nth-child(6){
      background-color: #52AC43;
  }
   
  @media  (min-width:480px) {
      .menu li{
          flex: 1 1 50%;
      }
  }
   
  @media  (min-width:768px) {
      .menu{
          flex-flow: row nowrap;
      }
  }

Penjelasan terperinci berbilang lajur

Senarai atribut:

lajur: atribut komposit (lebar lajur dan kiraan lajur ), tetapkan lebar dan bilangan lajur

lajur -lebar: tetapkan lebar setiap lajur

kiraan lajur: tetapkan bilangan lajur

jurang lajur: tetapkan jarak antara lajur Jurang

peraturan lajur: Atribut komposit (lebar-peraturan-lajur, gaya-peraturan-lajur, warna-peraturan-lajur), tetapkan gaya sempadan antara lajur

isi lajur : Tetapkan sama ada ketinggian lajur adalah seragam

jalur-jalur: Tetapkan sama ada ia menjangkau semua lajur

3. Pertanyaan media

Amalan terbaik:

/*超小屏幕（手机，小于768px)*/
  /*没有任何媒体查询相关的代码，移动设备优先*/
   
  /*小屏幕（平板，大小等于768）*/
  @media (min-width: 768px) {
   
  }
   
  /*中等屏幕（桌面显示器，大于等于992px)*/
  @media (min-width: 992px) {
   
  }
   
  /*大屏幕（大桌面显示器，大于等于1200px)*/
  @media (min-width: 1200px) {
   
  }

(Belajar perkongsian video: tutorial video css , tutorial pengenalan bahagian hadapan web)

Atas ialah kandungan terperinci Apakah sifat susun atur css3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css css3 count column flex

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Apakah atribut bentuk baharu dalam html5Artikel seterusnya：Apakah atribut bentuk baharu dalam html5

Artikel berkaitan

Lihat lagi