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

小秋同学 08-04 20:41:16 学习园地
摘要: 弹性布局(display:flex;)属性详解Flexbox 是 flexible box 的简称(注:意思是“灵活的盒子容器”),是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸摘要: 弹性布局(display:flex;)属性详解Flexbox 是 flexible box 的简称(注:意思是“灵活的盒子容器”),是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸

弹性布局(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.qiuhai.com/study/659.html发布于 08-04 20:41:16
文章转载或复制请以超链接形式并注明出处学习吧_一个不错的学习网站
本站文章如没有特殊说明,均采集网上收集,若要转载请务必注明出处,尊重他人劳动成果共创和谐网络环境。 声明:某些文章来源于网络,所采集的到信息本站只为传递信息和分享,不做任何双方证明,也不承担任何法律责任。 文章内容若侵犯你的权益,请联系本站客服删除!

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享
加入收藏

发表评论
加载中~