css3--flex

CSS3 Flex布局详解

最新推荐文章于 2025-03-22 20:24:59 发布

oneblue123

最新推荐文章于 2025-03-22 20:24:59 发布

阅读量299

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/oneblue123/article/details/78038131

css 专栏收录该内容

13 篇文章

订阅专栏

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的属性