flex grid 布局

最新推荐文章于 2025-10-17 22:45:31 发布

原创最新推荐文章于 2025-10-17 22:45:31 发布 · 473 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #css3

本文详细介绍了CSS布局中的flex和grid两种方法，包括它们的属性和用法。通过实例展示了如何使用flex-direction调整主轴方向，以及grid-template-columns设置列宽。同时，讲解了元素分类、position定位，如relative、absolute和fixed。最后，给出了一个实际的HTML和CSS代码示例，用于创建响应式页面布局。

元素分类

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