前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >移动web开发之flex布局(弹性布局)

移动web开发之flex布局(弹性布局)

作者头像
星辰_大海
发布2020-09-30 11:41:24
1K0
发布2020-09-30 11:41:24
举报
文章被收录于专栏:h5学习笔记h5学习笔记

1 flex布局

1.1传统布局与flex布局
传统布局
  • 兼容性好
  • 布局繁琐
  • 局限性,不能在移动端很好的布局
flex弹性布局
  • 操作方便布局极为简单,移动端应用广泛
  • PC端浏览器支持情况较差
  • IE11或更低版本不支持或仅部分支持
1.2布局原理

flex是flexible Box的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局。

  • 当我们把父盒子设为flex布局后(display: flex;),子元素的float、clear和vertical-align属性都将失效
  • 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

采用flex布局的元素,称为flex容器(flex container),简称“容器”。它的所有子元素自动成为容器成员,称为flex项目(flex item),简称“项目”。

总结:就是通过给父盒子添加flex属性(display: flex;),来控制子盒子的位置和排列方式

1.3 flex布局父项常见属性

以下六个属性是对父元素设置的
  • flex -direction:设置主轴方向
  • justify-content:设置主轴上的子元素排列方式
  • flex-wrap:设置子元素是否换行
  • align-content:设置侧轴上的子元素的排列方式(多行)
  • align-items:设置侧轴上的子元素排列方式(单行)
  • flex-flow:复合属性,相当于同时设置了flex-direction和flex-wrap
1.3.1 flex-direction设置主轴的方向

主轴与侧轴

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

  • 默认主轴方向就是x轴方向,水平向右
  • 默认侧轴方向就是y轴方向,水平向下

属性值

flex-direction属性决定主轴的方向(即项目排列的方向)

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

属性值

说明

row

默认值从左到右

row-reverse

从右到左

column

从上到下

column-reverse

从下到上

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

justify-content属性定义了项目在主轴上的对齐方式

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

属性值

说明

flex-start

默认值 从头开始 如果主轴是x轴,则从左到右

flex-end

从尾部开始排列

center

主轴居中对齐(如果主轴是x轴则水平居中)

space-around

平分剩余空间

space-between

先两边贴边 再平分剩余空间(重要)

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

默认情况下,项目都排列在一条线上(又称轴线)上,flex-wrap属性定义,flex布局中默认是不换行的

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

该属性控制子项在侧轴(默认是y轴)上的排列方式 ,在子项为单项(单行)时使用

属性值

说明

flex-start

从上到下

flex-end

从下到上

center

挤在一起(垂直居中)

stretch

拉伸(默认值)有高度不能拉伸

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

设置子项在侧轴上的排列方式,并且只能用于子项出现换行的情况(多行),在单行下是没有效果的。

属性值

说明

flex-start

默认值在侧轴的头部开始排列

flex-end

在侧轴的尾部开始排列

center

在侧轴中间显示

space-around

子项在侧轴平分剩余空间

space-between

子项在侧轴西安分部在两头,在平分剩余空间

stretch

设置子项元素高度平分父元素高度

align-content和align-items区别
  • align-items适用于单行情况下,只有上对齐、下对齐、居中和拉伸
  • align-content适用于换行(多行)情况下(单行情况下无效),可设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值
1.3.6 flex-flow

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

flex-flow:row wrap;设置主轴为x轴,换行

属性值

说明

no-wrap

默认值,不换行

wrap

换行

1.4 flex布局子项常见属性

1.4.1 flex属性

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

可为数字,也可为百分比,百分比相对于父级来说

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

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

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

1.4.3 order属性定义项目的排列顺序

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

注意:和z-index不一样。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-08-12 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1 flex布局
    • 1.1传统布局与flex布局
      • 传统布局
        • flex弹性布局
          • 1.2布局原理
          • 1.3 flex布局父项常见属性
            • 以下六个属性是对父元素设置的
              • 1.3.1 flex-direction设置主轴的方向
                • 1.3.2 justify-content设置主轴上子元素排列方式
                  • 1.3.3flex-wrap设置子元素是否换行
                    • 1.3.4 align-items设置侧轴上子元素排列方式(单行)
                      • 1.3.5align-content设置侧轴上的子元素的排列方式(多行)
                        • align-content和align-items区别
                          • 1.3.6 flex-flow
                          • 1.4 flex布局子项常见属性
                            • 1.4.1 flex属性
                              • 1.4.2align-self控制子项自己在侧轴上的排列方式
                                • 1.4.3 order属性定义项目的排列顺序
                                相关产品与服务
                                容器服务
                                腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
                                领券
                                问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档