06前端学习之移动web开发：移动布局(流式布局)、Flex伸缩布局、移动响应式web开发(rem布局)、响应式布局(Bootstrap框架)

原创

已于 2024-08-27 17:00:03 修改 · 889 阅读

标签

#css #flex #html #css3

于 2020-07-26 21:59:06 首次发布

一、移动布局(流式布局):

flex是Flexible Box的缩写，意为：弹性布局；用来为盒状模型提供最大的灵活性, 任何一个容器都可以指定为flex;

当为父盒子设为flex布局以后, 子元素的float, clear和vertical-align属性将失效;
伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局;
采用了flex布局的元素称为flex容器(flex container), 简称: “容器”. 它所有的子元素自动称为容器的成员, 称为flex项目(flex item), 简称: “项目”;

总结:

属性	说明
flex-direction	设置主轴的方向
justify-content	设置主轴上的子元素排列方式
flex-wrap	设置子元素是否换行
align-content	设置侧轴上的子元排列列方式(多行)
align-items	设置侧轴上的子元素排列方式(单行)
flex-flow	复合属性, 相当于同时设置了flex-direction和flex-wrap

在flex布局中, 是分为主轴与侧轴两个方向的, 同样的叫法有: 行和列, x轴和y轴;

flex-direction属性决定主轴的方向(即: 项目的排列方向)
注意: 主轴和侧轴是会变化的, 就看flex-direction设置的主轴, 剩下的为侧轴; 而子元素是跟着主轴来排列的;

属性	说明
flex-direction: row;	(默认值)从左到右
flex-direction: row-reverse;	从右到左
flex-direction: column;	从上到下
flex-direction: column-reverse;	从下到上

justify-content属性定义了项目在主轴上的对齐方式
**注意:**使用前要确认好哪个是主轴

属性	说明
justify-content: flex-start;	(默认值)从头部开始, 如果主轴是x轴, 侧从左到右
justify-content: flex-end;	从尾部开始排列
justify-content: center;	在主轴居中对齐(如果主轴是x轴,则水平居中)
justify-content: space-around;	平分剩余空间
justify-content: space-between;	先两边贴边,再评分剩余空间

flex布局中, 默认的子元素是不换行的. 如果装不开, 会缩小子元素的宽度(高度), 放到父盒子中

属性	说明
nowrap	(默认)不换行
wrap	换行

该属性控制子项在侧轴(默认是y轴)上的排列方式, 在子项为单项(单行)时使用

该属性控制子项在侧轴(默认是y轴)上的排列方式, 在子项出现换行的情况;

flex-direction: row;
flex-wrap: wrap;
/* 合并简写 */
flex-flow: row wrap;