#博学谷IT学习技术支持#
一 、flex布局
1.使用flex-direction改变元素排列方向，Flex布局模型中，弹性盒子默认沿着水平方向排列。
主轴默认是水平方向, 侧轴默认是垂直方向
修改主轴方向属性: flex-direction
row：行, 水平(默认值)
column ：* 列, 垂直
row-reverse ：行, 从右向左
column-reverse ：列, 从下向上
2.使用flex-wrap实现弹性盒子多行排列效果
弹性盒子换行显示 : flex-wrap: wrap;
调整行对齐方式 ：align-content
取值与justify-content基本相同
二、响应式布局
能够根据设备宽度的变化，设置差异化样式
开发常用写法：媒体特性常用写法 ：max-width 、min-width（min-width（从小到大）、max-width（从大到小））
三、使用 BootStrap框架快速开发响应式网页
Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。
中文官网: https://www.bootcss.com/
BootStrap使用步骤
1. 引入： BootStrap提供的CSS代码
<link rel="stylesheet" href="./bootstrap-3.3.7/css/bootstrap.css">
2. 调用类：使用BootStrap提供的样式
container：响应式布局版心类
使用BootStrap栅格系统布局响应式网页：
栅格化是指将整个网页的宽度分成若干等份
BootStrap3默认将网页分成12等份
.container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。
.container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%。
分别使用.row类名和 .col类名定义栅格布局的行和列。
本文含有隐藏内容，请 开通VIP 后查看