CSS中display属性的Flex布局

Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性

display: flex将对象作为弹性伸缩盒展示，用于块级元素。

display: inline-flex将对象作为弹性伸缩盒展示，用于行内元素。

基本概念

采用Flex布局的元素，称为Flex容器，简称“容器”。它的所有子元素自动成为容器成员，称为flex item。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size.

以下6个属性设置在容器上

1.flex-direction{row|row-reverse|column|column-reverse}

row(默认)沿水平主轴由左向左排列，row-reverse由右向左，column由上向下。

2.flex-wrap{nowrap|wrap|wrap-reverse}

nowrap（默认）不换行，wrap换行（第一行在上方）。

3.flex-flow{flex-direction||flex-wrap}

将上述两个方法的值用||连接即可。

4.justify-content{flex-start|flex-end|center|space-between|space-around}

item在水平方向的对齐方式。

flex-start在主轴上由左或上开始排列，flex-end在主轴上由右或下开始排列，center在主轴上居中排列，space-between在主轴上左右两端或者上下两端开始排列，space-around每个item两侧的间隔相等，所以item之间的间隔比项目与边框的间隔大一倍。

5.align-items{flex-start|flex-end|center|baseline|stretch}

用于指定垂直方向的对齐方式。

stretch默认值，当flex子项未设置高度或者调度值为auto时，stretch起作用，将flex子项高度设置为行高度。这里需要注意，在只有一行的情况下，行的高度为容器的高度，即flex子项高度为容器的高度。

6.algin-content{flex-start|flex-end|center|space-between|space-around|stretch}

该属性只作用于多行的情况下，用于多行的对齐方式。

stetch默认值，当flex子项未设置高度或者高度值为auto时，stretch起作用，将flex子项高度设置为行高度。flex-start表示各行与侧轴开始位置对齐，第一行紧靠侧轴开始边界，之后的每一行都紧靠前一行。flex-end表示各行与侧轴的结束位置对齐，最后一行紧靠侧轴结束边界，之后的第一行都紧靠前面一行。center表示各行与侧轴中间对齐。表示两端对齐，中间间距相等，要注意特殊情况，当剩余空间为负数时，效果等同于flex-start。space-around表示各行之间间距相等，中间间距一两端的2倍，要注意特殊情况，当剩余空间为负数时，效果等同于center.

作用于子项上的6个属性介绍

1.order

该属性用来指定flex子项的排列顺序，数值越小，越靠前，可以为负数。

2.flex-grow

用来指定flex子项的扩展比例，不可为负数，flex容器会根据flex子项设置的扩展比例作为比率来分配剩余空间。

3.flex-shrink

用来指定flex子项的收缩比例，不可以为负数，flex-shrink只能在不换行的情况下使用。

4.flex-basis{auto|length|percentage|content}

用来指定flex子项占据的空间，不可以为负数.

5.flex

复合属性，是flex-grow flex-shrink flex-basis的简写属性。

 

 

最后欢迎大家访问我的个人网站：1024s​​​​​​​