码迷,mamicode.com
首页 > 其他好文 > 详细

弹性盒子

时间:2019-05-30 21:49:39      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:reverse   flex   eve   tar   lex   splay   wrap   nowrap   方向   

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

  

弹性盒子

标签:reverse   flex   eve   tar   lex   splay   wrap   nowrap   方向   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!