前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS3弹性盒子

CSS3弹性盒子

原创
作者头像
YangAir
修改2020-02-24 10:28:02
1.4K0
修改2020-02-24 10:28:02
举报
文章被收录于专栏:YangAir的IT知识小阁楼

弹性盒模型的一些知识

一、简单介绍

弹性盒模型( Flexible Box或FlexBox)是一个CSS3新增布局模块,官方称为CSS Flexible Box Layout Module,用于实现容器里项目的对齐、方向、排序(即使在项目大小位置、动态生成的情况), 分配空白空间 。弹性盒模型最大的特性在于,能够动态修改子元素的宽度和高度,以满足在不同尺寸屏幕下的恰当布局。

二、基本知识

弹性盒子是由弹性容器(flex container)和弹性子元素(flex item)组成,弹性盒子有一个主轴(main axis)和一个纵轴(cross axis),弹性子元素沿着主轴依次排列 ,侧轴垂直于主轴。弹性容器的主轴开始(main start)、主轴结束(main end)和侧轴开始(cross start)、侧轴结束(cross end)代表了弹性子元素排列的起始和结束位置。具体可以看下面的图。

弹性盒子组成示意图
弹性盒子组成示意图

三、属性分类

1. 弹性容器的相关属性

属性

属性说明

flex-direction

设置主轴方向,确定弹性子元素的排列方式

flex-wrap

当弹性子元素超出弹性容器范围时是否换行

flex-flow

flex-direction和flex-wrap的快捷方式,复合属性

justify-content

设置弹性子元素主轴上的对齐方式

align-items

设置弹性子元素侧轴上的对齐方式

align-content

侧轴上有空白时且有多行时,设置弹性子元素侧轴的对齐方式

a. flex-direction属性

使用方法:flex-direction:row |row-reverse |column |column-reverse

属性值

含义

row(默认值)

主轴为水平方向。排序方向与页面的文档顺序相同。如果文档顺序是ltr,则排列顺序是从左到右;如果文档顺序是rtl,则排列顺序是从右到左。

row-reverse

主轴为水平方向。排序方向与页面的文档顺序相反。

column

主轴为垂直方向。排列顺序为从上到下

column-reverse

主轴为垂直方向。排列顺序为从下到上

其属性的效果图如下:

b. flex-wrap属性

使用方法:flex-wrap: nowrap | wrap | wrap-reverse

属性值

含义

nowrap(默认值)

溢出时不换行

wrap

溢出时自动换行

wrap-reverse

溢出时自动换行,翻转排列

其效果图如下:

c. flex-flow属性

使用方法:flex-flow: [flex-direction] || [flex-wrap] 含义:复合属性(flex-direction和flex-wrap),设置弹性子元素的排列方式

d. justify-content属性

使用方法:justify-content: flex-start | flex-end | center | space-between | space-around

属性值

含义

flex-start(默认值)

主轴开始对齐,主轴为横轴,ltr环境下,左对齐

flex-end

主轴结束对齐,主轴为横轴,ltr环境下,右对齐

center

居中对齐

space-between

第一个、最后一个对齐弹性容器的边缘,其余均匀分布

space-around

全部均匀分布

其效果图如下:

e. align-items属性

使用方法:align-items: flex-start | flex-end | center | baseline | stretch

属性值

含义

flex-start

侧轴开始对齐,主轴为横轴,顶对齐

flex-end

侧轴结束对齐

center

居中对齐

baseline

基线对齐

stretch(默认值)

从侧轴开始到侧轴结束铺满整个侧轴

其效果图如下:

f. align-content属性

使用方法:align-content: flex-start | flex-end | center | space-between | space-around | stretch

属性值

含义

flex-start

主轴开始对齐,主轴为横轴,ltr环境下,左对齐

flex-end

主轴结束对齐,主轴为横轴,ltr环境下,右对齐

center

居中对齐

space-between

第一个、最后一个对齐弹性容器的边缘,其余均匀分布

space-around

全部均匀分布

stretch(默认值)

各行伸展以占用剩余空间。如果剩余空间是负数,该值等效于flex-start

其效果图如下:

2. 弹性子元素的相关属性

属性值

含义

order

控制弹性容器里子元素的顺序,数值小的排在前面,可以为负值

