移动端布局之Flex弹性布局

flex弹性布局
操作方便、布局简单、移动端应用广泛
flex布局原理:
通过给父盒子设置flex属性、来控制子盒子的位置和排列的方式

  1. 任何容器都可以指定为flex布局
  2. 为父盒子设置了之后、子元素的float、clear和vertical-align属性将失效
  3. 设为flex布局的元素、为flexcentainer容器、它的子元素称为flex项目
  4. flex项目也可以继续设置为flex容器

常见的父项的属性:

  • flex-direction:设置主轴的方向;
  • justify-content:设置主轴上的子元素排列方式
  • flex-warp:设置子元素是否换行
  • align-content:设置侧轴上的子元素的排列方式(多行)
  • align-items:设置侧轴上的子元素的排列方式(单行)
  • flex-flow:复合属性、同时设置了主轴方向(flex-direction)与是否换行(flex-warp)

flex-direction:主轴方向

  • flex中有主轴与侧轴、元素是根据主轴来排列的
  • 默认主轴是 row水平方向、 侧轴就是column 垂直方向
  • 也可以设置列column 垂直方向 那侧轴就是row 水平方向

flex-direction属性:

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

注意:主轴与侧轴是会变化的、主要是看flex-direction给谁设置为主轴 、剩下的就是侧轴、子元素是跟着主轴来排列的

主轴方向图

justify-content:设置主轴上的子元素排列方式
justify-content(属性):

属性值说明
flex-start默认从头部开始、主轴是x轴、则从左到右、
flex-end从尾部开始排列
center主轴居中对齐(主轴是x则水平对齐)
space-around平分剩余空间
space-between贴两边、在平分剩余空间

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

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

  • flex-wrap(属性): 默认情况下、项目都在一条轴线上的、默认不换行
属性值说明
nowrap默认、不换行
wrap换行

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

  • align-items(属性): 默认是y轴、在子项为单项的时候使用
属性值说明
flex-start从上到下
flex-end从下到上
center挤在一起居中(垂直居中)
stretch拉伸

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

  • align-content(属性): 用于子项目出现换行的情况(多行)、单行无效
属性值说明
flex-start默认侧轴头部开始排列
flex-end侧轴尾部开始排列
center侧轴中间显示
space-around在侧轴平分剩余空间
space-between侧轴贴两边、在平分剩余空间
stretch子项元素高度平分父元素高度

flex-flow 属性:主轴方向与是否换行的复合属性

flex-flow 属性:
说明:flex-direction(主轴方向)和 flex-wrap(是否换行) 属性的复合属性
//复合属性:水平方向 换行
flex-flow:row wrap;
align-content与align-items的区别
说明
align-items 适用用单行、只有上对齐、下对齐、居中与拉伸
align-content 适用于换行(多行)、单行无效、有上对齐、下对齐、居中与拉伸及平均分配剩余空间
总结就是单行找align-items、多行找align-content
在这里插入图片描述

item子项属性

  • item(属性):
属性值说明
flex控制项目自己所占容器剩余空间份数
align-self控制项目自己在侧轴上的排列方式
order控制顺序

背景线性渐变

  • 默认是从左到右
background:linear-gradient(属性):(起始方向、颜色、颜色2、…)
说明
background:-webkit-linear-gradient(left,red,blue)
background:-webkit-linear-gradient(left top,red)从左上斜角覆盖

Flex弹性布局1
Flex2

flex布局用于排版、rem布局负责等比缩放、很完美

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值