Flex布局（弹性盒子模型）

Flex（弹性盒子模型）布局

属性分类

弹性容器的相关属性

属性	属性说明
flex-direction	设置主轴方向，确定弹性子元素的排列方式
flex-wrap	当弹性子元素超出弹性容器范围时是否换行
flex-flow	flex-direction和flex-wrap的快捷方式，复合属性
justify-content	设置弹性子元素主轴上的对齐方式
align-items	设置弹性子元素侧轴上的对齐方式
align-content	侧轴上有空白时且有多行时，设置弹性子元素侧轴的对齐方式

定义弹性盒子模型

CSS3中想要设置为弹性盒子模型的话，需要通过display样式属性设置值为flex或inline- flex即可。

display : flex;
display : inline-flex;

按照上述示例代码设置指定元素为弹性盒子模型，该元素成为伸缩容器，其子元素则成为伸缩项目。

• flex: 设置指定元素为块级元素的弹性盒子模型。
• inline- flex: 设置指定元素为行内块级元素的弹性盒子模型。

弹性盒子模型依旧存在浏览器兼容问题:

display : -webkit-flex;
display: -ms-flex;
display: -moz-flex;
display: -o-flex;

flex-direction属性

CSS flex-direction属性适用于伸缩容路元素，用于创建主轴的方向。

flex-direction: row| row-reverse| column| column-reverse

• row:设置主轴是水平方向。
• row-reverse: 与row的排列方向相反。
• column: 设置主轴是垂直方向。
• column-reverse: 与column的排列方向相反。

DEMO row

.c1{
            flex-direction:row;
        }

DEMO row-reverse

.c2{
            flex-direction: row-reverse ;
        }

DEMO column

.c3{
            flex-direction: column ;
        }

DEMO column-reverse

.c4{
            flex-direction: column-reverse ;
        }

justify-content属性

CSS justify - content属性适用于伸缩容器元素，用于设置伸缩项目沿着主轴线的对齐方式。

justify-content: center| flex-start | flex-end| space- between | space-around

• center: 伸缩项目向第一行的中间位置对齐。
• flex-start: 伸缩项目向第-行的开始位置对齐。
• flex-end: 伸缩项目向第一行的结束位置 对齐。
• space-between: 伸缩项目会平均分布在一 行中。
• space-evenly:伸缩项目会平均分布在一行中，两端保留一半的空间。

DEMO center

.c2{
            /* center 一表示伸缩容器沿着主轴的中间位置*/
            justify-content: center;
        }

DEMO flex-start

.c1{
            /* flex-start -表示伸缩容器沿着主轴的起点*/
            justify-content:flex-start;
        }

DEMO flex-end

.c3{
            /* flex-end -表示伸缩容器沿着主轴的终点*/
            justify-content: flex-end;
        }

DEMO space-between

.c4{
            /* space-between 一表示伸缩项目平均分配在伸缩容器*/
            justify-content: space-between;
        }

**DEMO ** space-evenly

.c5{
            /* space-evenly -表示伸缩项目平均分配在伸缩容器,起点和终点位置留白*/
            justify-content: space-evenly;
        }

align-items属性

cSS align-items属性适用于伸缩容器元素，用于设置伸缩项目所在行沿着侧轴线的对齐方式。

align-items: center| flex-start| flex-end| baseline| stretch

• center: 伸缩项目向侧轴的中间位置对齐。
• flex-start: 伸缩项目向侧轴的起点位置对齐。
• flex-end: 伸缩项目向侧轴的终点位置对齐。
• baseline:伸缩项目根据伸缩项目的基线对齐。
• stretch: 默认值，伸缩项目拉伸填充整个伸缩容器。

DEMO center

.c2{
            /* center 一表示伸缩容器沿着侧轴的中间位置*/
            align-items: center;
        }

DEMO flex-start

.c1{
            /* align-items: -表示伸缩容器沿着侧轴的起点*/
            align-items: flex-start;
        }

DEMO flex-end

.c3{
             /* flex-end -表示伸缩容器沿着侧轴的终点*/
            align-items: flex-end;
        }

flex-wrap属性

CSS flex-wrap属性适用于伸缩容器元素，用于设置伸缩容器的子元素是单行显示还是多行显示。

flex-wrap: nowrap| wrap| wrap-reverse

• nowrap:设置伸缩项目单行显示。这种方式可能导致溢出伸缩容器。
• wrap:设置伸缩项多行显示。
• wrap-reverse: 与wrap相反。

DEMO nowrap

.c2{
            width: 500px;
            flex-wrap: nowrap;
        }

DEMO wrap

.c3{
            width: 500px;
            flex-wrap: wrap;
        }

DEMO wrap-reverse

.c4{
            width: 500px;
            flex-wrap: wrap-reverse;  
        }

align-content属性

CSS align-content属性适用于伸缩容器元素，用于设置伸缩行的对齐方式。该属性会更改flex-wrap属性的效果。

align-content: center | flex-start | flex-end | space-between| space-around| stretch

• center: 各行向伸缩容器的中间位置对齐。
• flex-start: 各行向伸缩容器的起点位置对齐。
• flex- end:各行向伸缩容器的终点位置对齐。
• space-between: 各行会平均分布在一行中。
• space- around:各行会平均分布在一行中，两端保留-半的空间。
• stretch:默认值，各行将会伸展以占用额外的空间。

DEMO center

c2{
            align-content: center;
        }

DEMO flex-start

.c1{
            align-content: flex-start;
        }

DEMO flex- end

.c3{
            align-content: flex-end;
        }

DEMO space-between

.c4{
            align-content: space-between;
        }

DEMO space- around

.c5{
            align-content: space-around;
        }

DEMO stretch

.c6{
            align-content: stretch;
        }