首页 > 建站教程 > Div+Css >  Flex 布局教程:实例篇正文

Flex 布局教程:实例篇

    上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法。

    你会看到,不管是什么布局,Flex往往都可以几行命令搞定。



一、骰子的布局

    骰子的一面,最多可以放置9个点。


    运行下面代码,就来看看Flex如何实现,从1个点到9个点的布局。


提示:您可以先修改部分代码再运行




    如果不加说明,本节的HTML模板一律如下。
1<div class="box">
2    <span class="item"></span>
3</div>

    上面代码中,div元素(代表骰子的一个面)是Flex容器,span元素(代表一个点)是Flex项目。如果有多个项目,就要添加多个span元素,以此类推。

    1.1 单项目

    首先,只有左上角1个点的情况。Flex布局默认就是首行左对齐,所以一行代码就够了。

1.box {
2  display: flex;
3}

    设置项目的对齐方式,就能实现居中对齐和右对齐。

1.box {
2  display: flex;
3  justify-content: center;
4}


1.box {
2  display: flex;
3  justify-content: flex-end;
4}

    设置交叉轴对齐方式,可以垂直移动主轴。

1.box {
2  display: flex;
3  align-items: center;
4}


1.box {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5}


1.box {
2  display: flex;
3  justify-content: center;
4  align-items: flex-end;
5}


1.box {
2  display: flex;
3  justify-content: flex-end;
4  align-items: flex-end;
5}

    1.2 双项目

1.box {
2  display: flex;
3  justify-content: space-between;
4}


1.box {
2  display: flex;
3  flex-direction: column;
4  justify-content: space-between;
5}


1.box {
2  display: flex;
3  flex-direction: column;
4  justify-content: space-between;
5  align-items: center;
6}


1.box {
2  display: flex;
3  flex-direction: column;
4  justify-content: space-between;
5  align-items: flex-end;
6}

1.box {
2  display: flex;
3}
4 
5.item:nth-child(2) {
6  align-self: center;
7}

1.box {
2  display: flex;
3  justify-content: space-between;
4}
5 
6.item:nth-child(2) {
7  align-self: flex-end;
8}
    1.3 三项目


1.box {
2  display: flex;
3}
4.item:nth-child(2) {
5  align-self: center;
6}
7.item:nth-child(3) {
8  align-self: flex-end;
9}
    1.4 四项目



1.box {
2  display: flex;
3  flex-wrap: wrap;
4  justify-content: flex-end;
5  align-content: space-between;
6}


    HTML代码:
01<div class="box">
02  <div class="column">
03    <span class="item"></span>
04    <span class="item"></span>
05  </div>
06  <div class="column">
07    <span class="item"></span>
08    <span class="item"></span>
09  </div>
10</div>

    CSS代码:
01.box {
02  display: flex;
03  flex-wrap: wrap;
04  align-content: space-between;
05}
06 
07.column {
08  flex-basis: 100%;
09  display: flex;
10  justify-content: space-between;
11}

    1.5 六项目



1.box {
2  display: flex;
3  flex-wrap: wrap;
4  align-content: space-between;
5}

1.box {
2  display: flex;
3  flex-direction: column;
4  flex-wrap: wrap;
5  align-content: space-between;
6}


    HTML代码:
01<div class="box">
02  <div class="row">
03    <span class="item"></span>
04    <span class="item"></span>
05    <span class="item"></span>
06  </div>
07  <div class="row">
08    <span class="item"></span>
09  </div>
10  <div class="row">
11     <span class="item"></span>
12     <span class="item"></span>
13  </div>
14</div>

    CSS代码:
01.box {
02  display: flex;
03  flex-wrap: wrap;
04}
05 
06.row{
07  flex-basis: 100%;
08  display:flex;
09}
10 
11.row:nth-child(2){
12  justify-content: center;
13}
14 
15.row:nth-child(3){
16  justify-content: space-between;
17}

    1.6 九项目



1.box {
2  display: flex;
3  flex-wrap: wrap;
4}
二、网格布局

    2.1 基本网格布局

        最简单的网格布局,就是平均分布。在容器里面平均分配空间,跟上面的骰子布局很像,但是需要设置项目的自动缩放。



    HTML代码:
1<div class="Grid">
2  <div class="Grid-cell">...</div>
3  <div class="Grid-cell">...</div>
4  <div class="Grid-cell">...</div>
5</div>

    CSS代码:
