flex布局详解

一、认识flex布局

flex布局详解使用display:flex;开启flex container布局
flex布局详解

二、flex布局模型

下面是官方给出的flex布局,注意主轴和交叉轴。
flex布局详解

三、flex相关属性

flex布局详解

(一)、flex-container几个CSS属性介绍

1、flex-direction:决定主轴的方向

flex布局详解
2、justify-content:决定flex items主轴的对齐方式

flex布局详解
flex布局详解

3、align-items:决定flex items在交叉轴的对齐方式

flex布局详解flex布局详解
4、flex-wrap
默认情况下,所有的flex items都会下同一行显示。设置flex-wrap:wrap即可换行显示。

flex布局详解flex-flow:row-reverse wrap;

5、align-content:决定多行的flex items在交叉轴上的对齐方式
flex布局详解

(二)、flex-item几个CSS属性介绍

1、order:决定flex item排布的顺序

flex布局详解

上一篇:轮播图的实现


下一篇:Less css 技术 快速教程