html5 flex布局纵向,CSS3 Flex布局（伸缩布局）

1.png

2.png

demo01的代码：

section {

width: 80%;

height: 200px;

border: 1px solid pink;

margin: 100px auto;

/*父级盒子添加flex*/

display: flex;/*伸缩布局模式*/

min-width: 500px;

}

section div {

width: 100%;

}

section div:nth-child(1) {

background-color: pink;

flex: 1; /*子盒子添加份数 flex: 1;不能跟单位*/

}

section div:nth-child(2) {

background-color: purple;

flex: 2; /*子盒子添加份数*/

}

section div:nth-child(3) {

background-color: pink;

flex: 3; /*子盒子添加份数*/

}

1

2

3

效果图：

3.png

demo02伸缩布局固定宽度

代码如下：

section {

width: 80%;

height: 200px;

border: 1px solid pink;

margin: 100px auto;

/*父级盒子添加flex*/

display: flex;/*伸缩布局模式*/

min-width: 500px;

}

section div {

width: 100%;

}

section div:nth-child(1) {

background-color: pink;

width: 300px;

}

section div:nth-child(2) {

background-color: purple;

margin: 0 5px;

flex: 1; /*子盒子添加份数*/

}

section div:nth-child(3) {

background-color: pink;

flex: 2; /*子盒子添加份数*/

}

1

2

3

效果图：

QQ截图20180705144916.png

demo03伸缩布局排列方式

注意：是给父盒子添加flex-direction:column

flex-direction:column

4.png

QQ截图20180705145647.png

代码如下：

section {

width: 80%;

height: 200px;

border: 1px solid pink;

margin: 100px auto;

/*父级盒子添加flex*/

display: flex;/*伸缩布局模式*/

min-width: 500px;

/*给父亲加flex-direction*/

flex-direction: column; /*排列方式 ，可以是水平(row)，也可以是垂直*/

}

section div {

width: 100%;

}

section div:nth-child(1) {

background-color: pink;

flex: 1; /*子盒子添加份数*/

}

section div:nth-child(2) {

background-color: purple;

/*margin: 0 5px;*/

flex: 1; /*子盒子添加份数*/

}

section div:nth-child(3) {

background-color: pink;

flex: 2; /*子盒子添加份数*/

}

1

2

3

效果图：

5.png

justify-content属性：调整主轴对齐(水平对齐)

子盒子如何在父盒子里面水平对齐

注意：这些属性是给父亲添加的

6.png

我的代码

section {

width: 1000px;

height: 300px;

border: 2px solid pink;

margin: 100px auto;

display: flex;

/*justify-content: flex-start;让子元素从父元素的开头开始排序，但是顺序不变*/

/*justify-content: flex-end;让子元素从父元素的开头开始排序，但是顺序不变*/

/*justify-content: center;让子元素从父元素的中间显示*/

/*justify-content: space-between;左右的盒子贴近父盒子，中间的盒子平均分配*/

/*justify-content: space-around;相当于给盒子左右添加margin值*/

}

div {

width: 250px;

height: 100%;

}

div:first-child {

background-color: pink;

}

div:nth-child(2) {

background-color: purple;

}

div:nth-child(3) {

background-color: skyblue;

}

1

2

3

align-items属性:调整侧轴(垂直对齐)

子盒子如何在父盒子里面垂直对齐

注意：这些属性是给父亲添加的

针对于一行的情况使用

7.png

我的代码

section {

width: 1000px;

height: 600px;

border: 2px solid pink;

margin: 100px auto;

display: flex;

justify-content: space-around;

/*垂直对齐*/

/*align-items: flex-start;上对齐*/

/*align-items: flex-end;底对齐*/

/*align-items: center;垂直居中对齐*/

/*align-items: stretch;让子元素拉伸父元素的高度，相当于height:100%，前提下子元素没有设置高度*/

}

div {

width: 250px;

/*height: 200px;*/

}

div:first-child {

background-color: pink;

}

div:nth-child(2) {

background-color: purple;

}

div:nth-child(3) {

background-color: skyblue;

}

1

2

3

align-content属性：侧轴

8.png

flex-wrap属性:控制是否换行

9.png

10.png

order属性:

11.png

请注意：使用flex布局的容器，子元素的float、clear和vertical-align属性将不起作用。