flex布局

Posted 2022-08-27 lee1-w

以下是弹性布局的一些知识点，很简单，易懂！

语法：属性：display

 

取值：

• flex：当前元素充当弹性布局的容器，并且本身以块级元素显示。
• inline-flex：当前元素充当弹性布局的容器，并且本身以行内元素显示。

概念：

• 容器：容纳弹性布局中子元素的父元素。
• 项目：容器中的子元素

注意：元素一旦变为弹性布局的元素后，float，clear，vertical-align，text-align都失效，定位属性是有效的！

接下来就是弹性布局的核心：弹性布局的属性。弹性布局的属性分为容器的属性和项目的属性。

容器的属性：

• flex-direction：定义容器的主轴方向
  • row 默认，主轴水平，从左到右
  • row-reverse主轴水平，从右到左
  • column主轴垂直，从上到下
  • column-reverse主轴垂直，从下到上
• flex-wrap：如果项目在容器中一行显示不下的方式
  • norwap：默认不换行，项目自压缩
  • wrap：换行
  • wrap-reverse：项目在交叉轴上的换行
• flex-flow：以上两个属性的简写，取值有两个
• justify-content：项目在主轴方向上的对其方式
  • flex-start：在轴的起点对齐
  • flex-end：末尾段对齐
  • center：居中对齐
  • space-between：项目与项目之间的距离相等
  • space-around：项目两侧的剩余空间相等
• align-items：项目交叉轴的对齐方式
  • flex-start：在轴的起点对齐
  • flex-end：末尾段对齐
  • center：居中对齐
  • baseline：基线对齐
  • stretch：如何项目未设置高度，将占满整个容器
• align-content：如果有多跟轴线（需要换行），轴线的对齐方式
  • flex-start：在轴的起点对齐
  • flex-end：末尾段对齐
  • center：居中对齐
  • space-between：项目与项目之间的距离相等
  • space-around：项目两侧的剩余空间相等
  • stretch：占满整个轴线

项目的属性：

• order：顺序，取值为整数，默认所有项目取值为0，取值越小越往前。
• flex-grow：如果容器有剩余空间，定义项目的放大比例，将剩余空间分配给具有此属性的元素，按比例分配。
• flex-shrink：如果容器有空间不足，定义项目的缩小比例。默认为1，取值为0，不压缩。
• flex-basis：定义在主轴上的大小，可以覆盖width/height，默认为auto。
• flex：以上3个属性的综合
• align-self：设置当前这个项目的对齐方式，可以覆盖align-items
  • flex-start：在轴的起点对齐
  • flex-end：末尾段对齐
  • center：居中对齐
  • baseline：基线对齐
  • stretch：如何项目未设置高度，将占满整个容器