弹性盒子

弹性盒子 flex

    弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器

  flex 常用属性

  • justify-content;设置弹性盒子元素在主轴(横轴)方向上的对齐方式。
  • flex-wrap;设置弹性盒子的子元素超出父容器时是否换行。
  • align-content:当伸缩容器的侧轴还有多余空间时,本属性可以用来调准「伸缩行」在伸缩容器里的对齐方式

   justiffy-content 属性

    space-between:两端对齐中间均分

    center:居中

    flex-start:起点对齐

    flex-end:终点对齐

语法

div
{
    display: flex;
    justify-content: space-between;
}

  flex-wrap属性

    nowrap:默认值 不换行

    wrap:换行  第一行在上

    wrap-reverse:换行  第一行在下 

语法

div{

display:flex;
flex-wrap: wrap;
}

  align-content属性

    center:中心对齐

    flex-start:起点对齐

    flex-end:终点对齐

语法

div
{
    display: flex;
    align-content:center;
}

  

原文地址:https://www.cnblogs.com/gaojian910/p/10952114.html