css之flex布局

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

css flex布局详解
小程序CSS知识点
CSS 圣杯布局（左右固定、中间自适应）
css
css flex
html编程技巧
阮一峰CSS flex -弹性布局
flex.css：移动端 flex 布局
经典CSS布局：双飞翼和圣杯布局
关于Flex的使用

实现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布局详解
css flex布局详解 css flex布局详解1css flex布局详解2
小程序CSS知识点
一、flex布局Flex 布局教程：语法篇Flex 布局教程：实例篇二、CSS position 属性总结CSS...
CSS 圣杯布局（左右固定、中间自适应）
CSS 圣杯布局 flex 布局（推荐）定位布局（推荐） css3 calc布局（影响性能，不推荐） flex:...
css
css基础css选择器css常见样式1css常见样式2CSS布局上CSS布局下flex布局塔防小游戏flex布局青...
css flex
css flex布局采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器...
html编程技巧
字体外部描边 Css 基于flex布局的盒子上下居中 Css 基于flex布局的盒子左右居中 Css 基于flex...
阮一峰CSS flex -弹性布局
阮一峰CSS flex 布局教程 Flex 布局教程：实例篇
flex.css：移动端 flex 布局
flex.css 快速布局什么是 flex.css css3 flex 布局相信很多人已经听说过甚至已经在开发中...
经典CSS布局：双飞翼和圣杯布局
圣杯布局 HTML CSS 双飞翼布局 HTML CSS Flex布局 HTML和圣杯布局一样CSS
关于Flex的使用
基本概念 css3 中Flex意为‘弹性布局’，采用css3 Flex布局的元素，称为Flex容器,它的所有子元素...