flex.md

2018-12-07 本文已影响0人 _无为_

Flexbox

寻根溯源话布局

一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不由得感觉眼前一亮，顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐，然而很快就失望的发现 CSS 中并不存在 float: center 的写法，那么 text-align: center、verticle-align: center 是否可行呢？答案也是否定的。这两个属性只能用于行内元素，对于块级元素的布局是无效的。

在网页布局没有进入 CSS 的时代，排版几乎是通过 table 元素实现的，在 table 的单元格里可以方便的使用 align、valign 来实现水平和垂直方向的对齐，随着 Web 语义化的流行，这些写法逐渐淡出了视野，CSS 标准为我们提供了 3 种布局方式：标准文档流、浮动布局和定位布局。这几种方式的搭配使用可以轻松搞定 PC 端页面的常见需求，比如实现水平居中可以使用 margin: 0 auto，实现水平垂直同时居中可以如下设置：

.dad {
    position: relative;
}复制代码

.son {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}复制代码

.dad {
    position: relative;
}复制代码

.son {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}复制代码

然而，这些写法都存在一些缺陷：缺少语义并且不够灵活。我们需要的是通过 1 个属性就能优雅的实现子元素居中或均匀分布，甚至可以随着窗口缩放自动适应。在这样的需求下，CSS 的第 4 种布局方式诞生了，这就是我们今天要重点介绍的 flex 布局。

flex 基本概念

flexbox概念

flexbox模块提供了一个有效的布局方式，无视窗口大小或未知元素情况下，都可以智能，灵活的调整和分配元素与空间两者的关系。简单说，可以自动调整，计算元素在空间大小。

相对和绝对flex项目

相对flex项目的间距是根据内容大小计算，绝对flex项目中，是根据flex的属性计算，非内容大小。

相对flex项目

 .parent{
            display: flex;
        }
        li{
            list-style: none;
            width:100px;
            height: 100px;
            background-color: aqua;
            margin:0 8px;
        }

image.png

绝对flex 项目flex: 0 1 200px;width:100px; 不会根据100px去布局。

 .parent{
            display: flex;
        }
        li{
            list-style: none;
            flex: 0 1 200px;
            width:100px;//不起作用
            height: 100px;
            background-color: aqua;
            margin:0 8px;
        }

image.png

flex 内设置属性控制子元素

just-content // x轴（主轴）水平方向

justify-content: flex-start || flex-end ||  center || space-between || space-around ;
space-between // 子元素等间距布局
space-around  // 首尾子元素贴左右边，其他元素等间距分布

align-item:center; // y轴（交叉轴）垂直方向

align-item:flex-start || flex-end ||  center || baseline || stretch;

flex-derection:row || row-reverse || column || column-reverse;
flex-wrap: wrap || nowrap || wrap-reverse ;
flex-flow: flex-derection || flex-wrap; //是 flex-derection 与flex-wrap的复合写法

子元素自己控制自己布局

flex: order|| flex-grow || flex-shrink || flex-basis; 简称GSB

flex-grow:0;时不自动填充父容器剩余空间
flex-shrink:0 ;父容器空间不够时不压缩，子元素保持原有大小，只有为1时，子元素才还自动收缩，适应父容器，
flex-basis:auto; 时子元素自己控制自己宽度，有值时如flex-basis:200px;子元素自己width不起作用
flex-order:0;为其他值时按数职大小顺序显示

align-self 子元素更灵活控制自己位置

align-self: auto || flex-start || flex-end || center || baseline || stretch;

flex 顶部导航

    <style>
    html,body{
        width:100%;
        height: 100%;
    }
    ul{
        margin: 0;
        padding: 0;
        display: flex;
    }
    li{
        list-style: none;
        flex:0 0 auto;
        width:100px;
        height: 100px;
        background-color: aquamarine;
        margin-right: 30px;
        
    }
    li:nth-child(1){
        margin-right: auto;
        margin-left:30px;
    }
    
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
</html>

image.png

使用 flex 布局首先要设置父容器 display: flex，然后再设置 justify-content: center 实现水平居中，最后设置 align-items: center 实现垂直居中。

#dad {
    display: flex;
    justify-content: center;
    align-items: center
}

image.png

就是这么简单，大功告成。等等，好像哪里不对，justify-content 和 align-items 是啥？哪里可以看出横向、竖向的语义？是的，flex 的确没有那么简单，这就要从两个基本概念说起了。

image.png

