CSS的弹性布局

弹性布局中所有的标签都支持宽高。

定义弹性盒子：——display:flex

display:flex;——写在父元素

定义主轴方向：——flex-direction

flex-direction:row;//竖向排列 默认是横向排列不用写
flex-direction:column;//主轴方向是垂直 从上到下。
flex-direction:row-reverse;//与row相反
flex-direction:column-reverse;// 与colunmn相反

对齐方式：

主轴对齐：——justify-content

justify-content: center;// 居中
justify-content: flex-start;//左对齐
justify-content: flex-end;//右对齐
justify-content: space-around;//两侧的间隔相等
justify-content: space-between;//两端对齐

justify-content: center、flex-start、flex-end、space-around、space-between。

交叉轴上对其方式：——align-items

align-items: center;//交叉中心点对齐
align-items: flex-start;//起点对齐
align-items:flex-end;//终点对齐
align-items:baseline;//第一行文字的基线对齐
align-items:stretch;//未知高度 占满

超出是否换行：——flex-wrap

flex-wrap:wrap;//超出换行 默认是不换行
flex-wrap: nowrap;//不换行
flex-wrap: wrap-reverse;//换行且第二行在上面

多轴对齐方式——align-content

align-content: flex-start;//起点对齐
align-content: flex-end;//终点对齐
align-content: center;//中点对齐
align-content: space-around;//两端对齐
align-content: space-between;//间隔相等
align-content: stretch;//占满

两、三栏布局：

flex:1——自动占满剩余空间