移动布局

这是我参与更文挑战的第7天，活动详情查看： 更文挑战

1.flex布局

flex布局(弹性布局),用来为盒状模型提供最大的灵活，任何一个容器都可以指定为flex布局(不管是块级元素还是行内元素)

• 当我们为父盒子设为flex布局以后，子元素的float,clear,vertical-align属性将失效

• 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局= flex布局

• 采用flex布局的元素，称为flex容器，简称“容器”，它的所有子元素自动成为容器成员，称为flex项目，简称“项目”

给父元素添加flex元素，控制子元素

2.常见父属性

• flex-direction： 设置主轴的方向
• justify-content：设置主轴上的子元素排列方式
• flex-wrap:设置子元素是否换行
• align-content:设置侧轴上的子元素排列方式（多行）
• align-items:设置侧轴上的子元素排列方式（单行）
• flex-flow:复合属性，相当于同时设置了 flex-direction 和 flex-wrap

2.1主轴与侧轴

在flex布局中，是分为主轴和侧轴的，同样的叫法有：行和列，x和y

• 默认主轴方向就是x轴方向，水平向右
• 默认侧轴方向就是y轴方法，水平向下

flex-direction： row column

3.常见子属性

• flex子项目占的份数
• align-self控制子项目自己在侧轴的排列方式
• order属性定义子项的排列顺序(前后顺序)

视口

==视口(viewport)==就是浏览器显示页面内容屏幕区域，视口可以分为布局视口，视觉视口和理想视口

• meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就有多宽
• 需要手动填写meta视口标签通知浏览器操作

meta视口标签

<meat name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0">
复制代码

• 背景缩放 background-size: 背景图片宽度 背景图片高度

只写一个参数,另一个就会等比例变化

• 链接去除高亮效果

-webkit-top-high-color:transpant;

流式布局(百分比布局)

• 单位不用固定的像素了，而采用百分比
• max-width 最大宽度（max-height 最大高度)
• min-width 最小宽度(min-height 最小高度)