Flex布局

网页三兄弟

Flex 布局

Flex布局是什么？
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

CSS3 Flexbox 布局完全指南

flex布局语法

设置容器：子元素排列

flex-direction:
主轴的方向
row 【默认值】主轴为水平方向，起点在左端
row-reverse 主轴为水平方向，起点在右端
column 主轴为垂直方向，起点在上沿
column-reverse 主轴为垂直方向，起点在下沿
flex-wrap:
换行方式		 nowrap 【默认值】不换行
wrap 换行，第一行在上方
wrap-reverse 换行，第一行在下方
flex-flow:
方向和换行的简写
row nowrap flex-flow: flex-direction flex-wrap，默认值为row nowrap
justify-content:
元素的对齐
 flex-start 【默认值】左对齐
flex-end 右对齐
center 居中
space-between 两端对齐，项目之间的间隔都相等
space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
align-items:
交叉轴上如何对齐
stretch 【默认值】如果项目未设置高度或设为auto，将占满整个容器的高度
flex-start 交叉轴的起点对齐
flex-end 交叉轴的终点对齐
center 交叉轴的中点对齐
baseline 项目的第一行文字的基线对齐
align-content:
多根轴线的对齐方式
 stretch 【默认值】轴线占满整个交叉轴
flex-start 与交叉轴的起点对齐
flex-end 与交叉轴的终点对齐
center 与交叉轴的中点对齐
space-between 与交叉轴两端对齐，轴线之间的间隔平均分布
space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍

设置元素自身

order
 定义项目的排列顺序。数值越小，排列越靠前，默认为0
flex-grow
 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
flex-shrink
 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
flex-basis
 定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
flex
 flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

常见布局

水平垂直居中

1
2
3
display: flex;
justify-content: center;
align-items: center;

enter description here

左对齐

1
2
display: flex;
justify-content: flex-start;

右对齐

1
2
display: flex;
justify-content: flex-end;

两端对齐

1
2
display: flex;
justify-content: space-between;

enter description here

普通排列（从左到右折行）

1
2
3
display: flex;
flex-wrap: wrap;
flex-direction: row;

enter description here

两栏布局：左固定，右自适应宽度

右固定也一样，把左设置：flex-grow: 1

1
2
3
4
5
6
7
8
9
10
11
12
.demo-wrap3 {
  display: flex;
     .left {
         width: 100px;
         background: #A0DCF7;
     }
     .right {
         flex-grow: 1;
         margin-left: 10px;
         background: #A0DCF7;
     }
}

enter description here

三栏布局：左右固定，中间自适应

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.demo-wrap4 {
    display: flex;
    .left {
        width: 120px;
        background: #A0DCF7;
    }
    .center {
        margin: 0 10px;
        background: #A0DCF7;
        flex-grow: 1;
    }
    .right {
        width: 180px;
        background: #A0DCF7;
    }
}

enter description here

圣杯布局

1
2
3
4
5
6
7
8
9
<section class="demo-wrap6">
    <header>顶部</header>
    <main>
        <article class="left">左侧</article>
        <article class="center">中间</article>
        <article class="right">右侧</article>
    </main>
    <footer>底部</footer>
</section>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.demo-wrap6 {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    text-align: center;
    line-height: 50px;

    header, footer {flex: 0 0 100px;background-color: #A0DCF7;color: #ffffff;}
    main {
        background-color: #ffffff;
        display: flex;
        flex-direction: row;
        flex: 1 0 auto;
        margin: 10px 0;
        .left, .right {flex: 0 0 200px;background-color: #C2E9FA;}
        .center {flex: 1 0 auto;background-color: #E2F5FD;}
    }
}
@media screen and (max-width: 600px) {
    main {
        flex-direction: column;
    }
    .left, .right {
        flex: 1 0 auto;
    }
    .center {
        flex: 2 0 auto;
    }
    .left, .right {
        order: 1
    }
}

enter description here

瀑布流

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="demo-wrap5">
<div class="item"><img src="../public/images/test/pic_1.jpg" alt=""></div>
<div class="item"><img src="../public/images/test/pic_2.jpg" alt=""></div>
<div class="item"><img src="../public/images/test/pic_3.jpg" alt=""></div>
<div class="item"><img src="../public/images/test/pic_7.jpg" alt=""></div>
<div class="item"><img src="../public/images/test/pic_5.jpg" alt=""></div>
<div class="item"><img src="../public/images/test/pic_6.jpg" alt=""></div>
<div class="item"><img src="../public/images/test/pic_7.jpg" alt=""></div>
<div class="item"><img src="../public/images/test/pic_8.jpg" alt=""></div>
<div class="item"><img src="../public/images/test/pic_9.jpg" alt=""></div>
<div class="item"><img src="../public/images/test/pic_10.jpg" alt=""></div>
<div class="item"><img src="../public/images/test/pic_1.jpg" alt=""></div>
<div class="item"><img src="../public/images/test/pic_6.jpg" alt=""></div>
<div class="item"><img src="../public/images/test/pic_5.jpg" alt=""></div>
<div class="item"><img src="../public/images/test/pic_4.jpg" alt=""></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
.demo-wrap5{
    width: 800px;
    margin: 0 auto;
    column-count: 4;
    column-gap: 0;
    border: 2px solid #ddd;

    .item{
        box-sizing: border-box;
        break-inside: avoid;
        padding: 10px;
    }
}

enter description here