1.Grid {
2  display: flex;
3}
4 
5.Grid-cell {
6  flex: 1;
7}

    2.2 百分比布局

        某个网格的宽度为固定的百分比,其余网格平均分配剩余的空间。



    HTML代码:
1<div class="Grid">
2  <div class="Grid-cell u-1of4">...</div>
3  <div class="Grid-cell">...</div>
4  <div class="Grid-cell u-1of3">...</div>
5</div>

    CSS代码:
01.Grid {
02  display: flex;
03}
04 
05.Grid-cell {
06  flex: 1;
07}
08 
09.Grid-cell.u-full {
10  flex: 0 0 100%;
11}
12 
13.Grid-cell.u-1of2 {
14  flex: 0 0 50%;
15}
16 
17.Grid-cell.u-1of3 {
18  flex: 0 0 33.3333%;
19}
20 
21.Grid-cell.u-1of4 {
22  flex: 0 0 25%;
23}

三、圣杯布局

    圣杯布局(Holy Grail Layout)指的是一种最常见的网站布局。页面从上到下,分成三个部分:头部(header),躯干(body),尾部(footer)。其中躯干又水平分成三栏,从左到右为:导航、主栏、副栏。



    HTML代码:
1<body class="HolyGrail">
2  <header>...</header>
3  <div class="HolyGrail-body">
4    <main class="HolyGrail-content">...</main>
5    <nav class="HolyGrail-nav">...</nav>
6    <aside class="HolyGrail-ads">...</aside>
7  </div>
8  <footer>...</footer>
9</body>

    CSS代码:
01.HolyGrail {
02  display: flex;
03  min-height: 100vh;
04  flex-direction: column;
05}
06 
07header,
08footer {
09  flex: 1;
10}
11 
12.HolyGrail-body {
13  display: flex;
14  flex: 1;
15}
16 
17.HolyGrail-content {
18  flex: 1;
19}
20 
21.HolyGrail-nav, .HolyGrail-ads {
22  /* 两个边栏的宽度设为12em */
23  flex: 0 0 12em;
24}
25 
26.HolyGrail-nav {
27  /* 导航放到最左边 */
28  order: -1;
29}

    如果是小屏幕,躯干的三栏自动变为垂直叠加。
01@media (max-width: 768px) {
02  .HolyGrail-body {
03    flex-direction: column;
04    flex: 1;
05  }
06  .HolyGrail-nav,
07  .HolyGrail-ads,
08  .HolyGrail-content {
09    flex: auto;
10  }
11}

四、输入框的布局

    我们常常需要在输入框的前方添加提示,后方添加按钮。



    HTML代码:
1<div class="InputAddOn">
2  <span class="InputAddOn-item">...</span>
3  <input class="InputAddOn-field">
4  <button class="InputAddOn-item">...</button>
5</div>

    CSS代码:
1.InputAddOn {
2  display: flex;
3}
4 
5.InputAddOn-field {
6  flex: 1;
7}

五、悬挂式布局

    有时,主栏的左侧或右侧,需要添加一个图片栏。



    HTML代码:
1<div class="Media">
2  <img class="Media-figure" src="" alt="">
3  <p class="Media-body">...</p>
4</div>

    CSS代码:
01.Media {
02  display: flex;
03  align-items: flex-start;
04}
05 
06.Media-figure {
07  margin-right: 1em;
08}
09 
10.Media-body {
11  flex: 1;
12}

六、固定的底栏

    有时,页面内容太少,无法占满一屏的高度,底栏就会抬高到页面的中间。这时可以采用Flex布局,让底栏总是出现在页面的底部。



    HTML代码:
1<body class="Site">
2  <header>...</header>
3  <main class="Site-content">...</main>
4  <footer>...</footer>
5</body>

    CSS代码:
1.Site {
2  display: flex;
3  min-height: 100vh;
4  flex-direction: column;
5}
6 
7.Site-content {
8  flex: 1;
9}

七、流式布局

    每行的项目数固定,会自动分行。



    CSS代码:
01.parent {
02  width: 200px;
03  height: 150px;
04  background-color: black;
05  display: flex;
06  flex-flow: row wrap;
07  align-content: flex-start;
08}
09 
10.child {
11  box-sizing: border-box;
12  background-color: white;
13  flex: 0 0 25%;
14  height: 50px;
15  border: 1px solid red;
16}

    上一篇:Flex 布局教程:语法篇

    文章转载自:阮一峰的网络日志