flex布局
用以代替浮动的布局手段;
必须先把一个元素设置为弹性容器;//display:flex;
一个元素可以同时是弹性容器和弹性元素;
设为flex布局以后,子元素的float、clear和vertical-align属性将失效。
主轴:弹性元素排列的方向;
弹性容器的属性
1、flex-direction 决定主轴的方向
row:默认值,从左到右;
row-reverse:从右到左;
column:从上到下;
column-reverse:从下到上;
2、flex-wrap 决定是否换行
nowrap:默认值,不换行;
wrap:换行,第一行在上方;
wrap-reverse:换行,第一行在下方;
3、flex-flow
flex-direction和flex-wrap的简写形式,默认值是row nowrap;
//flex-flow: row wrap;
4、 justify-content 决定弹性元素在主轴上的对齐方式
flex-start:默认值,左对齐;
flex-end:右对齐;
enter: 居中;
space-between:两端对齐,弹性元素之间的间隔都相等(两侧的弹性元素与边框没有距离);
space-around:每个弹性元素两侧的间隔相等(弹性元素之间的间隔比弹性元素与边框的间隔大一倍)
5、align-items 决定子元素如何在父盒子中垂直对齐(单行)
flex-start:沿辅轴的起点对齐,从起点一直排向(带箭头的)终点;
flex-end:沿辅轴的终点对齐,从终点一直排向起点;
center:居中对齐;
baseline: 基线对齐;
stretch:默认值,让子元素拉伸以适应父元素(子元素不给高度的前提下);
6、align-content 决定多行垂直对齐的情况(对单行无效)
该属性生效的条件:
必须对父元素设置自由盒属性//display:flex;
并且设置排列方式为横向排列//flex-direction:row;
并且设置换行//flex-wrap:wrap;
属性值:
1)stretch:默认值,会拉伸容器内每一行的占用的空间,填充方式为给每一行的下方增加空白;
第一行默认从容器顶端开始排列。
2)取消行与行之间的空白并把所有行作为一个整体,
center:在纵轴上垂直居中;
flex-start:放在容器的顶部;
flex-end:放在容器的底部;
3)space-between:上面的行对齐容器顶部,最下面行对齐容器底部。留相同间隔在每个行之间。
(对齐就是贴紧,没有留空隙);
space-around:每一行的上下位置保留相同长度空白,使得行之间的空白为两倍的单行空白。
弹性元素的属性
1、order 决定子元素的排序
数值越小越往前,可为负,默认为零;//order:1;
2、 flex-grow
决定子元素的伸展系数,在父元素的剩余空间中按比例分配;//flex-grow :1;
如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话);
如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
3、flex-shrink
决定子元素的收缩系数,当父元素的空间不足以容纳所有子元素;//flex-shrink :1;
如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小;
如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
4、flex-basis
指定的是子元素在主轴的基础长度;
若主轴为横向,则该值指定的是宽度,即纵向指定的是高度;
默认值是auto,表示参考元素自身的宽/高,有传具体数值则以该值为准;
5、flex :增长 缩减 基础
flex-grow 、flex-shrink 、flex-basis的简写属性;
initial --- flex: 0 1 auto;
auto --- flex: 1 1 auto;
none --- flex: 0 0 auto;弹性元素没有弹性,不缩不减;
6、align-self
允许单个子元素有与其他子元素在纵轴上不一样的对齐方式,可覆盖align-items属性;
默认值为auto,表继承父元素的align-items属性,如果没有父元素,就等同于stretch
属性值: auto 、flex-start 、 flex-end 、 center 、baseline 、 stretch;
//花了两个小时整理,对我来说挺有用的,越是难点越要突破,一起加油叭,冲冲冲!!
原文地址:https://www.cnblogs.com/isremya/p/12639957.html