出售本站及域名另本站所有内容只为模板风格演示效果,内容均不作为参考和见证,请移步学习吧一起学习,如有什么建议可与QQ5793302联系!

kissxq

注册会员2020-08-04 20:41:16

弹性布局(display:flex;)属性详解【CSS教程】

弹性布局(display:flex;)属性详解

Flexbox 是 flexible box 的简称(注:意思是“灵活的盒子容器”),是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸和设备下可预测地展现出来。

它之所以被称为 Flexbox ,是因为它能够扩展和收缩 flex 容器内的元素,以最大限度地填充可用空间。与以前布局方式(如 table 布局和浮动元素内嵌块元素)相比,Flexbox 是一个更强大的方式:

  • 在不同方向排列元素

  • 重新排列元素的显示顺序

  • 更改元素的对齐方式

  • 动态地将元素装入容器

 

一、基本概念

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

弹性布局(display:flex;)属性详解【CSS教程】(图1)

在 Flexbox 模型中,有三个核心概念:
– flex 项(注:也称 flex 子元素),需要布局的元素
– flex 容器,其包含 flex 项
– 排列方向(direction),这决定了 flex 项的布局方向

 

 二、容器属性

弹性布局(display:flex;)属性详解【CSS教程】(图2)

 

2.1  flex-direction:

  • row(默认值):主轴为水平方向,起点在左端。

  • row-reverse:主轴为水平方向,起点在右端。

  • column:主轴为垂直方向,起点在上沿。

  • column-reverse:主轴为垂直方向,起点在下沿。

弹性布局(display:flex;)属性详解【CSS教程】(图3)

 

 

2.2   flex-wrap:

  • nowrap(默认):不换行。

  • wrap:换行,第一行在上方。

  • wrap-reverse:换行,第一行在下方。

 

2.3  justify-content:

  • flex-start(默认值):左对齐

  • flex-end:右对齐

  • center: 居中

  • space-between:两端对齐,项目之间的间隔都相等。

  • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

弹性布局(display:flex;)属性详解【CSS教程】(图4)

2.4  align-items:

  • flex-start:交叉轴的起点对齐。

  • flex-end:交叉轴的终点对齐。

  • center:交叉轴的中点对齐。

  • baseline: 项目的第一行文字的基线对齐。

  • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

弹性布局(display:flex;)属性详解【CSS教程】(图5)

 

2.5  align-content:

定义了多根轴线的对齐方式,如果项目只有一根轴线,那么该属性将不起作用

  • flex-start:与交叉轴的起点对齐。

  • flex-end:与交叉轴的终点对齐。

  • center:与交叉轴的中点对齐。

  • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。

  • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

  • stretch(默认值):轴线占满整个交叉轴。

 

弹性布局(display:flex;)属性详解【CSS教程】(图6)

结合 justify-contentalign-items,看看在 flex-direction 两个不同属性值的作用下,轴心有什么不同:

弹性布局(display:flex;)属性详解【CSS教程】(图7)

 三、项目属性

弹性布局(display:flex;)属性详解【CSS教程】(图8)

 



"收藏是宝,翻阅是金"
加入收藏
本站文章如没有特殊说明,均采集网上收集,若要转载请务必注明出处,尊重他人劳动成果共创和谐网络环境。 声明:某些文章来源于网络,所采集的到信息本站只为传递信息和分享,不做任何双方证明,也不承担任何法律责任。 文章内容若侵犯你的权益,请联系本站客服删除!本文地址:https://www.2jc.cn/article/leam/659.html
人阅读

发表评论

加载中~
嘿,我来帮您!

VIP · 会员全站通免费下载

1,全站任意主题资源免费下载

2,专属客服一对一服务

3,积分规则:点击查看