网站的布局模式——笔记整理

网站布局的分类：

固定布局——固定像素布局 px
流动布局——百分比布局 %

网站布局（layout布局）的几种方式：

浮动布局——就是元素左右浮动 堆叠产生布局模式
定位布局——就是元素使用各种定位 产生的布局模式
flex 弹性盒子布局——flex 进行布局（常用）
多列布局
grid布局——网格布局

1、弹性盒子布局

多用于手机APP、手机网站。
弹性盒子布局中使用的属性：

• display:flex; 父元素的属性，给元素设置弹性布局，相当于定义该“盒子”的布局模式
• flex-direction:column; 父元素的属性，设置子容器按照行显示，即按比例分配行高
• flex-direction:row; 父元素的属性，设置子容器按照列显示，即按比例分配宽度
• flex-direction: column-reverse; 父元素的属性，子元素按行显示，且反向排序
• flex:1；, flex:2; 子元素的属性，用来设置该子元素分配的空间
• order:1； order:2； 子元素的属性，给该子元素分配的空间的排序
• align-items: center; 父元素的属性，设置子容器Y轴居中，即垂直对齐方式；也可以用于子元素，设置子元素内文本的对齐方式；注意使用时需给元素设置 display:flex;
• justify-content: center; 父元素的属性，设置子容器X轴居中，即水平对齐的；也可以用于子元素，设置子元素内文本的对齐方式方式；注意使用时需给元素设置 display:flex;
• flex-wrap:wrap; ,flex-wrap:nowrap; 父元素的属性，设置子元素溢出后是否折行；不设置时默认不折行，父元素空间变化时，子元素空间会按照比例放大或缩小

注意：

给同一父元素下的子元素统一设置相同固定宽或高，不设置折行，子元素按相同比例分配；
设置折行，子元素按固定宽或高依次排开，溢出时折行

2、grid网格布局

点此查看网格布局详细教程

3、多列布局

点此查看多列布局详细教程