深入解析弹性盒模型的所有属性（图文）文字识别OCR

.markdown-body{color:#383838;font-size:15px;line-height:30px;letter-spacing:2px;word-break:break-word;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;scroll-behavior:smooth;background-image:linear-gradient0deg,transparent 24%,rgba201,195,195,.329) 25%,hsla0,8%,80.4%,.05) 26%,transparent 27%,transparent 74%,hsla0,5.2%,81%,.185) 75%,rgba180,176,176,.05) 76%,transparent 77%,transparent),linear-gradient90deg,transparent 24%,rgba204,196,196,.226) 25%,hsla0,4%,66.1%,.05) 26%,transparent 27%,transparent 74%,hsla0,5.2%,81%,.185) 75%,rgba180,176,176,.05) 76%,transparent 77%,transparent);background-color:#fff;background-size:50px 50px;padding-bottom:60px}.markdown-body ::selection{color:#fff;background-color:#a862ea}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{margin:24px 0 12px;color:#a862ea}.markdown-body h1{line-height:2;font-size:1.4em}.markdown-body h1~p:first-of-type:first-letter{color:#a862ea;float:left;font-size:2em;margin-right:.4em;font-weight:bolder}.markdown-body h2{font-size:1.2em}.markdown-body h3{font-size:1.1em}.markdown-body ol,.markdown-body ul{padding-left:2em}.markdown-body ol li,.markdown-body ul li{margin-bottom:0;padding-left:.2em}.markdown-body ol li::marker,.markdown-body ul li::marker{color:#a862ea}.markdown-body ol li.task-list-item,.markdown-body ul li.task-list-item{list-style:none}.markdown-body ol li.task-list-item ol,.markdown-body ol li.task-list-item ul,.markdown-body ul li.task-list-item ol,.markdown-body ul li.task-list-item ul{margin-top:0}.markdown-body ol ol,.markdown-body ol ul,.markdown-body ul ol,.markdown-body ul ul{margin-top:10px}.markdown-body a,.markdown-body code,.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6,.markdown-body li,.markdown-body p{opacity:.85;vertical-align:baseline;transition:all .1s ease}.markdown-body a:hover,.markdown-body code:hover,.markdown-body h1:hover,.markdown-body h2:hover,.markdown-body h3:hover,.markdown-body h4:hover,.markdown-body h5:hover,.markdown-body h6:hover,.markdown-body li:hover,.markdown-body p:hover{opacity:1}.markdown-body a{display:inline-block;color:#a862ea;cursor:pointer;text-decoration:none;position:relative}.markdown-body a:after{content:””;position:absolute;width:98%;height:1px;bottom:0;left:0;transform:scaleX0);background-color:#a862ea;transform-origin:bottom right;transition:transform .3s ease-in-out}.markdown-body a:hover:after{transform:scaleX1);transform-origin:bottom left}.markdown-body a:active,.markdown-body a:link{color:#a862ea}.markdown-body img{max-width:100%;user-select:none;margin:1em 0;transition:transform .2s ease 0s;background-color:#f8f5ff;box-shadow:0 0 10px #e7daff}.markdown-body img:hover{opacity:1;box-shadow:0 0 20px #e7daff;transform:translateY-1px)}.markdown-body blockquote{padding:.5em 1em;margin:12px 0;border-top-left-radius:2px;border-bottom-left-radius:2px;border-left:3px solid #a862ea;background-color:#f8f5ff}.markdown-body blockquote>p{margin:0}.markdown-body .math{font-style:italic;margin:12px 0;padding:.5em 1em;background-color:#f8f5ff}.markdown-body .math>p{margin:0}.markdown-body code{padding:2px .4em;overflow-x:auto;color:#a862ea;font-weight:700;word-break:break-word;font-family:Operator Mono,Consolas,Monaco,Menlo,monospace;background-color:#f8f5ff}.markdown-body pre{margin:2em 0}.markdown-body pre>code{display:block;padding:1.5em;word-break:normal;font-size:.9em;font-style:normal;font-weight:400;font-family:Operator Mono,Consolas,Monaco,Menlo,monospace;line-height:18px;color:#383838;border-radius:2px;scroll-behavior:smooth;box-shadow:0 0 10px #e7daff}.markdown-body pre>code:hover{box-shadow:0 0 20px #e7daff}.markdown-body pre>code::-webkit-scrollbar{height:6px;background-color:#f8f5ff}.markdown-body pre>code::-webkit-scrollbar-thumb{background-color:#e7daff;border-bottom-left-radius:3px;border-bottom-right-radius:3px}.markdown-body hr{margin:2em 0;border-top:1px solid #a862ea}.markdown-body table{width:100%;font-size:12px;max-width:100%;overflow:auto;border-collapse:collapse}.markdown-body thead{color:#a862ea;background:#f8f5ff}.markdown-body td,.markdown-body th{padding:.5em;border:1px solid #e7daff}.markdown-body tr{background-color:#f8f5ff}@media max-width:720px){.markdown-body{font-size:12px}}

写在前面

弹性盒子模型即FlexBox，也就是我们常说的flex布局，现在flex布局已经是前端的主流布局方案，早就是前端必会的内容了，接下来我们一起来看一下弹性盒子模型。【推荐：css视频教程】

相关概念

CSS3新增的弹性盒子模型是一个完整的模块，涉及的样式属性较多。首先，对弹性盒子模型的相关概念完成基本的了解。

2c59c59f1909a0c1579a1dc4fe74561.jpg

  • 伸缩容器flex container)：包裹伸缩项目的父元素。
  • 伸缩项目flex item)：伸缩容器的每个子元素。
  • 轴axis)：每个弹性盒子模型拥有两个轴。
    • 主轴main axis)：伸缩项目沿其一次排列的轴被称为主轴。
    • 侧轴cross axis)：垂直于主轴的轴被称为侧轴。
    • 方向direction)：伸缩容器的主轴由主轴起点和主轴终点，侧轴由侧轴起点和侧轴终点描述伸缩项目排列的方向。
  • 尺寸dimension)：根据伸缩容器的主轴和侧轴，伸缩项目的宽度和高度。
    • 对应主轴的称为主轴尺寸。
    • 对应侧轴的称为侧轴尺寸。

定义弹性盒子模型

CSS3中想要设置为弹性盒子模型的话，需要通过display样式属性设置值为flex或inline-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相同，但是置换了主轴起点和主轴终点起点在右端)
  • column：flex容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同起点在上沿)
  • 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-direction和flex-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; 
}

flex属性

CSS中的flex属性是flex-grow、flex-shrink、flex-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>的值。
  • 关键字none，auto或initial.

双值语法：第一个值必须为一个无单位数，并且它会被当作<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布局可以试试。

.markdown-body pre,.markdown-body pre>code.hljs{color:#383a42;background:#fafafa}.hljs-comment,.hljs-quote{color:#a0a1a7;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#a626a4}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e45649}.hljs-literal{color:#0184bb}.hljs-addition,.hljs-attribute,.hljs-meta-string,.hljs-regexp,.hljs-string{color:#50a14f}.hljs-built_in,.hljs-class .hljs-title{color:#c18401}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#986801}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#4078f2}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}

以上就是深入解析弹性盒模型的所有属性（图文）的详细内容，更多请关注风君子博客其它相关文章！

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注