flex布局

http://blog.csdn.net/magneto7/article/details/70854472
flex的核心概念就是父容器,子容器,主轴和交叉轴这4个概子容器也念组成
flex布局总共涉及到12个css属性,父容器,子容器个6个,常用的只有4个,子容器2个父容器2个
容器: 父容器可以设置字容器的排列方式,子容器也可以单独设置,如有重复以子容器为主。
父容器:justify-content(水平居中)align-items(垂直居中)
子容器:flex(子容器的伸缩比例)align-self()
box{
display: -webkit-flex; /* Safari */
display: flex;
}
flex-direction 项目的排列方向
flex-wrap 一条轴线排不下,如何换行
flex-flow flex-direction和flex-wrap简写
justify-content 项目在主轴上的对齐方式。11
align-items 义项目在交叉轴上如何对齐 11
align-content 多根轴线的对齐方式

order 项目的排列顺序。数值越小,排列越靠前,默认为0
flex-grow 项目的排列顺序。数值越小,排列越靠前,默认为0
flex-shrink 属性定义了项目的缩小比例,默认为1,
flex-basis 定义了在分配多余空间之前,项目占据的主轴空间(main size
flex 属性是flex-grow, flex-shrink 和 flex-basis的简写 11
align-self 性允许单个项目有与其他项目不一样的对齐方式 11


image.png

推荐阅读更多精彩内容

  • 转自--阮一峰, 此人写的很详细, 收藏了一下, 非常感谢 网页布局(layout)是CSS的一个重点应用。 布局...
    春雨霏霏_____阅读 274评论 0 0
  • 应用在父元素上-flex box 1.模型 方向 换行 display: flex(盒子模型) 定义父元素为fle...
    林立镇阅读 2,999评论 0 27
  • 请解释一下CSS3的FLEXBOX(弹性盒布局模型)以及适用场景? 大家好,我是IT修真院郑州分院第七期的学员冯亚...
    f056917阅读 355评论 0 1
  • 网页布局(layout)是CSS的一个重点应用。 一、Flex布局是什么? Flex是Flexible Box的缩...
    抱着熊喵啃什么阅读 498评论 0 4
  • //向左向右轻划 UISwipeGestureRecognizer *swipeLeft=[[UISwipeGes...
    yymyb阅读 986评论 0 0
  • 很多人问我说,“你一天读书、骑行、做兼职、当志愿者、爱天爱地的四处漂流,这么瞎折腾,有什么意思呢,难道可以当饭吃?...
    痴人一念阅读 263评论 16 25
  • 近来,朋友圈晒的最多的是,湖塘鉴湖村的那一片花海。秋日的阳光下,波斯菊、硫华菊等诸多花卉,姹紫嫣红,整片整...
    春天的主旋律阅读 2,467评论 0 2
  • 今天下午下班,却觉得很疲惫,在离开办公室之前,我一边收拾桌子整理物品,一边深呼吸,一边清理,然后假装自己很快乐的让...
    创世大玩家紫微阅读 71评论 0 1
  • TO 毒舌姐: 我是一个单身妈妈,几年前和老公离了婚,他的经济条件不如我,孩子归了我。由于他无法担负抚养费,我们就...
    毒舌姐姐阅读 675评论 4 5