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

语法：属性：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：如何项目未设置高度，将占满整个容器

    完结！！！

     

    版权声明：本文为woheni原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
    本文链接：https://www.cnblogs.com/woheni/p/11218604.html