醉梦孤城的个人博客

记录我旅程美好的风景

Open Source, Open Mind,
Open Sight, Open Future!
  menu
9 文章
19681 浏览
1 当前访客
ღゝ◡╹)ノ❤️

基于h5的移动端开发之flex布局

浅谈h5之flex布局

1、什么是flex布局

flex布局是一种 h5的布局方式。又名叫伸缩布局、弹性布局、伸缩盒布局、弹性盒布局;相比较与传统布局来说,flex布局操作方便,布局也非常简单,在移动端的开发过程中使用非常的广泛。但是缺点也是很明显,flex布局在pc端的兼容性特别差。一般pc端开发很少使用flex布局。使用传统布局较多。

2、flex布局属性

1.重要属性

flex-direction!!!确认主轴方向

语法:

flex-direction:row;
属性作用
row默认值从左到右
row-reverse从右到左
column从上到下
column-reverse从下到上

此属性在flex布局中非常重要,改变此属性就是改变主轴的选择,即选择一个轴为主轴,而剩下的那个轴自动成为为侧轴。当前的元素会按照主轴的正方向进行排列。

align-items!!!

该属性是控制子元素在侧轴上的排列方式。可以把一行元素或者一列元素看成整体设置其在侧轴上的对齐方式

属性作用
flex-start默认值从上到下
flex-end从下到上
center垂直居中
stretch拉伸

其中stretch:侧轴方向上进行拉伸

flex!!!

子元素属性,单独控制元素所占的剩于空间、侧轴排列方式、顺序等;
语法

.son {
    /* 默认值 0 flex来表示占多少份数,不设置宽高,在宽高方向全部进行剩余空间的划分*/
    flex: 整数(编译器会自动计算所有子元素的数值之和然后根据数值进行剩于空间的分配); 
    
    /* 分配剩余空间的百分比,使用%百分时需要特别注意,必须加起来是百分之百 不然会按照元素个数进行平均分配*/
    flex: 20%; 
}

而且通过flex属性我们还能很轻松的做出左侧固定,右侧随意拉伸的效果。

2、一般属性

1.justify-content

作用是控制主轴上元素的对齐方式,简单点来说就是相当于文档中的左对齐,右对齐,居中对齐效果。
语法值:

属性作用
flex-start默认值从头部开始,举例如果主轴是x轴则从左到右
flex-end从尾部开始排列
center在主轴居中对齐,主轴不同效果不同
space-around平分剩于空间
space-between先贴近两边,在平分剩余的空间(比较重要)

在这几个属性中space-around和space-between在实际的开发中使用较多

2. flex-warp

控制子元素宽度或者高度之和大于父元素的大小(宽度和高度视主轴而定)是否换行,一般默认值为不换行nowarp语法如下

/* 不换行;子项目加起来的宽度超过父级的宽度时,子项宽度会被缩小,宽度只是不生效,必须设置 */
flex-wrap: nowrap;

/* 换行; 子项的总宽加起来超过父级宽度,就会换行*/
flex-wrap:wrap;

3.flex-flow(只需了解)

复合属性,用来设置主轴方向和是否换行,实际应用不多。

flex-flow:row wrap;
4.align-content

设置子项在侧轴上的排列方式 ,并且只能用于子项出现 换行 的情况(多行)

属性作用
flex-start默认值从侧轴头部开始
flex-end从侧轴尾部开始排列
center在侧轴中间显示
space-around子元素在侧轴平分剩于空间
space-between子元素在侧轴先贴近两边,在平分剩余的空间
stretch设置子元素高度平分父元素的高度

注意!!!:
1.使用align-content是需要先设置换行;
2.space-around和 space-between:把多行都看成单独的整体,整体之间有剩余空间平分。

3.stretch:在侧轴方向上会拉伸;

5.align-self

控制子元素在自己的侧轴上的对齐方式,同时父元素也能控制子元素在侧轴上的对齐方式:align-items属性。而且该属性能允许单个项目与其他项目不相同的侧轴对齐方式。还可以覆盖掉align-items属性
语法:

属性作用
flex-start默认值从上到下
flex-end从下到上
center垂直居中
stretch拉伸

需要注意:
1.align-self一般默认值为auto,表示能继承父元素的align-self属性
2.但是如果父元素没有设置align-items属性,子元素的align-items的默认值就从auto变成了strecth。
3.通常是配合flex属性使用,主轴方向自动划分份数。侧轴方向自动拉伸。

6.order(只需了解)

语法:

//属性定义子项目的排列顺序,数值越小,排列越靠前,默认为0。
//可以设置负值但是,这里和z-index不一样。这里表示的位数。
.item {
    order:整数;
}

个人觉得很鸡肋的一个属性,不建议使用。
以上就是博主最近学习html移动端开发布局之flex布局的一点感悟,分享给大家,当然有不同见解的童鞋可以私聊博主进行讨论。欢迎骚扰。


标题:基于h5的移动端开发之flex布局
作者:zuimenggucheng
地址:http://chengwy.top:8080/articles/2019/08/17/1566046906717.html