What are the css3 layout properties?-Front-end Q&A-php.cn

What are the css3 layout properties?

青灯夜游

Release： 2022-02-25 18:29:27

Original

2159 people have browsed it

css3 layout attributes include: flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content, order, flex-grow, flex-shrink, etc.

What are the css3 layout properties?

The operating environment of this tutorial: Windows 7 system, CSS3 version, Dell G3 computer.

1. Flexible Box Model (Flexible Box or Flexbox)

The biggest feature of the flexible box model is that it can dynamically modify the width of sub-elements and height to meet the appropriate layout on different screen sizes.

(1) Flexible container properties

flex-direction: Set the main axis direction and determine the arrangement of elastic sub-elements

flex-wrap: When elastic Whether the child element wraps when it exceeds the scope of the flexible container

flex-flow: shortcut for flex-direction and flex-wrap properties, compound property

justify-content: alignment on the main axis

align-items: Alignment on the cross axis

align-content: Alignment on the cross axis when there is space on the cross axis

(2) Elastic sub Element attributes

order: Control the order of sub-elements in the flexible container

flex-grow: Set the expansion ratio of elastic sub-elements

flex-shrink: Set the elastic sub-elements The shrinkage ratio of the element,

flex-basis: Specifies the default size value of the elastic sub-element before stretching, equivalent to the width and height attributes

flex: flex-grow, flex-shrink and flex- Composite attribute of the basis attribute

align-self: allows independent elastic child elements to override the default alignment setting of the elastic container

Flexbox menu item actual combat

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

Copy after login

.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;
      }
  }

Copy after login

2. Detailed explanation of multiple columns

Attribute list:

columns: compound attributes (column-width and column-count), set the width and Number of columns;

column-width: Set the width of each column

column-count: Set the number of columns

column-gap: Set the gap between columns

column-rule: Composite attributes (column-rule-width, column-rule-style, column-rule-color), set the border style between columns

column-fill: Set the height of the column Whether to unify

column-span: Set whether to span all columns

3, media query

Best practice:

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

Copy after login

(Learning video sharing : css video tutorial, web front-end introductory tutorial)

The above is the detailed content of What are the css3 layout properties?. For more information, please follow other related articles on the PHP Chinese website!