flex grid 布局

元素分类

2.position 定位

3.flex布局

父元素属性

子元素属性

4.grid布局

• ​ 行内元素

• ​ 块级元素

• ​ 行内块元素

  布局分类

  1.float 浮动

  浮动元素的顶部，

  

  在标准文档流的底部

• 对div2进行浮动：浮动元素的顶部，在标准文档流的底部
• 对div3和div3进行浮动：浮动元素会显示在同一行，依次排列
• 对div2、div3和div4进行浮动：如果宽度不够，被浮动的元素会自动换行
• 对div2、div4进行浮动：浮动元素的顶部，在标准文档流的底部

• relative 相对定位：相对原来位置，偏移一定距离

• absolute 绝对定位：相对于position不为static的父元素，偏移一定距离

  父相子绝：父元素relative，子元素absolute

• fixed 固定定位：相对浏览器定位

• static 没有定位：

• flex-direction 调整主轴方向

  row   				行排布
  row-reverse			同一行反向排布
  column				列排布
  column-reverse		同一列反向排布

• justify-content 主轴子元素排列

  flex-start  		从头部排列
  flex-end			从尾部排列
  center				居中排列
  space-around		平分剩余
  space-between		两边贴边，平分剩余

• align-items 侧轴方向，子元素的排列

  flex-start			从上到下
  flex-end			从下到上
  stretch				拉伸（子元素去掉高度）
  center				居中

• flex-wrap属性 子元素是否换行

  wrap    换行
  no-wrap    不换行

• flex-flow 属性： 复合属性，flex-direction和flex-wrap

  flex-flow:row-wrap

• align-content属性 子元素整体，在父元素中的对齐方式

  flex-start		侧轴头部排列
  flex-end		侧轴尾部排列
  center			居中排列
  space-around	侧轴平分空间
  space-between	两侧贴边，平分剩余空间

• flex属性 份数

  flex:1

• align-self属性 自己的对齐方式

  stretch			拉伸
  center			居中
  start			左对齐
  end				右对齐

• order属性 排序

• grid-template-columns属性 ：设置列宽

  .grid{
  	display:grid;
  	grid-template-columns:1fr 1fr 1fr;			#各占三分之一
  	column-gap:24px;							#列间距
      row-gap:24px;								#行间距
  }

• align-items 竖直方向上对齐子元素

• justify-items 水平方向上对齐子元素

  center		居中对齐
  end			靠右对齐
  space-between	两端对齐

• justify-content 对轨道水平方向对齐

  center   			居中对齐
  end					靠右对齐
  space-between     	两端对齐

• align-content 对轨道竖直进行对齐

  center		居中对齐
  end			靠下对齐

• 

  html文件

    <div class="container">
      <header></header>
      <sidebar></sidebar>
      <content></content>
      <footer></footer>
    </div>

  css

      .container {
        width: 300px;
        height: 400px;
        /* border: 1px solid #000; */
  
        display: grid;
  
        /* 设置列宽和行高 */
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px 100px;
  
        /*间隔*/
        grid-row-gap: 10px;
        grid-column-gap: 10px;
  
        /* 进行位置排布 */
        grid-template-areas:
          "header header header"
          "sidebar content content"
          "sidebar content content"
          "footer footer footer"
        ;
  
  
      }
  
      /*给子元素起名字*/
      header {
        grid-area: header;
        background: #ef757f;
      }
  
      sidebar {
        grid-area: sidebar;
        background: #ffc65f;
      }
  
      content {
        grid-area: content;
        background: #70cfff;
      }
  
      footer {
        grid-area: footer;
        background: #73db91;
      }