在html5中flex布局详解,Flex布局详解（一）

在讲解Flex布局之前，我们首先可以回顾一下我们平时在做行向布局或者纵向布局时候我们页面的布局主要用到哪些布局方法或者思路。

1、normal flow (正常流，也叫文档流)--内联元素从左往右排列，块级元素从上往下排列。

2、float+clear(浮动+清除)

3、position relative+absolute(绝对定位)

4、display inline-block (行向布局)

5、负margin

Flex布局的特点：

1、块级布局侧重垂直方向、行内布局侧重水平方向，flex布局是与方向无关的。

2、flex布局可以实现空间自动分配，自动对齐(flexible：弹性、灵活)

3、flex适用于简单的线性布局，更复杂的布局要交给grid布局

flex布局图解

图解重点理解1和2里面都是叫flex item，包裹1和2边框叫flex container。其次要注意是主轴方向不一定是横的，也可以是竖的，侧轴也是一样。

1、flex container的属性：

(1)、flex-direction 方向

(2)、flex-wrap 换行

(3)、flex-flow 上面两个简写

(4)、justify-content 主轴方向对齐方式

(5)、align-items 侧轴对齐方式

(6)、align-content 多行/列内容对齐方式(用得较少)

(1)、flex-direction常用得属性值有row、row-reverse、column、column-reverse,默认情况下属性值是row。

HTML

CSS

.parent{

background:#ddd;

display:flex;

flex-direction:row; //更改属性值得下面四个效果图

}

.child{

width:50px;

height:50px;

background:white;

margin:10px;

}

值为row时

值为row-reverse时

值为column时

值为column-reverse时

(2)、flex-wrap常用得属性值有wrap、nowrap、wrap-reverse，默认情况下属性值是nowrap。

HTML

CSS

.parent{

background:#ddd;

display:flex;

flex-direction:row;

flex-wrap:nowrap; //更改属性值可以得下面三图效果

}

.child{

width:50px;

height:50px;

background:white;

margin:10px;

}

值为nowrap时

值为wrap时

值为wrap-reverse时

(3)、flex-flow其实是flex-direction和flex-wrap两个缩写，其中属性值可以搭配使用。

CSS

.parent{

background:#ddd;

display:flex;

flex-flow:column wrap;

height:300px; //这个细节要注意，不给父元素高度，会导致不会换行，因为高度一直往下延伸

}

.child{

width:50px;

height:50px;

background:white;

margin:10px;

}

属性值为column和wrap时

(4)、justify-content常用得属性值有center、flex-start、flex-end、space-around、space-between。

CSS

.parent{

background:#ddd;

display:flex;

flex-direction:row;

justify-content:center; //更改属性得下面5图

}

.child{

width:50px;

height:50px;

background:white;

margin:10px;

}

值为center时，子元素居中

值为flex-start时，子元素往起点距靠拢

值为flex-end时，子元素往终点距靠拢

值为space-around时，多余空间平均自动分配子元素四周

值为space-between时，多余空间平均自动分配在两个子元素之间

(5)、align-items常用得属性值有stretch、center、flex-start、flex-end，默认值是stretch。

CSS

.parent{

background:#ddd;

display:flex;

flex-direction:row;

flex-wrap:nowrap;

justify-content:space-around;

align-items:flex-end; //属性值改变时如下图变化所示

}

.child{

width:50px;

background:white;

}

值为stretch时

值为center时，居中

值为flex-start时，侧轴顶部对齐

值为flex-end时，侧轴底部对齐

(6)、align-content常用得属性值有stretch、center、flex-start、flex-end，默认值是stretch。(这个特性比较少用，用于调节多行间距距离，大概理解一下就行)

CSS

.parent{

background:#ddd;

display:flex;

flex-direction:row;

flex-wrap:wrap;

height:230px;

align-content:center; //更改属性值如下图所示变化

}

.child{

width:50px;

height:90px;

background:white;

margin:1px;

}

值为stretch时

值为flex-start时

值为flex-end时

值为center时