Css3弹性盒子
CSS3弹性盒子(Fiexbox)
1.弹性盒子:随屏幕放大缩小盒子也放大缩小,不出现滚动条。对容器中的子元素进行排列、对齐和分配。
2.弹性盒子=弹性容器+弹性子元素
注:弹性盒子在父元素写,只定义子元素的布局。
一个弹性容器包含一个或多个弹性子元素。
默认情况每个容器只有一行,弹性子元素在弹性盒子内一行显示。
3.浏览器支持(兼容模式)
3.定义弹性盒子: display: flex/inline-flex
4.改变排列方式:
1) direction :rtl /* rightto left */
2) 位置
flex-direction: row/row-reverse/column/column-reverse
row:横向从左到右排列(左对齐),默认
row-reverse:反向横排列(右对齐),最后一项在最前面
column:纵向排列
column-reverse: 反向纵排列,最后一项在最上面
3) 内容对齐
justify-content:flex-start/flex-end/center/space-between/space-around
flex-start :从头紧挨边线开始填充
flex-end:紧挨尾部边线填充
center:居中
space-between:第一项紧挨mian-start边线对齐,最后一项紧挨mian-end边线对齐,其余间隔相等在同一行。
space-around:首尾两边各留一半间隔排列,其余间隔相同。
4)align-items 纵向对齐方式
flex-start/flex-end/center/baseline/stretch
5)flex-wrap:nowrap/wrap/reverse
单行/溢出换行/溢出放上行
6)align-cotent:用于修改flex-wrap属性,类似align-items,不是设置弹性子元素的对齐,而是设置各行的对齐。
flex-start/center/flex-end/space-between/space-around/stretch
flex-start:各行向弹性盒子容器的起始位置堆叠
flex-end:各行向弹性盒子容器的结束位置堆叠
center:各行向弹性盒子容器的中间位置堆叠
space-between:各行在弹性容器中平均分布
space-around:各行在弹性容器中平均分布,两端保留子元素之间的间距大小的一半
stretch:各行伸展占用剩余位置(默认)
7)flex:定义弹性子元素如何分配空间
eg.flex : 3 /*占总空间的三份*/
8) order:n /*n越小子元素排序越靠前*/
增:选择器中:a : not (: last-of-type) /*表示除了最后一个超链接*/