flex弹性盒子的使用

Posted 2020-12-29 sspeng

前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！

　　CSS3引入了一种新的布局模型—— flex 布局。flex是 flexible box 的缩写，一般称之为弹性盒模型。flex布局提供一种更加有效的方式来进行容器内的项目布局，以适应各种类型的显示设备和各种尺寸的屏幕。

 

基本概念

　　要让一个元素变成伸缩容器，需要使用 display 属性。采用 flex 布局的元素，称为伸缩容器 (flex container) ，容器内的子元素称为伸缩项目 (flex item)。

　　使用 flex 布局以后，需要注意 float、clear 和 vertical-align 属性在伸缩项目上没有效果。

　　弹性盒模型的两种容器块级伸缩容器和内联伸缩容器（display: flex | inline-flex;）的区别类似于 block 和 inline-block 的区别，一个独占一行，另一个非独占一行。

 

伸缩容器

　　有以下6个属性作用在伸缩容器上：

flex-direction 主轴的方向（即项目的排列方向）

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap 如果一条轴线排不下，如何换行

• nowrap（默认值）：不换行，伸缩项目在一行内等均分配
• wrap：换行
• wrap-reverse：反向换行

flex-flow 

　　属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap 。

justify-content 伸缩项目在主轴上的对齐方式

• flex-start（默认值）左对齐
• flex-end 右对齐
• center 水平居中对齐
• space-between 两端对齐
• space-around 扩散对齐

align-items 伸缩项目在侧轴上的对齐方式 

• stretch（默认值）伸缩项目将拉伸充满整个容器高度
• flex-start 顶部对齐
• flex-end 底部对齐
• center 垂直居中对齐
• baseline 伸缩项目与第一行文字的基线对齐

align-content 堆栈伸缩行 

 

伸缩项目

　　有以下6个属性设置在伸缩项目上

order

　　属性定义伸缩项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-grow

　　属性定义伸缩项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。

　　如果所有伸缩项目的 flex-grow 属性都为 1，则它们将等分剩余空间（如果有的话）。

　　如果一个伸缩项目的 flex-grow 属性为 2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink

　　属性定义了伸缩项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。

　　如果所有伸缩项目的 flex-shrink 属性都为 1，当空间不足时，都将等比例缩小。

　　如果一个伸缩项目的 flex-shrink 属性为 0，其他伸缩项目都为 1，则空间不足时，前者不缩小。

flex-basis

　　属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto，即项目的本来大小。

flex

　　属性是 flex-grow、flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto 。后两个属性可选。

　　该属性有两个快捷值： auto (1 1 auto) 和 none (0 0 auto) 。

align-self

　　属性允许单个项目有与其他项目不一样的对齐方式，可覆盖容器的 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch (充满整个容器)。