首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【CSS】布局属性:Flex

【CSS】布局属性:Flex

作者头像
毛大姑娘
发布2021-05-06 10:10:30
7650
发布2021-05-06 10:10:30
举报
文章被收录于专栏:向全栈出发向全栈出发

前面讲了几个css原生的布局属性,都是css传统布局属性。

今天来讲一下目前最主流布局属性:Flex

一、什么是Flex

Flex 是 Flexible Box 的缩写,意为"弹性布局"。

Flex布局的出现是为了弥补floatposition等布局属性的不足(比如控制多个子元素的排列方式)。

Flex布局可以很方便地实现目前市面上大部分的视觉设计。

二、Flex语法

display:flex

display: flex; 表示使用flex布局进行排版。 display: inline-flex; 表示行内元素的flex布局方式。

设为 Flex 布局以后,子元素的floatclearvertical-align属性将失效

flex-wrap: wrap;

flex-wrap决定子控件是否换行,怎么换行。

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

flex-wrap属性

作用

nowrap

不换行,超出部分不显示

wrap

换行,从上往下排列

wrap-reverse

换行,从下往上排列

flex-direction: row;

flex-direction决定子控件的排列方向。

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

flex-direction属性

作用

row

主轴水平方向,从左往右

row-reverse

主轴水平方向,从右往左

column

主轴垂直方向,从上往下

column-reverse

主轴垂直方向,从下往上

justify-content:center;

justify-content:在主轴方向基础上,子元素水平方向上的排列方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

justify-content属性

作用(在主轴方向基础上水平排列)

flex-start(默认值)

从左往右

flex-end

从右往左

center

水平居中

space-between

两端对齐,子元素之间的间距相等

space-around

每个子元素两侧的间距相等

align-items:center;

align-items:在主轴方向基础上,子元素垂直方向上的排列方式。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

align-items属性

作用(在主轴方向基础上垂直排列)

flex-start

靠上对齐

flex-end

靠下对齐

center

垂直居中

baseline

项目第一行文字的基线对齐

stretch(默认值)

如果项目未设置高度或设为auto,将占满整个容器的高度

align-content:center;

align-content:定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。 轴线可以理解为在justify-contentalign-items基础上的子元素排列。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

可以理解为:在align-items基础上的justify-content

align-items属性

作用(在主轴方向基础上垂直排列)

flex-start

靠上对齐

flex-end

靠下对齐

center

垂直居中

space-between

两端对齐,轴线之间的间隔平均分布

space-around

每个轴线两侧的间距相等

stretch(默认值)

轴线占满整个容器高度

子元素属性

上面都是针对父布局容器对子元素的排列方式,子元素可以设置哪些属性呢?

align-content:定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。 轴线可以理解为在justify-contentalign-items基础上的子元素排列。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

子元素属性

作用

order (默认值:0)

属性定义项目的排列顺序。数值越小,排列越靠前

flex-grow(默认值:0)

属性定义项目的放大比例,如果存在剩余空间,也不放大。

flex-shrink(默认值:1)

属性定义了项目的缩小比例,如果空间不足,该项目将缩小

flex-basis(默认值:auto)

属性定义了在分配多余空间之前,项目占据的主轴空间

flex(默认值:0 1 auto)

是flex-grow, flex-shrink 和 flex-basis的简写

align-self(默认值:auto)

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

注意事项

  • 如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)
  • 如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
  • flex-basis可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。

三、Flex兼容性

flex不是所有浏览器都兼容,也不是所有手机都兼容,当遇到兼容问题时,需要用传统的css布局语法进行适配。

安利一个兼容性查询网站:https://caniuse.com/

Flex在各大浏览器的支持情况:

感谢阮一峰老师提供的优质教学文章: Flex 布局教程:语法篇 Flex 布局教程:实例篇

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、什么是Flex
  • 二、Flex语法
    • display:flex
      • flex-wrap: wrap;
        • flex-direction: row;
          • justify-content:center;
            • align-items:center;
              • align-content:center;
                • 子元素属性
                • 三、Flex兼容性
                相关产品与服务
                容器服务
                腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
                领券
                问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档