弹性盒子

Posted 2021-12-12 gaojian910

弹性盒子 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；
}