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

Apakah sifat susun atur css3?

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

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

Apakah sifat susun atur css3?

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!

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