移动端布局(最全)

什么是Flex布局

flex布局表示弹性布局，为盒状模型提供最大的灵活性。

轴

容器中的 主轴 和 交叉轴 在容器中默认有水平的主轴和垂直的交叉轴，项目在容器中默认沿主轴排列

常用属性:

flex-direction 属性 flex-direction 属性设置容器主轴的方向 .wrap{ flex-direction:row | row-reverse | column | column=reverse; } //示例代码 <div class="wrap"> <div class="red-item item"></div> <div class="green-item item"></div> <div class="blue-item item"></div> </div>

flex-wrap属性 flex-wrap属性用于设置当项目在容器中一行无法显示的时候如何处理。 nowrap：表示不换行 wrap：正常换行，第一个位于第一行的第一个 wrap-reverse：向上换行，第一行位于下方

justify-content 属性 .wrap{ justify-content: flex-start | flex-end | center |space-between | space-around }

align-items 属性 align-items定义了项目在交叉轴上(上->下)是如何对齐显示的 flex-start:交叉轴的起点对齐 flex-end 交叉轴的终点对齐

stretch：默认值：如果项目未设置高度或者高度为auto，将占满整个容器的高度

flex属性 子元素在主轴上划分空间

align-self属性 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。 align-self: auto | flex-start | flex-end | center | baseline | stretch;

移动端适配

01. 媒体查询 作用： 感受到屏幕的变化；可以根据屏幕不同的宽，从而获得不同的样式，然后实现不同的样式显示；

使用的话可以放在 <style> 中 ,也可以引用

02. rem rem是一个相对单位，类似于em，：让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候

less的使用: 安装 Easy Less插件 你可以根据他写一个.less文件 在里面写Html语言 然后生成一个CSS 这样你就不用自己计算XX/XXrem了,在主要页面中引入CSS就好了

BootStrap框架

http://www.bootcss.com/

<link href="css/bootstrap.min.css" rel="stylesheet"> 布局容器

按钮: <a class="btn btn-default" href="#" role="button">Link</a> <button class="btn btn-default" type="submit">Button</button> <input class="btn btn-default" type="button" value="Input"> <input class="btn btn-default" type="submit" value="Submit" 辅助类: 上下文颜色 p class="text-muted">...</p> <!-- 下拉三角 --> <span class="caret"></span> 字体图标 <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 栅格系统: 栅格系统，在各个档位下，控制子元素布局不同；将版心宽度均分为12份； <!-- 中屏和以上占有6份 --> <div class="container"> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> </div> <!-- 各个档位下，按照各个档位下布局 --> <div class="container"> <div class="row"> <div class="col-md-6 col-lg-4">1</div> <div class="col-md-6 col-lg-8">2</div> </div> </div> 列偏移:

列嵌套:

可见性:

观看更多前端知识 看下我的分类专栏 前端 谢谢了么么哒 点个赞呗