详解CSS3弹性盒模型---Flexbox

以你之姓@ 2022-06-14 21:57 281阅读 0赞

Flexbox 布局它是CSS3新增的一种布局模式。可以很方便地用来改善动态或未知大小的元素的对齐，方向和顺序等等。flex容器的主要特性是它可以调整其子元素的宽度或高度去填充可用的空白区，以最优的方式达到兼容不同屏幕大小。  
Flexbox是布局模块，而不是一个简单的属性，它包含父元素和子元素的属性。

## **flexbox的术语** ##

先了解flexbox的几个常用术语，这样后面会更好理解；  
**伸缩容器**：一个设有“display:flex”或“display:inline-flex”的元素  
**伸缩项目**：伸缩容器的子元素  
**主轴、主轴方向**：用户代理沿着一个伸缩容器的主轴配置伸缩项目，主轴是主轴方向的延伸。  
**主轴起点、主轴终点**：伸缩项目的配置从容器的主轴起点边开始，往主轴终点边结束。  
**主轴长度、主轴长度属性**：伸缩项目的在主轴方向的宽度或高度就是项目的主轴长度，伸缩项目的主轴长度属性是width或height属性，由哪一个对着主轴方向决定。  
**侧轴、侧轴方向**：与主轴垂直的轴称作侧轴，是侧轴方向的延伸。  
侧轴起点、侧轴终点：填满项目的伸缩行的配置从容器的侧轴起点边开始，往侧轴终点边结束。  
**侧轴长度、侧轴长度属性**：伸缩项目的在侧轴方向的宽度或高度就是项目的侧轴长度，伸缩项目的侧轴长度属性是「width」或「height」属性，由哪一个对着侧轴方向决定。  
伸缩容器中各种方向与大小术语的示意图：  
![这里写图片描述][flexbox-basics-3.jpg]

## 属性介绍 ##

**父容器的属性**

1.  **display: flex | inline-flex** ；定义一个flex容器，内联或者根据指定的值，来作用于下面的子类容器。  
    flex：将对象作为弹性伸缩盒显示。  
    inline-flex：将对象作为内联块级弹性伸缩盒显示。  
    如图示，子div没有设置float，只是将父容器设置display: flex：  
    ![这里写图片描述][SouthEast]
2.  **flex-direction** ；设置或检索伸缩盒对象的子元素在父容器中的位置。  
    row：横向从左到右排列（左对齐），默认的排列方式。  
    row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。  
    column：纵向排列。  
    column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。  
    ![这里写图片描述][SouthEast 1]
3.  **flex-wrap** ；设置或检索伸缩盒对象的子元素超出父容器时是否换行。  
    nowrap：当子元素溢出父容器时不换行，通过收缩每个子元素的宽度来挤在一行。  
    wrap：当子元素溢出父容器时自动换行。  
    wrap-reverse：反转 wrap 排列。  
    ![这里写图片描述][SouthEast 2]
4.  **flex-flow** : <‘flex-direction’> || <‘flex-wrap’>；复合属性；
5.  **justify-content** ：设置或检索弹性盒子元素在主轴方向上的对齐方式。  
    flex-start：弹性盒子元素将向行起始位置对齐。  
    flex-end：弹性盒子元素将向行结束位置对齐。  
    center：弹性盒子元素将向行中间位置对齐。  
    space-between：弹性盒子元素会平均地分布在行里。第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。  
    space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。  
    如图：  
    ![这里写图片描述][SouthEast 3]
6.  **align-items** ；设置或检索弹性盒子元素在侧轴方向上的对齐方式。  
    flex-start：弹性盒子元素的侧轴起始位置的边界紧靠住该行的侧轴起始边界。  
    flex-end：弹性盒子元素的侧轴结束位置的边界紧靠住父容器的侧轴结束边界。  
    center：弹性盒子元素在该行的侧轴上居中放置。  
    baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。  
    stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。  
    ![这里写图片描述][SouthEast 4]
7.  **align-content** ；设置或检索弹性盒堆叠伸缩行的对齐方式。  
    flex-start：各行向弹性盒容器的起始位置堆叠。。  
    flex-end：各行向弹性盒容器的结束位置堆叠。  
    center：各行向弹性盒容器的中间位置堆叠。  
    space-between：各行在弹性盒容器中平均分布。第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等。  
    space-around：各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。  
    stretch：各行将会伸展以占用剩余的空间。剩余空间被所有行平分，以扩大它们的侧轴尺寸。  
    ![这里写图片描述][SouthEast 5]  
    **子元素的属性**  
    
    
    1.  **order** ; 用整数值来定义排列顺序，数值小的排在前面。可以为负值。  
        ：用整数值来定义排列顺序，数值小的排在前面。可以为负值。  
        ![这里写图片描述][SouthEast 6]
    2.  **flex-grow**；设置或检索弹性盒的扩展比率。  
        ：用数值来定义扩展比率。不允许负值，默认为0；  
        ![这里写图片描述][SouthEast 7]
    3.  **flex-shrink** ；设置或检索弹性盒的收缩比率。就是如果子元素的总宽度超过了容器宽度（主轴），那么这个属性定义了如何把超过的那部分平分到每个孩子身上，然他们按比例来缩小一定的宽度从而可以在容器中装得下。  
        ：用数值来定义收缩比率。不允许负值，默认为1；  
        ![这里写图片描述][SouthEast 8]
    4.  **flex-basis** ；设置或检索弹性盒伸缩基准值。也就是在在分配空白之前子元素的宽度默认是 `auto`，也就是本身的宽度，如果定义了 `flex-basis: 50px;` ，那么它就会覆盖掉孩子的宽度此时子元素的宽度为50px。
    5.  flex ；复合属性。设置或检索伸缩盒对象的子元素如何分配空间。  
        flex：none | \[ flex-grow \] || \[ flex-shrink \] || \[ flex-basis \]  
        如果缩写flex:1, 则其计算值为：1 1 0；  
        none：none关键字的计算值为: 0 0 auto；

[flexbox-basics-3.jpg]: /images/20220615/e6db1b2319bf4496949c89e20de4684e.png
[SouthEast]: /images/20220615/580f16ca6617479080f94a62b3dae53c.png
[SouthEast 1]: /images/20220615/13abadcb697348a9abed90f100ce59db.png
[SouthEast 2]: /images/20220615/088be5bd9ca84e49841fbdec254ed4d2.png
[SouthEast 3]: /images/20220615/9996dab9abe94f2ea767e30955fdaf07.png
[SouthEast 4]: /images/20220615/e66fdb88e1014fafb6a636e5b612b0b8.png
[SouthEast 5]: /images/20220615/8f7aa2a9e7134d73ba73a31e4075b728.png
[SouthEast 6]: /images/20220615/080e68637b96420fb626000b6092c773.png
[SouthEast 7]: /images/20220615/06ba17216dcb487e9ddd43c2802f720b.png
[SouthEast 8]: /images/20220615/2dbd8f350dbb4641933f2227b1cb9141.png