采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”任何一个元素都可以指定为Flex布局
display:flex | inline-flex 定义弹性伸缩盒容器类型
-
flex 将对象作为块级弹性弹性盒模型。
-
inline-flex 将对象作为内联块级弹性弹性盒模型。
注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
容器的属性
- flex-direction 排列盒子方向
- row(默认): 横向从左到右排列(横向 )。
- row-reverse: 对齐方式与row相反。 (倒序排列)
- column: 纵向从上往下排列(纵向)。
- column-reverse:对齐方式与column相反。 (倒序排列)
- flex-wrap 换行方式
- flex-wrap:nowrap | wrap | wrap-reverse 控制flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向
- nowrap(默认): flex容器为单行,不换行
- wrap: flex容器为多行。超出换行
- wrap-reverse:反转 wrap 排列
- flex-****flow集合属性,同时定义flex-direction和flex-wrap
- justify-content在主轴方向上的项目对齐方式
- Flex-start(默认) 主轴起点对齐
- Flex-end 主轴终点对齐
- Center 主轴居中
- Space-between 主轴两端对齐,项目之间间隔相等
- Space-around 主轴每个项目两侧间隔相等,项目之间的间隔比项目到边框的间隔大一倍
- align-items 项目在交叉轴上的对齐方式
- Flex-start 交叉轴起点对齐
- Flex-end 交叉轴终点对齐
- Center 交叉轴居中
- Space-between 交叉轴两端对齐,项目之间间隔相等
- Space-around 交叉轴每个项目两侧间隔相等,项目之间的间隔比项目到边框的间隔大一倍
- Stretch (默认)轴线占满整个交叉轴
- align-content 如果容器的交叉轴方向有富余空间,设置每行应该如何垂直对齐**。**(一般不用)
Flex-start Flex-end Center Space-between Space-around Stretch (默认) Space-evenly
项目的属性
- order 属性定义项目的排列顺序。数值越小,排列越靠前,默认为
0
- flex-grow 属性定义项目的放大比例,默认为
0
,即如果存在剩余空间,也不放大。 - flex-shrink 属性定义了项目的缩小比例,默认为
1
,即如果空间不足,该项目将缩小 - flex-basis 属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为
auto
,即项目的本来大小。 - flex 是
flex-grow
,flex-shrink
和flex-basis
的简写,默认值为0 1 auto
。后两个属性可选 - flex-self 允许单个项目有与其他项目不一样的对齐方式,可覆盖
align-items
属性。默认值为auto
,表示继承父元素的align-items
属性,如果没有父元素,则等同于stretch
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
该属性可能取6个值,除了auto,其他都与align-items属性完全一致。
实战开发
UI
1、在进行热猫商城页面开发时我们应该将页面的布局根据UI先进行一个大体的规划 这样较直接开发会有一个效率的提升。比如上方UI中的蓝色头部区域可以划分为上中下三块 其中下方的这一块可以在划分为左中右三块 这样可以使得结构变得清晰明了
2、在进行带有九宫格或者结构清晰明了的页面开发时推荐使用flex弹性盒子布局开发 好处:不必使用float定义浮动 不会随着页面宽高的变化打乱排版 不必定义过多属性只使用flex布局就可以完成页面的开发
3、对上方UI中的九宫格使用flex布局
.box{
width:100%;
display:flex;
flex-wrap:wrap;
justify-content:flex-start;
align-items:flex-start;
background:#fff;
box-sizing:border-box;
Padding:40rpx 10rpx;
} (flex容器 白色区域)
.box .item{
width:33%;
height:200rpx;
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:center;
box-sizing:border-box;
Padding:28rpx 0;
font-size:28rpx;
color:#000;
} (项目 白色区域内九宫格的每一项)
.box .item .img{ width:90rpx;height:90rpx} (项目中的图片)