这篇文章主要是偏向对flex属性的记录,毕竟真要学习flex 阮一峰大神的flex教程才是首选
伸缩盒子模型
- 伸缩盒子模型控制的是父子关系
- 父元素:伸缩容器
- 子元素:伸缩项目
- 主轴:start-end
- 交叉轴(侧轴)
Flex容器
display:flex
在元素上声明display:flex
(得到的是一个块级元素),这样就激活了弹性盒子布局。这个元素成为了弹性容器,弹性容器负责所在的空间的内置子元素,控制子元素的布局。
display:-webkit-box(旧版本)
主轴布局方向
flex-direction:
指定弹性容器中如何摆放弹性元素,定义主轴方向。
- row :主轴的起始边在弹性容器左边,结束便在弹性容器右边。(默认值)
- row-reverse :主轴的起始边在弹性容器右边,结束便在弹性容器左边。
- column:主轴与侧轴发生对调
- column-reverse: 主轴的起始边在弹性容器的下边,结束边在弹性容器的上边。
富余空间管理(主轴)
justify-content: 设置弹性容器上主轴上面如何分布各行里面的弹性元素(多出来的空间大家怎么分)。
- flex-start :默认值。紧靠主轴起始边。
- flex-end: 紧靠主轴结束边。
- center : 将弹性元素作为一个整体,居中显示在主轴的中点。
- space-around:富余空间包含伸缩项目
- space-between:伸缩项目包含富裕空间
富余空间管理(侧轴)
align-items定义的是弹性元素在垂直方向上的对齐方式。(设置弹性元素在当前行的位置分布)。
-
flex-start:将各个弹性元素与弹性容器垂直轴的起始边一侧对齐。
-
flex-end:将各个弹性元素与弹性容器垂直轴的结束边一侧对齐。
-
center:弹性元素的中点与所在行的垂直轴中点对齐。
-
stretch:(默认值):如果项目没有设置高度或者设置为auto,将沾满整个容器的高度。
弹性空间
flex-grow:适用于弹性元素(子元素上设置),用来定义有多余的空间时是否允许弹性元素增大,以及允许增大并且有多余空间时,相对于其他的同辈的弹性元素增大的比例是多少。
它的值默认为0,可以是其他数字,可以是小数。不能是负数。
项目换行
Flex布局,如果没有执行换行,无论设置多宽都不会换行
flex-wrap: nowrap; — 默认值,父元素宽度不够,子元素自身宽度会被压缩
flex-wrap: wrap; — 父元素宽度不够,子元素会进行换行
flex-wrap: wrap-reverse; — 子元素换行的同时,侧轴的start与end发生对调
出现flex-wrap:wrap;之后,出现单行的富裕空间
注意:align-items 每一行的富裕空间,align-items: flex-start;
控制整体侧轴的富裕空间
align-content: flex-start; — 项目整体进行打包,放在整体侧轴的start处
align-content: flex-end; — 项目整体进行打包,放在整体侧轴的end处
align-content: center; — 项目整体进行打包,放在整体侧轴的center处;
order
默认的时候,弹性元素的显示和排序顺序是与在源码中的顺序一致的,如果更改需要使用order属性。
格式:order:value
,用于弹性元素,默认情况下所有弹性元素的顺序都是0。
修改弹性元素的视觉顺序,可以将order设置为一个非零的整数(正数、负数)
数越大在主轴上面越靠后。如果数值相同它们会被分配在同一个排序组中,以出现在源码中的顺序沿着主轴方向显示。
注意:使用order时只是视觉上的变化,就像在源码中的顺序发生了修改一样(但是实际并没有发生修改)。
单独修改某个弹性元素的对齐方式
align-self :
flex-start:将各个弹性元素与弹性容器垂直轴的起始边一侧对齐。
flex-end :将各个弹性元素与弹性容器垂直轴的结束边一侧对齐。
center :弹性元素的中点与所在行的垂直轴中点对齐。
stretch:如果项目没有设置高度或者设置为auto,将沾满整个容器的高度。
收缩率(flex项目)
当伸缩项目设置宽度,比容器宽度还要大时,元素并没有发生溢出的情况,那此时就出现一个东西叫 收缩因子(收缩率)
flex-shrink:拉伸因子 0 —不拉伸
flex-shrink:收缩因子 默认值:1 — 收缩
子元素的基准值
flex-basis:0
flex属性
flex-basis,flex-grow,flex-shrink的缩写
点击右边进入=>flex布局练习