CSS之弹性布局

大家好，有段时间没有更博客了~，今天介绍一下CSS中的知识点。

CSS3中有一个相对于float浮动更好用的布局设计属性：display属性中的容器化布局，2009年w3c提出的一种新的布局方案，目前得到所有浏览器的支持。

 

首先先介绍一下

display中的两个属性值：

flex：使块级元素变为容器

inline-flex：使行内元素变为容器

接下来试验一下：

 

1、未设置display:flex;

 

 

2、设置了 宽长度为1000px;且设置display:flex;使父级元素变为一个容器。子元素往上排列，顺序从左至右（默认值），

由此，flex-direction属性为设置排列的起始和终点方向。

flex-direction:

row 为默认值，水平从左至右排列，指向东方向  （水平对齐）

row-reverse:反转，水平从右至左排列，指向西方向（水平对齐）

column:纵向排列，由上至下排列，指向南方向    （垂直对齐）

column-reverse:纵向反转，由下至上，指向北方向  （垂直对齐）

 

箭头随指向变化：

 

flex-wrap属性为：设置是否换行

常用的有以下几个值：

 

nowrap:默认值，不换行

 

wrap:换行

 

wrap-reverse:换行，顺序反转，也就是第一个子元素在最下方：

 

flex-flow:为缩写形式

eg:

flex-flow:row wrap;

 

设置为flex;之后 子元素的float/clear失效

 

接下来再说一下对齐方式：

 

水平对齐方式属性：justify-content:

flex-start:默认值  起点对齐

flex-end:终点对齐

center:居中对齐

space-between:屏幕两端对齐，两端无空白

space-around: 屏幕两端对齐，两端有空白

 

举两个例子：

 

 

相当于二维空间 例如东方向为x水平轴，北方向为y垂直轴，称之为交叉轴：

垂直对齐方式属性：align-items:

 

flex-start起点对齐

flex-end:终点对齐

center  :居中对齐

baseline基线对齐，就是起点

stretch 前提不定义父元素的高，伸展占满所有行空间，子元素间隙平均分配。

 

举个例子理解：（水平，垂直同时设置）

本篇就介绍到这里了，希望能对各位有所用途，以上如有不足之处，请请多指教!Thank you!