flex-grow

设置弹性子元素的扩展比率

flex-shrink

设置弹性子元素的收缩比率

flex-basis

指定弹性子元素伸缩前的默认大小值,相当于width和height属性

flex

flex-grow,flex-shrink和flex-basis属性的复合属性

align-self

允许独立的弹性子元素覆盖弹性容器的默认对齐设置(align-items)

a. order属性

使用方法:order: integer number

其属性效果图如下:

b. flex-grow属性

使用方法:flex-grow: number 含义:设置弹性子元素的扩展比率,不允许为负值,默认值为0。根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。

其属性效果图如下:

c. flex-shrink属性

使用方法:flex-shrink: number 含义:设置弹性子元素的收缩比率,不允许为负值,默认值为1。根据弹性盒子元素所设置的扩展因子作为比率来收缩空间。

其属性效果图如下:

d. flex-basis属性

使用方法:flex-basis: <length> | <percentage> | auto 含义:设置弹性子元素的伸缩基准值,不允许为负值。默认值为auto,无特定宽度(高度)。

e. flex属性

使用方法:flex: none | [flex-grow] || [flex-shrink] || [flex-basis 含义:复合属性,设置弹性子元素的如何分配空间

f. align-self属性

使用方法:auto | flex-start | flex-end | center | baseline | stretch 含义:设置弹性子元素的在侧轴上的对齐方式,与align-items相同。设置某个弹性子元素的对立对齐方式。

其属性效果图如下:

3. 多列属性详解

1)基础知识

多列(Multi-column)是一个CSS3新增布局模块,官方称为Multiple column layout,可以比较轻松的实现多列布局,比如图片瀑布流。

2)属性一览

属性

属性说明

columns

复合属性(column-width和column-count),设置宽度和列数

column-width

设置每列的宽度

column-count

设置列数

column-gap

设置列之间的间隙

column-rule

复合属性(column-rule-width、column-rule-style和column-rule-color),设置列之间的边框样式

column-fill

设置列的高度是否统一

column-span

设置是否横跨所有列

a. column-width属性

使用方法:column-width: length | auto

属性值

含义

auto(默认值)

浏览器决定列的宽度

length

用长度值来定义列宽。不允许负值

b. column-count属性

使用方法: column-count: integer number | auto

属性值

含义

auto(默认值)

列数将取决于其他属性,例如:"column-width"

imteger number

用整数值来定义列数,列的最佳数目将其中的元素的内容无法流出。

c. columns属性

使用方法:columns: [column-width]|[column-count] 含义:复合属性设置列的宽度和个数

d. column-gap属性

使用方法:column-gap: length | normal

属性值

含义

normal(默认值)

与font-size大小相同。假设该对象的font-size为16px,则normal的值为16px,以此类推。

length

用长度来定义列与列之间的间隙。不允许为负值。

e. column-rule属性

使用方法:column-rule: [column-rule-width] || [column-rule-style] || [column-rule-color] 含义:设置列与列之间的边框,和border属性相似

属性值

含义

column-rule-width

设置列与列之间的边框的厚度

column-rule-style

设置列与列之间的边框的样式

column-rule-color

设置列与列之间的边框的颜色

f. column-fill属性

使用方法:column-fill: auto | balance 含义:设置所有列的高度是否统一

属性值

含义

auto(默认值)

列高度自适应内容

balance

所有列的高度以其中最高的一列统一

g. column-span属性

使用方法:column-span: none | all 含义:对象元素是否横跨所有列

属性值

含义

none(默认值)

不跨列

all

横跨所有列

CSS3弹性盒子的基本知识就是这些了,如果有错的话,我会及时更改的!这篇文章就到此结束了,???

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、简单介绍
  • 二、基本知识
  • 三、属性分类
    • 1. 弹性容器的相关属性
      • a. flex-direction属性
      • b. flex-wrap属性
      • c. flex-flow属性
      • d. justify-content属性
      • e. align-items属性
      • f. align-content属性
    • 2. 弹性子元素的相关属性
      • a. order属性
      • b. flex-grow属性
      • c. flex-shrink属性
      • d. flex-basis属性
      • e. flex属性
      • f. align-self属性
    • 3. 多列属性详解
      • 1)基础知识
      • 2)属性一览
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档