移动WEB开发之flex布局

传统布局&flex布局

传统布局

兼容性好；
布局繁琐；
局限性，不能在移动端很好的布局。

flex弹性布局

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

布局选择

PC端页面布局——传统布局；
移动端或不考虑兼容性问题的PC端页面布局——flex弹性布局。

flex布局体验

搭建HTML结构

初体验

flex布局原理

flex"弹性布局"：用来为盒装模型提供最大的灵活性,任何一个容器都可以指定为flex布局。
• 当我们为父盒子设为flex布局以后，子元素的
at、clear和vertical-align属性将失效。
• 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局。

采用flex布局的元素，称为flex容器，简称"容器"；
它的所有子元素自动成为容器成员，称为flex项目，简称"项目"。
原理总结：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

flex布局父项常见属性

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

flex-direction

属性值
row	(默认值)从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

justify-content

属性值
flex-start	默认值从头部开始，如果主轴是x轴，则从左到右
flex-end	从尾部开始
center	在主轴居中对齐（主轴是x轴则水平居中）
space-around	平分剩余空间
space-between	先两边贴边，再平分剩余空间

flex-wrap

属性值
nowrap	不换行（默认值）
wrap	换行

align-items

属性值
flex-start	从上到下
flex-end	从下到上
center	挤在一起居中（垂直居中）
stretch	拉伸（默认值，去掉高度）

align-content

属性值
flex-start	（默认值）在侧轴的头部开始排列
flex-end	在侧轴尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，再平分剩余空间
stretch	设置子项元素高度平分父元素高度

flex-flow

flex-flow:row wrap;

flex布局子项常见属性

flex

子项占的份数。

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

align-self

控制子项自己在侧轴的排列方式。

order

定义项目的排列顺序。

数值越小，排列越靠前，默认为0。

文章内容为观看他人视频学习笔记，仅个人学习记录