flex-box

1.display:flex;(写在父级元素的CSS样式中,其子级元素就会默认的同行排列),设置成flex之后,子级的浮动,clear,vertical-align 都将失效

2.弹性盒子的属性:

①flex-direction:排列方式,row(横向排列)、column(纵向排列)、row-reverse(横向反向排列)、column-reverse(纵向反向排列)

②justify-content:对齐方式,flex-start(起始位置对齐) flex-end(结束位置对齐) center(居中) space-between(靠边,分散对齐) space-around(不靠边,分散对齐)。

③flex-wrap:wrap(换行,当盒子一行不足以盛下它的多个子级元素的时候,就会换行)、nowarp(不换行)。这个属性是用来写元素的子级在X轴上的对齐方式。

④align-items:stretch(在竖直方向铺满,但是里面的内容不能设置高度)......这个属性用来写盒子的子级元素在Y轴上的对齐方式,flex-start,flex-end,center,baseline。

⑤align-content:产生换行的时候,可以用来除去换行所产生的缝隙,属性值有:对齐方式,flex-start(起始位置对齐) flex-end(结束位置对齐) center(居中) space-between(靠边,分散对齐) space-around(不靠边,分散对齐),strech(默认值,铺满整个Y轴)。但是,当元素只有一行,不需要换行的时候会没有任何效果。

⑥flex-flow:flex-direction和flex-wrap的缩写。一般写为:flex-flow:row wrap;属性值根据具体情况子级设置。

3.弹性盒子的子级元素的排序设置:

①order:number;数值越小越靠前。

②flex-grow:number;默认值是0,即,有剩余空间也不放大(用来设置放大比例);

③flex-shrink:number;默认值是1,即,空间不够也不缩小(用来设置缩小比例);原理同上。

④flex-basis:auto;(或像素)。

⑤align-self:相对于子级元素自己进行设置,写在子级元素的样式中。(对齐方式)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • What is Flex? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最...
    6ed7563919d4阅读 5,069评论 2 9
  • 前言 弹性盒子,顾名思义:它是具有弹性功能的,在Web网页中,你所看见的内容,不会随着网页宽度的变化而打乱了排版。...
    lvanboy阅读 5,405评论 5 17
  • CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒( Flexib...
    鹿守心畔光阅读 5,010评论 1 9
  • 最近难得有空,总结一下flex布局相关知识点,如有错漏,请大神指点纠正,谢谢~ flex布局总结: 快速记忆 主轴...
    JyLie阅读 3,909评论 0 1
  • 今天整理资料的时候突然翻到自己十年前刚上大学的时候写的一首小诗。那时的自己刚上大学,对于陌生的城市和环境各种不...
    宁语随记阅读 1,813评论 0 1