css3--flex

来源：互联网发布：云同步盘 linux 编辑：程序博客网时间：2024/05/24 22:45

CSS3--flex(一)

This is a important css3 layout ,espically,in mobile.so,we will introduce the using of flex layout.

1.容器的属性

（1）flex-direction

A.flex-direction:column(垂直正序排列)

<div class="contanier">    <div class="item01">item01</div>    <div class="item02">item02</div>    <div class="item03">item03</div></div>

.contanier{    display: flex;    display: -webkit-flex;    /*垂直排列*/    flex-direction: column;}

效果如下：

B.flex-direction:column-reverse(垂直倒序排列)

.contanier{    display: flex;    display: -webkit-flex;    /*垂直倒序排列*/    flex-direction: column-reverse;;}

C.flex-direction:row(水平（从左侧到右侧）)

.contanier{    display: flex;    display: -webkit-flex;    /*水平排列*/    flex-direction: row;}

C.flex-direction:row-reverse(从容器右侧至左侧水平排列)

.contanier{       display: flex;       display: -webkit-flex;       /*水平排列（从容器右侧至左侧）*/       flex-direction: row-reverse;;   }

（2）flex-wrap属性

flex-wrap属性定义，如果一条轴线排不下，如何换行。

 flex-wrap: nowrap | wrap | wrap-reverse;

A .nowrap（默认）：不换行。

<div class="container">    <div class="item01">1</div>    <div class="item01">2</div>    <div class="item01">3</div>    <div class="item01">4</div>    <div class="item01">5</div>    <div class="item01">6</div></div>

.container{    display: flex;    width:400px;    display: -webkit-flex;    flex-direction:row;    /*nowrap（默认）：不换行。*/    flex-wrap: nowrap;    border: 1px solid #0000ff;}

B .wrap：换行，第一行在上方。

<div class="container">    <div class="item01">1</div>    <div class="item01">2</div>    <div class="item01">3</div>    <div class="item01">4</div>    <div class="item01">5</div>    <div class="item01">6</div>    <div class="item01">7</div>    <div class="item01">8</div>    <div class="item01">9</div>    <div class="item01">10</div></div>

.container{    display: flex;    width:400px;    display: -webkit-flex;    flex-direction:row;    /*wrap：换行,第一行在上方。。*/    flex-wrap: wrap;    border: 1px solid #0000ff;}

（3）wrap-reverse：换行，第一行在下方。

.container{    display: flex;    width:400px;    display: -webkit-flex;    flex-direction:row;    /*wrap-reverse：换行,第一行在下方。。*/    flex-wrap: wrap-reverse;    border: 1px solid #0000ff;}

3.3 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box {  flex-flow: <flex-direction> || <flex-wrap>;}

.container{    display: flex;    width:400px;    display: -webkit-flex;    /*flex-direction:row;*/    /*!*wrap-reverse：换行,第一行在下方。。*!*/    /*flex-wrap: wrap-reverse;*/    border: 1px solid #0000ff;    flex-flow: row  wrap-reverse;}

(4) justify-content属性

justify-content属性定义了项目在主轴上(水平方向上)的对齐方式。

A. justify-content: flex-start(左对齐)

<div class="container">    <div class="item01">1</div>    <div class="item02">2</div>    <div class="item03">3</div></div>

.container{    display: flex;    width: 400px;    border: 1px solid #0000ff;    display: -webkit-flex;    flex-direction: row;    justify-content: flex-start;}

效果：

B. justify-content: flex-end(右对齐)

.container{    display: flex;    width: 400px;    border: 1px solid #0000ff;    display: -webkit-flex;    flex-direction: row;    justify-content: flex-end;}

C.justify-content: center(居中)

.container{    display: flex;    width: 400px;    border: 1px solid #0000ff;    display: -webkit-flex;    flex-direction: row;    justify-content: center;}

D.justify-content:space-between(两端对齐，项目之间的间隔都相等)

.container{    display: flex;    width: 400px;    border: 1px solid #0000ff;    display: -webkit-flex;    flex-direction: row;    justify-content: space-between;}

E.justify-content:space-around(每个条目两侧的间隔相等。所以，条目之间的间隔比条目与边框的间隔大一倍。)

.container{       display: flex;       width: 400px;       border: 1px solid #0000ff;       display: -webkit-flex;       flex-direction: row;       justify-content: space-around;   }

(5) align-items属性

align-items属性定义条目在交叉轴上（垂直方向上）如何对齐。

A..flex-start：交叉轴的起点对齐。

.container{    background-color: #ccc;    width:400px;    height: 200px;    display: flex;    display: -webkit-flex;    flex-direction:row;    /*垂直方向上 顶部对齐*/   align-items: flex-start;}

B.flex-end:与交叉轴的终点对齐

.container{    background-color: #ccc;    width:300px;    height: 200px;    display: flex;    display: -webkit-flex;    flex-direction:row;    /*垂直方向上 底部对齐*/   align-items: flex-end;}

C.flex-end:与交叉轴的中点对齐。

.container{    background-color: #ccc;    width:300px;    height: 200px;    display: flex;    display: -webkit-flex;    flex-direction:row;    /*垂直方向上 与交叉轴的中点对齐。*/    align-items: center;}

D.baseline: 项目的第一行文字的基线对齐。

.container{    background-color: #ccc;    width:300px;    height: 200px;    display: flex;    display: -webkit-flex;    flex-direction:row;    /*垂直方向上 与交叉轴的中点对齐。*/    align-items: baseline;}

E：stretch（默认值）：如果条目未设置高度或设为auto，将占满整个容器的高度。

.container{    background-color: #ccc;    width:300px;    height: 200px;    display: flex;    display: -webkit-flex;    flex-direction:row;    align-items: stretch;}

（6）align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
该属性可能取6个值。
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
flex容器的属性介绍就到这里，下一篇接着介绍flex 条目 item的属性

阅读全文

0 0