关键词：
1.传统布局与flex布局
传统布局
兼容性好
布局繁琐
局限性，不能再移动端很好的布局
flex弹性布局
操作方便，布局极为简单，移动端应用很广泛
PC端浏览器支持情况较差
IE 11或更低版本，不支持或仅部分支持
建议：
1.如果是PC端页面布局，我们还是传统布局
2.如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局。
2.flex布局原理
任何一个容器都可以指定为flex布局。
当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。
采用Flex布局的元素，称为Flex容器，简称“容器”。它的所有子元素自动成为容器成员，称为Flex项目，简称“项目”。
3.常见父项属性
3.1 常见父项属性
以下这6个属性是对父元素设置的
flex-direction：设置主轴的方向
justify-content：设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行
align-items:设置侧轴上的子元素的排列方式（单行）
align-content：设置侧轴上的子元素的排列方式（多行）
flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
3.2 flex-direction 设置主轴的方向
1.主轴与侧轴
在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴。
默认主轴方向就是x轴方向，水平向右
默认侧轴方向就是y轴方向，水平向下
2.属性值
该属性决定主轴的方向(即项目的排列方向)
注意：主轴和侧轴是会变好的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的
row：默认值从左到右
row-reverse：从右到左
column：从上到下
column-reverse：从下到上
3.3 justify-content 设置主轴上的子元素排列方式
justify-content 属性定义了项目在主轴上的对齐方式
注意：使用这个属性之前一定要确定好主轴是哪个
flex-start：默认值是从头部开始，如果主轴是x轴，则从左到右
flex-end：从尾部开始排列
center：在主轴居中对齐（如果主轴是x轴 则水平居中）
space-around：平分剩余空间
space-between：先两边贴边，再平分剩余空间(重要)
3.4 flex-wrap设置子元素是否换行
默认情况下，项目都排在一条线（又称“轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的。
nowrap：默认值，不换行
wrap：换行
3.5 align-items 设置侧轴上的子元素排列方式(单行)
该属性是控制子项在侧轴（默认是y轴）上的排列方式，在子项为单项的时候使用
flex-start：从上到下
flex-end：从下到上
center：挤在一起居中（垂直居中）
stretch：拉伸（默认值）
3.6 align-content 设置侧轴上的子元素的排列方式（多行）
设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没有效果的
flex-start：默认值在侧轴的头部开始排列
flex-end：在侧轴的尾部开始排列
center：在侧轴中间显示
space-around：子项在侧轴平分剩余空间
space-between：子项在侧轴先分布在两头，再平分剩余空间
stretch：设置子项元素高度平分父元素高度
3.7 flex-flow
flex-flow属性是flex-direction和flex-wrap属性的复合属性
4.flex布局子项常见属性
4.1 flex属性
flex属性定义子项目分配剩余空间，用flex来表示占多少份数
.item flex: <number>; /*default 0*/
4.2 align-self 控制子项自己在侧轴上的排列方式
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
span:nth-child(2)
/*设置自己在侧轴上的排列方式*/
aligin-self: flex-end;
4.3 order属性定义项目的排列顺序
数值越小，排列越靠前，默认为0
注意：和z-index不一样
移动web开发之flex布局附携程网首页案例制作(代码片段)
本篇目录一、flex布局体验传统布局1.1flex弹性布局：建议：1.2初体验二、flex布局原理2.1布局原理三、flex布局父项常见属性3.1常见父项属性3.2flex-direction3.3 justify-content设置主轴上的子元素排列方式3.4flex-wrap设置子元素是否... 查看详情
移动端web开发流式布局flex布局rem布局(代码片段)
文章目录移动端Web开发流式布局flex布局布局原理常用属性rem布局rem基础媒体查询less移动端Web开发流式布局在PC端进行网页制作时，经常使用固定像素的网页布局，但这种布局方式对小屏幕的设备不友好。为了适应小屏幕... 查看详情
移动web开发之rem适配布局(代码片段)
引入1.页面布局文字能否随着屏幕大小变化而变化2.流式布局和flex布局主要针对宽度布局，那高度如何设置3.怎样让屏幕发生变化的时候元素高度和宽度等比例缩放1.rem基础rem单位rem(rootem)是一个相对单位，类似于em，em... 查看详情
移动web开发之响应式布局(代码片段)
文章目录一、响应式开发原理1.1响应式开发原理1.2响应式布局容器二、bootstrap的介绍2.1Bootstrap简介2.2bootstrap优点2.3bootstrap布局容器2.4bootstrap栅格系统总结一、响应式开发原理1.1响应式开发原理就是使用媒体查询针对不同宽度的设... 查看详情
移动web开发笔记(代码片段)
移动web开发笔记移动web开发笔记基础概念像素单位CSSpixels与devicepixelsCSSpixelsPPIDPIdevicePiexelRatio文字大小控制viewport响应式布局原则实现方式布局方案百分比布局流体布局弹性flexible布局flex-box布局图片处理普通设置响应式图片媒体... 查看详情
web移动端开发-flex布局父项常见属性超详解（附图解）(代码片段)
目录flex布局父项常见属性一、flex-direction1.属性2.演示flex-direction:row;flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse;二、justify-content1.属性2.演示justify-content:flex-start;justify-content:flex-end;justify-content:center;justify-co... 查看详情
移动布局之弹性布局(代码片段)
flex是flexbleBox的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。当我们为父盒子设置为flex布局以后，子元素的float（浮动）、clear（清除浮动）和vertical-align（垂直居中，... 查看详情
web前端之移动端课程开发之06.bootstrap(代码片段)
...平板手机端栅格布局完整的类库jQuery插件不同的使用场景移动设备优先Bootstrap3 查看详情
web前端之移动端课程开发之06.bootstrap(代码片段)
...平板手机端栅格布局完整的类库jQuery插件不同的使用场景移动设备优先Bootstrap3 查看详情
移动布局之流式布局(代码片段)
...，不受固定像素的限制，内容向两侧填充流式布局方式是移动web开发使用的比较常见的布局方式max-width最大宽度（max-height最大高度）min-width最小宽度（min-height最小宽度）流式布局宽度设置为百分比的形式，但是我们做的是单独... 查看详情
html新增api使用及移动端web页面的布局方式(代码片段)
...)文件读取FileReader的使用方法地理定位：Geolocation接口移动端Web页面的布局方式流式布局弹性盒布局布局原理flex布局父项常见属性flex布局子项常见属性rem适配布局rem单位媒体查询(MediaQuery)响应式布局响应式 查看详情
flex弹性布局(代码片段)
...显示，通过设置width，height；超过设定值的出现滚动条；移动端无法兼容pc端页面，需要单独对移动端页面进行设计；常见是通过UA信息JS判断跳转至二级域名或二级目录；2、流式布局：使用百分比而非固定的像素进行布局，可以... 查看详情
android移动应用开发之六种布局(代码片段)
文章目录LinearLayoutRelativeLayoutFrameLayoutTableLayoutGridLayoutConstraintLayout参考LinearLayout<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="htt 查看详情
flex布局详解(代码片段)
...布局：（1）兼容性好（2）布局繁琐（3）局限性，不能在移动端很好的布局flex布局：（1）操作方便，布局极为简单，移动端应用广泛（2）pc端浏览器支持情况较差（3）IE11或更低版本，不支持或仅部分支持建议：（1）pc端页面... 查看详情
前端web-flex布局(代码片段)
flex布局百分比布局FLex布局案例主体框架百分比布局特点流式布局;宽度自适应，高度固定布局方式宽度为半分比写法FLex布局Flex的优势和特点浏览器提倡的布局模型，页面渲染性能高布局简单、方便避免浮动脱标的问题兼... 查看详情
移动web开发之响应式布局
1.响应式开发1.1响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的1.2响应式布局容器响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果原理就是在不... 查看详情
移动web开发之响应式布局
1.响应式开发1.1响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的1.2响应式布局容器响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果原理就是在不... 查看详情
移动端布局单位介绍之rem(代码片段)
本文主要写给刚接触移动端开发的同鞋们。首先先将几个主要概念讲一下；什么是移动端？移动端故名思义是为移动终端，大名叫移动通信终端，是指可以在移动中使用的计算机设备。其实就是我们常说的手机。什么是布局？前... 查看详情