说来也不难，flex 的核心的概念就是容器和轴。容器包括外层的 父容器 和内层的 子容器，轴包括主轴和 交叉轴，可以说 flex 布局的全部特性都构建在这两个概念上。flex 布局涉及到 12 个 CSS 属性（不含 display: flex），其中父容器、子容器各 6 个。不过常用的属性只有 4 个，父容器、子容器各 2 个，我们就先从常用的说起吧。

1. 容器

容器具有这样的特点：父容器可以统一设置子容器的排列方式，子容器也可以单独设置自身的排列方式，如果两者同时设置，以子容器的设置为准。

image.png

1.1 父容器

设置子容器沿主轴排列：justify-content

justify-content 属性用于定义如何沿着主轴方向排列子容器。

image.png

flex-start：起始端对齐

image.png

flex-end：末尾段对齐

image.png

center：居中对齐

image.png

space-around：子容器沿主轴均匀分布，位于首尾两端的子容器到父容器的距离是子容器间距的一半。

image.png

space-between：子容器沿主轴均匀分布，位于首尾两端的子容器与父容器相切。

image.png

设置子容器如何沿交叉轴排列：align-items

align-items 属性用于定义如何沿着交叉轴方向分配子容器的间距。

image.png

flex-start：起始端对齐

image.png

flex-end：末尾段对齐

image.png

center：居中对齐

image.png

baseline：基线对齐，这里的 baseline 默认是指首行文字，即 first baseline，所有子容器向基线对齐，交叉轴起点到元素基线距离最大的子容器将会与交叉轴起始端相切以确定基线。

image.png

stretch：子容器沿交叉轴方向的尺寸拉伸至与父容器一致。

image.png

1.2 子容器

在主轴上如何伸缩：flex

image.png

子容器是有弹性的（flex 即弹性），它们会自动填充剩余空间，子容器的伸缩比例由 flex 属性确定。

flex 的值可以是无单位数字（如：1, 2, 3），也可以是有单位数字（如：15px，30px，60px），还可以是 none 关键字。子容器会按照 flex 定义的尺寸比例自动伸缩，如果取值为 none 则不伸缩。

虽然 flex 是多个属性的缩写，允许 1 - 3 个值连用，但通常用 1 个值就可以满足需求，它的全部写法可参考下图。

image.png

单独设置子容器如何沿交叉轴排列：align-self

image.png

每个子容器也可以单独定义沿交叉轴排列的方式，此属性的可选值与父容器 align-items 属性完全一致，如果两者同时设置则以子容器的 align-self 属性为准。

flex-start：起始端对齐

image.png

flex-end：末尾段对齐

center：居中对齐

image.png

baseline：基线对齐

image.png

stretch：拉伸对齐

image.png

2. 轴

如图所示，轴包括主轴和 交叉轴，我们知道 justify-content 属性决定子容器沿主轴的排列方式，align-items 属性决定子容器沿着交叉轴的排列方式。那么轴本身又是怎样确定的呢？在 flex 布局中，flex-direction 属性决定主轴的方向，交叉轴的方向由主轴确定。

image.png

主轴

主轴的起始端由 flex-start 表示，末尾段由 flex-end 表示。不同的主轴方向对应的起始端、末尾段的位置也不相同。

向右：flex-direction: row

image.png

向下：flex-direction: column

image.png

向左：flex-direction: row-reverse

image.png
向上：flex-direction: column-reverse

image.png

交叉轴

主轴沿逆时针方向旋转 90° 就得到了交叉轴，交叉轴的起始端和末尾段也由 flex-start 和 flex-end 表示。

上面介绍的几项属性是 flex 布局中最常用到的部分，一般来说可以满足大多数需求，如果实现复杂的布局还需要深入了解更多的属性。

flex 进阶概念

1. 父容器

设置换行方式：flex-wrap

决定子容器是否换行排列，不但可以顺序换行而且支持逆序换行。

image.png

nowrap：不换行

image.png

wrap：换行

image.png

wrap-reverse：逆序换行

逆序换行是指沿着交叉轴的反方向换行。

image.png

轴向与换行组合设置：flex-flow

flow 即流向，也就是子容器沿着哪个方向流动，流动到终点是否允许换行，比如 flex-flow: row wrap，flex-flow 是一个复合属性，相当于 flex-direction 与 flex-wrap 的组合，可选的取值如下：
- row、column 等，可单独设置主轴方向
- wrap、nowrap 等，可单独设置换行方式
- row nowrap、column wrap 等，也可两者同时设置
多行沿交叉轴对齐：align-content

当子容器多行排列时，设置行与行之间的对齐方式。