Flex各种常用布局示例

2425gh
1,474 阅读2分钟

flex布局的特性

操作方便，布局极为简单，移动端应用很广泛

布局原理：flex 是 flexible Box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。

父元素设置

  1. flex-direction：设置主轴的方向
  2. justify-content：设置主轴上的子元素排列方式
  3. flex-wrap：设置子元素是否允许换行
  4. align-content：设置侧轴上的子元素的排列方式（多行）
  5. align-items：设置侧轴上的子元素排列方式（单行）
  6. flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

主轴对齐

改变轴向

默认为X轴

改变轴向 对齐方式也会随着改变

常用的就是改为Y轴：如以下代码

  <style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            flex-direction: column;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>

image-20220324175855255.png

全部属性：

image-20220324153609124.png

换行

默认值为nowrap不换行

换行需满足条件子元素宽度大于父元素宽度

    <style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            flex-wrap: wrap;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>

image-20220324180637072.png

居中对齐

<style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            justify-content: center;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>

image-20220324180929145.png

靠左对齐

    <style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            justify-content: flex-start;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>

image-20220324181314646.png

靠右对齐

 <style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            justify-content: flex-end;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>

image-20220324181358632.png

优先两边对齐

再平均分配剩余空间

如果只有两个元素，则会紧贴左右两边各一个

  <style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            justify-content: space-between;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>

image-20220324181433585.png

元素周围相同的空间

导致行首以及行尾空间较小

均匀排列每个元素 每个元素周围分配相同的空间

 <style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            justify-content: space-around;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>

image-20220324181549794.png

平均分配空间

 <style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            justify-content: space-evenly;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>

image-20220324181625048.png

侧轴单行对齐

如轴向改成Y轴则为居中对齐 靠左 靠右

单行居中对齐

 <style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            align-items: center;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>

image-20220324182103869.png

单行靠上

<style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            align-items: flex-start;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>

image-20220324182134923.png

单行靠下

 <style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            align-items: flex-end;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>

image-20220324182420267.png

侧轴多行对齐

居中对齐

 <style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            flex-wrap: wrap;
            align-content: center;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>

image-20220324182629509.png

多行靠上

 <style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>

image-20220324182913547.png

多行靠下

 <style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-end;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>

image-20220324182943612.png

多行优先两边对齐

再平均分配剩余空间

如果只有两个元素，则会紧贴上下两边各一个

    <style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>

image-20220324183237416.png

多行元素周围相同的空间

导致行首以及行尾空间较小

 <style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            flex-wrap: wrap;
            align-content: space-around;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>

image-20220324183310630.png

多行平均分配

 <style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            flex-wrap: wrap;
            align-content: space-evenly;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>

image-20220324183344607.png

子元素

默认的宽度由内容撑开

默认的高度为父元素的高度

如轴向改为Y轴则宽度为父元素的宽，高度则由内容撑开

子元素平分宽度

平分父元素的宽度(高度则需要把轴向改为Y轴)

flex: 1;

    <style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
        }

        .son:nth-child(2) {
            background-color: pink;
        }

        .son {
            flex: 1;
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>

image-20220324183535720.png

子元素自己在侧轴的对齐方式

如改变轴向为Y轴 那对齐方式则为靠左 靠右 以及居中对齐

靠上

   <style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            align-items: center;
        }

        .son:nth-child(2) {
            background-color: pink;
            align-self: flex-start;
        }

        .son {
            flex: 1;
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>

image-20220324183800385.png

靠下

<style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            align-items: center;
        }

        .son:nth-child(2) {
            background-color: pink;
            align-self: flex-end;
        }

        .son {
            flex: 1;
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>

image-20220324183824356.png

居中

    <style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            align-items: center;
        }

        .son:nth-child(2) {
            background-color: pink;
            align-self: center;
        }

        .son {
            flex: 1;
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>

image-20220324183640012.png

avatar
文章
阅读
粉丝