深入解析弹性盒模型的所有属性(图文)

导读 .markdown-body{color:#383838;font-size:15px;line-h.....

本文为转载,原地址为:https://juejin.cn/post/7065296076995035166

写在前面

弹性盒模型即FlexBox,也就是我们常说的flex布局,现在flex布局已经是前端的主流布局方案,长期以来一直是前端的必备内容。让我们来看看弹性盒模型。css视频教程】

相关概念

CSS3.新的弹性盒模型是一个完整的模块,涉及更多的风格属性。首先,基本了解弹性盒模型的相关概念。

2c59c59f1909a0c1579a1dc4fe74561.jpg

  • 伸缩容器(flex container):包裹伸缩项目的父要素。
  • 伸缩项目(flex item):伸缩容器的每个子元素。
  • 轴(axis):每个弹性盒模型有两个轴。
    • 主轴(main axis):沿第一次排列的伸缩轴称为主轴。
    • 侧轴(cross axis):垂直于主轴的轴称为侧轴。
    • 方向(direction):伸缩容器的主轴由主轴起点和主轴终点,侧轴由侧轴起点和侧轴终点描述伸缩项目排列的方向。
  • 尺寸(dimension):伸缩工程的宽度和高度取决于伸缩容器的主轴和侧轴。
    • 对应的主轴称为主轴尺寸。
    • 对应侧轴称为侧轴尺寸。

定义弹性盒模型

CSS如果3想设置为弹性盒模型,需要通过display样式属性设置值为flexinline-flex即可。

display: flex; /* 值 flex 使弹性容器成为块级元素。 */ /* 或者 */ display: inline-flex; /* 值 inline-flex 使弹性容器成为单个不可分割的行内元素。 */

以上代码可以指定某一元素为弹性盒模型,该元素成为伸缩容器,子元素成为伸缩项目。

值得注意的是,如果需要与旧版本的浏览器兼容,则需要添加浏览器制造商的前缀。

以下代码定义了一个简单的弹性盒:

html

<body>   <!-- HTML 结构为父子结构 -->   <div class="container">     <div class="item1 item">1</div>     <div class="item2 item">2</div>     <div class="item3 item">3</div>   </div> </body>

css

.container {   display: flex;/* 忽略基本风格 */ }

效果如下:

a53d3b6664ae886dd1fccf5d17662c3.jpg

默认情况下,所有子元素作为伸缩工程都沿主轴水平排列。

与容器相关的属性

flex-direction属性

CSS中的flex-direction内部元素是如何指定属性的?flex主轴的方向(正方向或反方向)定义在容器中。语法结构如下:

flex-direction: row | row-reverse | column | column-reverse;
  • row:默认值,flex容器的主轴定义为与文本方向相同。主轴的起点和终点与内容方向相同(起点在左端)。
  • row-reverse:表现和row相同,但更换了主轴起点和主轴终点(起点在右端)
  • columnflex容器的主轴和块轴相同。主轴的起点与主轴的终点和书写模式的前后点相同(上边缘的起点)
  • column-reverse:表现和column相同,但更换了主轴起点和主轴终点(起点在下边)

以下代码显示了每个值:

.row {   /* 默认,水平排列 */   flex-direction: row;   height: 200px; } .row-reverse {   /* 水平排列,反向 */   flex-direction: row-reverse;   height: 200px; } .column {   /* 垂直排列 */   flex-direction: column;   margin-right: 100px; } .column-reverse {   /* 垂直排列 反向 */   flex-direction: column-reverse; }

如下:

b0b6ec9e8dbb231cd11aaf7b28a3f8a.jpg

justify-content属性

CSS中的justify-content属性适用于伸缩容器元素,用于设置伸缩项目沿着主轴对齐

语法结构如下:

justify-content: center| flex-start| flex-end| space-between| space-around;
  • center:伸缩工程与第一行中间位置对齐(中间)。
  • flex-start:伸缩项目对齐第一行的开始位置(左对齐)。
  • flex-end:伸缩项目对齐第一行结束位置(右对齐)。
  • space-between:伸缩工程平均分布在一行中(两端对齐,工程间隔相等)。
  • space-around:伸缩工程平均分布在一行中(两端对齐,两侧间隔相等)。

示例代码如下:

.center {   justify-content: center; /* 居中 */ } .start {   justify-content: flex-start; /* 左对齐 */ } .end {   justify-content: flex-end; /* 右对齐 */ } .between {   justify-content: space-between; /* 两端对齐,项目间隔相等 */ } .around {   justify-content: space-around; /* 两端对齐,项目两侧间隔相等 */ }

e951f428e7b7d848d3df3d9e19a03db.jpg

值得注意的是,与伸缩容器相比,伸缩工程与页面无关

align-items属性

CSS中的align-items属性适用于伸缩容器元素的设置侧轴对齐

语法结构如下:

align-items: center | flex-start| flex-end| baseline| stretch;
  • center:伸缩工程对齐侧轴的中间位置。
  • flex-start:伸缩工程对齐侧轴的起点。
  • flex-end:伸缩工程对齐侧轴的终点。
  • baseline:伸缩工程按伸缩工程基线对齐。
  • stretch:默认值,伸缩工程拉伸填充整个伸缩容器。

示例代码如下:

.center {   align-items: center; /* 居中 */ } .start {   align-items: flex-start; /* 顶对齐 */ } .end {   align-items: flex-end; /* 底对齐 */ }

如下:

9b1aea7ac0f927da85332559477a4b0.jpg

配合justify-content属性可以做成水平垂直居中

flex-wrap属性

CSS中的flex-wrap属性适用于伸缩容器元素设置伸缩容器的子元素是单行显示还是多行显示

语法结构如下:

flex-wrap: nowrap| wrap| wrap-reverse
  • nowrap:设置伸缩工程单独显示。这可能会导致溢出伸缩容器
  • wrap:多行显示设置伸缩项目,第一行在上面。
  • wrap-reverse:与wrap相反,第一行在下面。

示例代码如下:

.nowrap {   /* 单行显示 */   flex-wrap: nowrap; } .wrap {   /* 多行 */   flex-wrap: wrap; } .wrap-reverse {   /* 多行,反向 */   flex-wrap: wrap-reverse; }

c0e98aa521356652e0dceeb0de7f495.jpg

如果伸缩容器的宽度小于所有子元素的宽度之和,则子元素不会自动更换或溢出;所有子元素的宽度根据伸缩容器的宽度自动调整。

align-content属性

CSS中的align-content该属性适用于设置伸缩容器元素伸缩行对齐方式。该属性将改变flex-wrap属性的效果。

语法结构如下:

align-content: center| flex-start| flex-end| space-between| space-around| stretch;
  • center:对齐各行向伸缩容器的中间位置。
  • flex-start:对齐各行向伸缩容器的起点。
  • flex-end:各行对齐伸缩容器的终点位置。
  • space-between:各行会平均分布在一行。
  • space-around:各行平均分布在一行中,两端保留一半空间。
  • stretch:默认值,各行将扩展以占用额外的空间。

值得注意的是该属性对单行弹性盒模型无效。

示例代码如下:

.center {   align-content: center;  /* 居中 */} .start {   align-content: flex-start;  /* 顶对齐 */ } .end {   align-content: flex-end;  /* 底对齐 */ } .between {   align-content: space-between;  /* 两端对齐,项目间隔相等 */ } .around {   align-content: space-around;  /* 两端对齐,项目两侧的间隔相等 */ }

b390d914fcdeccf96e7bf8a5e4b4765.jpg

值得注意的是该属性对单行弹性盒模型无效,即:带flex-wrap: nowrap

flex-flow属性

CSS中的flex-flow该属性适用于伸缩容器元素flex-directionflex-wrap默认值的简写属性row nowrap

语法结构如下:

flex-flow: <'flex-direction'> || <'flex-wrap'>

与伸缩项相关的属性

order属性

CSS中的order该属性规定了弹性容器中可伸缩项目的布局顺序。元素是按照要素进行的order布局属性值的增序。有相同的order根据源代码中出现的顺序布局属性值元素。

语法结构

.item {   order: <integer> }

属性值

  • <integer>:默认为0。

值得注意的是,order仅仅影响元素的视觉顺序,不会影响元素的逻辑顺序。

示例代码如下:

.item1 { order: 2; }.item4 { order: -1; }

f71ed4be17b7bc659ea1a2afaf89d85.jpg

flex-grow属性

flex-grow与其他弹性项目相比,默认值为0;语法结构如下:

.item {   flex-grow: <number>;  }

示例代码如下:

.item2 { flex-grow: 2; }

20b41130eac1a4db2914e75ac2d9bd0.jpg

若所有伸缩工程都有flex-grow如果一个伸缩项目的值是1,它们将等同于剩余空间;flex-grow如果值为2,其他值为1,则前者占用的剩余空间将是其他项目的两倍。

flex-shrink属性

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,项目将缩小。

语法结构如下:

.item {  flex-shrink: <number>;

示例代码如下:

.item2 { flex-shrink: 2; }

44f54309fc149c26beeabeeaf6f74df.jpg

若所有伸缩工程都有flex-shrink值为1,当空间不足时,等比减小;如果是伸缩项目flex-shrink当空间不足时,前者不会缩小0值和1值。

flex-basis属性

flex-basis该属性定义了项目在主轴方向上的初始尺寸,然后再分配多余的空间。浏览器根据该属性计算主轴是否有多余的空间。其默认值为auto,也就是说,项目的原始尺寸。

语法结构如下:

.item {   flex-basis: <length> | auto;  }

它可以设置为跟踪widthheight相同属性的值,如设置230px,项目将占用固定空间。

flex属性

CSS中的flex属性是flex-growflex-shrinkflex-basis简写属性用于设置如何伸长或缩短伸缩工程,以适应伸缩容器中的可用空间。语法结构如下

flex: auto | initial | none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
  • none:元素会根据自己的宽度和高度来设置尺寸。它是完全不弹性的:既不缩短也不伸长以适应flex容器相当于将属性设置为"flex: 0 0 auto"。
  • auto:元素会根据自身的宽度和高度来确定尺寸,但会延长和吸收flex容器中额外的自由空间也会缩短适应性flex容器。这相当于将属性设置为"flex: 1 1 auto".

flex属性可指定1、2或3个值。

单值语法:其中一个值必须是:

  • 无单位数(<number>):它会被当作<flex-grow>的值。
  • 有效的宽度(width)值:它将被视为<flex-basis>的值。
  • 关键字noneautoinitial.

双值语法:第一个值必须是无单位数,它将被视为<flex-grow>值。第二个值必须是以下一个:

  • 无单位数:它将被视为<flex-shrink>的值。
  • 有效的宽度值:它将被视为<flex-basis>的值。

三值语法:

  • 第一个值必须是无单位数,它将被视为<flex-grow>的值。
  • 第二个值必须是无单位数,它将被视为 <flex-shrink>的值。
  • 第三个值必须是有效的宽度值,它将被视为 <flex-basis>的值。

align-self属性

CSS中align-self属性适用于伸缩容器元素,于设置伸缩项目自身元素在侧轴的对齐方式。该属性可覆盖align-items属性。默认值为auto,表示继承父元素align-items属性;语法结构如下:

align-self: center| flex-start| flex-end| baseline| stretch;复制代码
  • center:伸缩工程对齐侧轴的中间位置。
  • flex-start:伸缩项目向侧轴的起点位置对齐。
  • flex-end:伸缩工程对齐侧轴的终点。
  • baseline:伸缩工程按伸缩工程基线对齐。
  • stretch:默认值,伸缩工程拉伸填充整个伸缩容器。

示例代码如下:

.start {  align-self:  flex-start;  } .center {  align-self: center;  } .end {  align-self: flex-end;  }

1c4500856c5783cd3d15a73fe3707f6.jpg

写在最后

这篇文章到此结束。这里推荐一个学习Flex游戏的布局,Flexbox Froggy - 一个用来学CSS flexbox游戏很有趣,练习flex试试布局。

以上是弹性盒模型所有属性(图文)的详细分析。请多关注。php中文网其他相关文章!

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。2022-08-08 00:00:31

猜你喜欢

最新文章