弹性盒子flex的基本介绍

爱被打了一巴掌 2023-06-02 15:54 31阅读 0赞

### 文章目录 ###

*  弹性盒子
 *   *  flex-flow
     *   *  flex-direction
         *  flex-wrap
     *  justify-content
     *  align-items
     *  align-content
     *   *  order
     *  flew
     *   *  flex-grow
         *  flex-shrink
         *  flex-basis

此篇为理论知识，实际练习操作请看这篇： [练习（弹性盒子）][Link 1]

# 弹性盒子 #

是一种用于在页面上布置元素的布局模式

弹性布局是指通过调整其内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内元素来填充可用空间，或将其收缩来避免溢出。

父元素设置为dispaly：flex；  
或者取值为 inline-flex

![image][]  
图片转自[MDN][]

*  “容器”中有两条垂直的坐标轴
 *  横向的叫做主轴
 *  纵向的叫做交叉轴
 *  主轴左边与右边分别叫做主轴起点与主轴终点
 *  交叉轴上边与下边分别叫做交叉轴起点与交叉轴终点
 *  每个项目的宽与高叫做主轴尺寸与交叉轴尺寸

## flex-flow ##

flex-flow是flex-direction和flex-wrap的复合属性  
两个属性都是必写的

### flex-direction ###

属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)

*  row——子元素每块在父元素内从左向右排列
 *  row-reverse——子元素每块在父元素内从右向左排列
 *  column——子元素每块在父元素内依次从上到下排列
 *  column-reverse——子元素每块在父元素内从下往上排列

### flex-wrap ###

弹性盒的项目默认都是排列在一个轴上的  
如果项目多的话，会“弹性”压缩在一行

取值：  
默认值为nowrap

*  nowrap——flex 的元素被摆放到到一行，这可能导致溢出 flex 容器。 cross-start 会根据 flex-direction 的值 相当于 start 或 before。
 *  wrap——flex 元素 被打断到多个行中。cross-start 会根据 flex-direction 的值选择等于start 或before。cross-end 为确定的 cross-start 的另一端。
 *  wrap-reverse和 wrap 的行为一样，但是 cross-start 和 cross-end 互换。

## justify-content ##

justify-content属性定义了项目在主轴上的对齐方式

属性值如下：

*  flex-start：左对齐（默认）
 *  flex-end：右对齐
 *  center：居中
 *  space-between：两端对齐（项目间间隔相同）
 *  space-around：两端间隔对齐（项目间间隔是项目与边框间隔的2倍）
 *  space-evently：平分空白对齐

## align-items ##

align-items属性定义项目在交叉轴上如何对齐

属性值如下：

*  stretch：未设置高度（或height: auto）的项目占满整个容器高度（默认）
 *  flex-start ：交叉轴起点对齐
 *  flex-end：交叉轴终点对齐
 *  center：交叉轴中点对齐
 *  baseline：项目第一行文字的基线对齐

## align-content ##

align-content属性定义多根轴线的对齐方式  
这个属性只有在容器有多条主轴是才有效，一条主轴无效  
类似于justify-content属性  
属性值如下：

*  stretch：轴线占满整个交叉轴（默认值）
 *  flex-start：与交叉轴的起点对齐
 *  flex-end：与交叉轴的终点对齐
 *  center：与交叉轴的中点对齐
 *  space-between：与交叉轴两端对齐，轴线间间隔相等
 *  space-around：每根轴线两侧的间隔都相等

### order ###

order允许我们自定义项目的排列顺序

默认为0，属性值是数字，数值越小越靠前

## flew ##

flex是flex-grow、flex-shrink、flex-basis的复合属性

默认值：0 1 auto，后两个属性可选

可以写关键字：auto (1 1 auto) 和 none (0 0 auto)

### flex-grow ###

flex-grow定义项目的放大比例  
默认是0，不变化

按照比例平分空白区域

### flex-shrink ###

flex-shrink定义项目的缩小比例  
默认是1，就是如果空间不足，该项目将等比缩小

通过这个属性我们可以控制各个项目缩小的比例

### flex-basis ###

flex-basis定义在分配多余空间之前，项目占据的主轴空间

默认auto，就是项目本来的宽度

可以手动设置长度

\#\#align-self  
align-self属性允许某个项目拥有不同对齐方式

因此会覆盖align-items设置的对齐属性

默认值auto，继承弹性容器的align-items属性值

属性值除了auto外，和align-items一样，

*  auto
 *  stretch
 *  flex-start
 *  flex-end
 *  center
 *  baseline

[Link 1]: https://blog.csdn.net/qq_45127998/article/details/102135801
[image]: /images/20230601/a55aaf5e3c704494a56f6b7e257ae844.png
[MDN]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes