阅读 197

flex | flex布局的基础知识

移动端技术选型

  1. 单独制作移动端页面
  • 流式布局(百分比布局)
  • flex弹性布局(强烈推荐)
  • less+rem+媒体查询布局
  • 混合布局
  1. 响应式页面兼容移动端
  • 媒体查询
  • bootstrap

流式布局(百分比布局)

  • 流式布局,就是百分比布局,也称非固定像素布局
  • 通过盒子的宽度设置成百分比来根据屏幕的宽度进行收缩,不受固定像素的限制,内容向两侧填充
  • 流式布局方式是移动web开发使用的比较常见的布局方式
 max-width: 最大宽度;
 min-width: 最小宽度;
 max-width:最大高度;
 min-width:最小高度;

复制代码

flex布局

  • 能够说出flex盒子的布局原理
  • 能够使用flex布局的常用属性
  • 能够独立完成携程移动端首页案例

flex布局知识

  • flex 布局体验
  • flex 布局原理
  • flex 布局父项常见属性
  • flex 布局子项常见属性
  • 携程网首页案例制作

1. flex 布局体验

传统布局

  • 兼容性好
  • 布局繁琐
  • 局限性,不能在移动端很好的布局

flex弹性布局

  • 操作方便,布局极为简单,移动端应用很广泛
  • pc端游览器支持情况较差
  • IE11或更低版本,不支持或仅部分支持

建议:

  1. 如果是PC端页面布局,我们还是传统布局
  2. 如果是移动端或者不考虑兼容性问题的pc端页面布局,我们还是可以使用flex弹性布局

2. flex布局原理

flex 是flexible Box的缩写,意思是 “弹性布局”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局,称为众生平等!

  • 当我们为父盒子设为 flex 布局以后,子元素的float,clear ,vertical-align都将失效
  • 名字很多:伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

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


总结

就是通过给父盒子添加flex属性,来控制盒子的位置和排列方式

3. flex 布局父项常见属性

3.1 常见父项属性

六个属性

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

3.2 设置主轴的方向(flex-direction)(重点)

  1. 主轴与侧轴

在flex布局中,相当于x轴,y轴,行和列

主轴默认,水平向右

侧轴,垂直向下

注意:主轴和侧轴是会变的,看怎么设置,子元素是跟着主轴排的

属性值说明
row默认值从左到右
row-reverse从右到左
column从上到下
column-reverse从下到上

3.3 设置主轴上子元素排列方式 (justify-content)(重点)

使用前一定要确定主轴是谁

属性值说明
flex-start从头部开始
flex-end从尾部开始
center在主轴居中对齐
space-around平分剩余空间
space-between先两边贴边,再平分剩余空间

3.4 设置子元素是否换行(flex-wrap)

默认情况下,项目都排在一条线上。不换行

flex-wrap可以定义

  • nowrap 不换行
  • wrap 换行

3.5 设置侧轴子元素排列方式 (align-items)(单行)

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属性的复合属性

flex-flow:row wrap
复制代码

4. flex布局子项常见属性

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

4.1 flex 属性

定义子项目分配剩余空间,用flxe来表示占多少份数。

flex: 0 
复制代码

4.2 align-self 控制子项自己在侧轴的排列方式

align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性 。

默认值为auto,表示继承父元素align-items属性,没有父元素则为stretch

4.3 order 属性定义项目的排列顺序

数值越小,排列越前,默认为0.

注意和z-index不一样

4.4 携程网制作

点击查看详情

文章分类
前端
文章标签