flex 移动开发 html5,在H5开发中flex布局方式的属性详解

flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局 ,不管你是块元素还是行内元素都将被改变成盒状模型 ,可以直接改变盒子大小.

我们知道flex布局就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式 ，那么关于flex属性有哪些 ，又怎么去用呢？

flex的属性通常分为两个部分：一是给父盒子添加的属性也叫父项属性 ， 二是给子盒子添加的属性也叫子项属性

下面来看看我们常用的flex父子项属性有哪些?

一父项常见属性(父盒子)

flex-direction：设置主轴的方向

在 flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有 ： 行和列、x 轴和y 轴

注意： 主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的

下面做一些对比例子

给div设置flex属性给span直接设置宽高

三个span默认沿着x轴排列

改变主轴方向为column

三个span就沿着y轴方向排列

justify-content：设置主轴上的子元素排列方式

注意： 使用这个属性之前一定要确定好主轴是哪个

justify-content的属性zhi

还是上面图中的盒子下面是一些属性对比

soace-between两边贴边再平f

贴在蓝色父盒子两边

space-around平分剩余空间

盒子平分三个空间

flex-wrap：设置子元素是否换行

默认情况下，项目都排在一条线(又称”轴线”)上。flex-wrap属性定义，flex布局中默认是不换行的 ,但是如果我们一行有好几个盒子而父盒子宽度又不够宽的话不换行它就会自动改变盒子大小影响布局。

(1)nowrap 不换行(默认)

注意:换行同样会根据主轴方向排列

父盒子不够宽子盒子自动变小

(2)wrap 换行

另开yi'h不会影响小盒子大小

align-content：设置侧轴上的子元素的排列方式(多行)

设置子项在侧轴(默认Y轴)上的排列方式 并且只能用于子项出现 换行 的情况(多行)，在单行下是没有效果的。也就是说只有设置了flex-wrap:wrap 这个属性才能用(注意是控制侧轴变化)

换行you'xiao

换行后居中

center居中开始排列

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

该属性是控制子项在侧轴(默认是y轴)上的排列方式 在子项为单项(单行)的时候使用(注意是控制侧轴变化)就是不换行时用

flex-start 从头部开始(默认)

(1)flex-end 从尾部开始

end从侧轴底部开始排

(2)center 居中显示

align-items：center侧轴居中排列

(3)stretch 拉伸(不常用)

flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性:

flex-flow: column wrap;设置y轴为主轴并换行

二flex布局子项常见属性

flex子项目占的份数

flex 属性定义子项目分配剩余空间，用flex来表示占多少份数。flex: ;默认是 flex:0;

同样的盒子

子盒子设置flex属性

1号占2份2号占1份3号用剩下空间

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

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

默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

给3号子盒子设置属性end底部开始排lie

3号单独在底部排列

order属性定义子项的排列顺序(前后顺序)改变子项盒子的顺序

给2号盒子改变顺序

2号就排在了第一wei

关于flex常用的父项和子项属性的详细用法就这些了 ,希望大家多多关注 , 一起学习交流.

举报/反馈