css之flex布局

作者: 空气KQ | 来源:发表于2019-04-03 11:02 被阅读0次

实现flex布局

第一个步启动

display:flex;
display:-webkit-flex;

告诉浏览器说我们要启动弹性浮动

flex-direction 设置方向
素材代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            flex-direction: row;
            display:flex;
        }

        .item {
            width: 100px;
            height: 100px;
            background: #ff2222;
            margin-right: 10px;
            margin-bottom: 10px
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>

</html>

flex-direction: row; 水平方向，左到右，默认布局

image.png
flex-direction: row-reverse 反转过来。右到左

image.png
flex-direction:column 上到下

image.png
flex-direction:columnimage.png 下到上

image.png

flex-wrap 属性
设置是否允许项目多行排列，以及多行排列时换行的方向。

 flex-wrap: nowrap（默认值） | wrap | wrap-reverse

nowrap（默认值）：不换行。如果单行内容过多，则溢出容器。
wrap：容器单行容不下所有项目时，换行排列。
wrap-reverse：容器单行容不下所有项目时，换行排列。换行方向为wrap时的反方向。
将上面的素材代码增加个宽度限制，刚才每个项目都是100px,现在给容器给到330，只能够容纳3个，并且我们增加项目到5个

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            flex-direction: row;
            display:flex;
            width: 330px;
            border: 1px solid #000;
           flex-wrap: nowrap
        }

        .item {
            width: 100px;
            height: 100px;
            background: #ff2222;
            margin-right: 10px;
            margin-bottom: 10px
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</body>

</html>

nowrap（默认值）：不换行。如果单行内容过多，则溢出容器。
image.png

wrap：容器单行容不下所有项目时，换行排列。

image.png

wrap-reverse：容器单行容不下所有项目时，换行排列。换行方向为wrap时的反方向

image.png

justify-content 属性

设置项目在主轴方向上对齐方式，以及分配项目之间及其周围多余的空间。
flex-start（默认值）：项目对齐主轴起点，项目间不留空隙。
素材代码进行改造

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            flex-direction: row;
            display:flex;
          
            border: 1px solid #000;
            flex-wrap: nowrap;
            justify-content:flex-start;
        }

        .item {
            width: 100px;
            height: 100px;
            background: #ff2222;
            border: 1px solid #f60;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</body>

</html>

center：项目在主轴上居中排列，项目间不留空隙。主轴上第一个项目离主轴起点距离等于最后一个项目离主轴终点距离。

image.png
justify-content: flex-end;项目对齐主轴终点，项目间不留空隙。

image.png
space-between：项目间间距相等，第一个项目离主轴起点和最后一个项目离主轴终点距离为0。

image.png
space-around：与space-between相似。不同点为，第一个项目离主轴起点和最后一个项目离主轴终点距离为中间项目间间距的一半。

image.png
space-evenly：项目间间距、第一个项目离主轴起点和最后一个项目离主轴终点距离等于项目间间距。

image.png

align-items 属性

设置项目在行中的对齐方式。
素材代码改造

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            flex-direction: row;
            display:flex;
            width: 100px;
            border: 1px solid #000;
            flex-wrap: nowrap;
            justify-content:flex-start;
            height: 500px;
            align-items:stretch;
           
        }

        .item {
            /* width: 100px;
            height: 100px; */
            background: #ff2222;
            border: 1px solid #f60;
           
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</body>

</html>

stretch（默认值）：项目拉伸至填满行高。

image.png

flex-start：项目顶部与行起点对齐。

image.png

center：项目在行中居中对齐。

image.png

flex-end：项目底部与行终点对齐。

image.png

baseline：项目的第一行文字的基线对齐。。

image.png

align-content 属性
多行排列时，设置行在交叉轴方向上的对齐方式，以及分配行之间及其周围多余的空间。
素材代码改造

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            flex-direction: row;
            display:flex;
            width: 100px;
            border: 1px solid #000;
            flex-wrap: nowrap;
            height: 500px;
            align-content: stretch;
            flex-wrap: wrap;
           
        }

        .item {
            width: 50px;
            height: 50px;
            background: #ff2222;
            border: 1px solid #f60;
           
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">Green div with more content</div>
    </div>
</body>

</html>

stretch（默认值）：当未设置项目尺寸，将各行中的项目拉伸至填满交叉轴。当设置了项目尺寸，项目尺寸不变，项目行拉伸至填满交叉轴。

image.png

flex-start：首行在交叉轴起点开始排列，行间不留间距。

image.png

center：行在交叉轴中点排列，行间不留间距，首行离交叉轴起点和尾行离交叉轴终点距离相等。

image.png

flex-end：尾行在交叉轴终点开始排列，行间不留间距。

image.png

space-between：行与行间距相等，首行离交叉轴起点和尾行离交叉轴终点距离为0。

image.png

space-around：行与行间距相等，首行离交叉轴起点和尾行离交叉轴终点距离为行与行间间距的一半。

image.png

space-evenly：行间间距、以及首行离交叉轴起点和尾行离交叉轴终点距离相等。

image.png

order 属性

设置项目沿主轴方向上的排

image.png

列顺序，数值越小，排列越靠前。属性值为整数。

flex-shrink 属性

当项目在主轴方向上溢出时，通过设置项目收缩因子来压缩项目适应容器。属性值为项目的收缩因子，属性值取非负数。
说白点就是重新计算尺寸，根据给的比例
比如容器宽度

.warp{
  width:400px
}
.item1
{
width:150
}
.item2
{
width:200
}
.item3
{
width:100
}

item1+item2+item3=450;就会出现多出了50，那么我们设置下比例分配

.item1
{
width:150; flex-shrink: 3;
}
.item2
{
width:200; flex-shrink: 2;
}
.item3
{
width:100; flex-shrink: 1;
}

最后计算公式，跳转后的尺寸

余出值y1=400-150+200+100=-50;
150*3+200*2+100*1=450+400+100=900;
最后计算
项目值=原来值大小 - 余出值y1*原来值大小*比例 / 比例数的和
item1=150 - 50 * 150 * 3 / 900≈ 125px
item2=200 - 50 * 200* 2 / 900≈ 177px
item3=100 - 50 * 100 *1 / 900≈ 94px

flex-grow 属性

当项目在主轴方向上还有剩余空间时，通过设置项目扩张因子进行剩余空间的分配。属性值为项目的扩张因子，属性值取非负数。

.container{

  display: flex;

  width: 400px; // 容器宽度为400px

}

.item1{

  width: 80px;

  flex-grow: 3;

}

.item2{

  width: 120px;

  flex-grow: 1;

}

.item3{// 项目3未设置flex-grow，默认flex-grow值为0

  width: 140px;

}

在这个例子中，容器的剩余空间为 400 - (80 + 120 + 140) = 60px。剩余空间按 60 / (3 + 1 + 0) = 15px进行分配：

item1的最终宽度为：80+ (15 * 3) = 125px
item2的最终宽度为：120 + (15 * 1) = 135px
item3的最终宽度为：140 + (15 * 0) =140px

flex-basis 属性
当容器设置flex-direction为row或row-reverse时，flex-basis和width同时存在，flex-basis优先级高于width，也就是此时flex-basis代替项目的width属性。
当容器设置flex-direction为column或column-reverse时，flex-basis和height同时存在，flex-basis优先级高于height，也就是此时flex-basis代替项目的height属性。
需要注意的是，当flex-basis和width（或height），其中一个属性值为auto时，非auto的优先级更高。

网友评论

本文标题：css之flex布局

本文链接：https://www.haomeiwen.com/subject/qzhabqtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

css之flex布局

实现flex布局

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读