W3C推荐的新布局模式 【CSS Flex布局】详解

概述

在 flex 布局模型中，flex 容器的子级可以在任何方向上布局，并且可以“伸缩”它们的大小，要么增长以填充未使用的空间，要么缩小以避免溢出父级。孩子的水平和垂直对齐都可以很容易地操作。这些框的嵌套（水平内垂直，或垂直内水平）可用于构建二维布局。

CSS 灵活框布局模块 Level 1 – W3C 候选人推荐

在真正了解之前，我一直使用float进行布局，但了解了Flex布局之后，发现它是个超好用的排版工具，也是它拯救了我，用它来做网页非常容易达到响应式，因为它有极强大的适应能力，可以随着网页缩放去改变比例。

flex 布局背后的主要思想是：让容器能够改变其项目的宽度/高度（和顺序）以最好地填充可用空间（主要是为了适应各种显示设备和屏幕尺寸）。

Flex 布局表面上类似于块布局、常规布局（基于垂直的块和基于水平的内联）。它缺少许多可用于块布局的更复杂的以文本或文档为中心的属性，例如floats和columns。但似乎最重要的是，与常规布局相反，Flex布局与方向无关。Flex可用于Web 应用程序和复杂的网页，通可以自由分配空间和对齐内容。

但在大型的布局情况下我更推荐Grid网格布局。当然在我们还没学习到的情况下不需要考虑这些

我们可以看到CSDN使用了Flex布局

那么在了解了这么多信息之后，现在我们可以开始正式学习Flex布局了

属性

弹性容器的属性（父级）

display

display:flex 定义了一个弹性容器；内联或块取决于给定的值。它为所有直接子级启用了弹性上下文。

如果你想要flex的布局生效就需要提前给父元素设置 display:flex

.content{
    
    
	display:flex
}

我们看一个示例

<style>
        .content {
     
     
            display: flex;
        }
        
        .box-parent{
     
     
            width: 100%;
            border: 1px red solid;
            margin-bottom: 10px;
        }
        .box {
     
     
            width: 200px;
            height: 100px;
            background-color: black;
            margin: 10px;
            color: aliceblue;
        }
    </style>
    <!-- 添加的情况 -->
    <div class="box-parent content">
        <h1>display: flex</h1>
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
    <!-- 正常的情况 -->
    <div class="box-parent">
        <h1>正常情况</h1>
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>

你能发现区别吗 ?

flex-direction

flex-direction 决定了弹性方向，它建立了主轴，从而定义了弹性项目放置在弹性容器中的方向。

Flex 是一个单向布局概念。将弹性项目视为主要以水平行或垂直列布局。

.content{
    
    
  flex-direction: row | row-reverse | column | column-reverse;
}

• row（默认）：从左到右
• row-reverse ：从右到左
• column : 从上到下
• column-reverse : 从下到上

在设置了 flex-direction 之后因为默认是flex-direction:row ，这就是为什么前面的 display:flex 会默认排成一列，从左到右

flex-wrap

flex-wrap 用于包装盒子，默认情况下，弹性项目都会自己主动组合成一行。

我们可以更改它并允许使用此属性根据需要的来包装项目。

.container {
    
    
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap（默认）：所有弹性项目都将在一行，当宽度不够时则会压缩空间
• wrap : 项目将从上到下包裹成多行，当宽度不够时则会将最右边的项目向下换行
• wrap-reverse : 项目将从下到上换行成多行。当宽度不够时则会将最左边的项目向上换行

flex-flow

flex-flow 用于设置盒子的弹性流动.

这是 flex-directionandflex-wrap 属性的简写，它们共同定义了 flex 容器的主轴和交叉轴。默认值为 row nowrap 。

属性的值的效果和上面的 column 是一样的，该属性将 flex-directionan 与 flex-wrap 进行了组合。
你可以这样使用，将两个值放一起

.content{
    
    
	flex-flow: nowrap row-reverse;
}

justify-content

justify-content 定义了沿主轴的对齐方式。

当一行上的所有 flex 项目都不灵活，或者是灵活的但已达到最大大小时，它有助于分配额外的可用空间。

当项目溢出行时，它还会对项目的对齐方式施加一些控制。

.content{
    
    
	justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

• flex-start（默认）：从 flex-direction定义的位置的开始。
• flex-end : 从 flex-direction定义的位置末尾开始。
• start : 在方向的开始处 writing-mode。
• end : 方向的尽头处 writing-mode。
• left : 在容器的左边缘，除非特殊的的要求，否则没有意义，就像start一样。
• right : 在容器的右边缘，除非特殊的的要求，否则没有意义，就像end一样。
• center ：项目沿线居中
• space-between ：均匀分布在行中；第一项在起始行，最后一项在结束行
• space-around ：均匀分布在行中，周围空间相等。请注意，视觉上的空间是不相等的，因为所有项目的两边都有相等的空间。第一个项目将在容器边缘有一个空间单位，但下一个项目之间有两个空间单位，因为下一个项目有自己的适用间距。
• space-evenly ：使得任何两个项目之间的间距（以及边缘的空间）相等。

这里穿插一个重要的知识点

• safe : 使用后会变成安全对齐,“安全” 的对齐方式在溢出时改变了对齐模式，以避免数据丢失。
• unsafe: 则关闭安全对其

例如

justify-content: safe center;

但在使用中会有浏览器兼容性问题，所以我们只要在 flex 子元素上应用 margin: auto ; 即可解决问题，不需要用 safe 关键字

align-items

align-items 定义了弹性项目如何沿当前行的交叉轴布局的默认行为。将其视为justify-content横轴（垂直于主轴）的版本。

你可以理解为水平位置

.content {
    
    
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

• stretch（默认）：拉伸以填充容器（仍然遵守最小宽度/最大宽度）。
• flex-start、start : 放置在横轴的开始处。
• flex-end、end : 放置在横轴的末端。
• center ：在横轴上居中
• baseline ：对齐，例如基于文字基线对齐

align-content

align-content 用于对齐内容，当横轴上有额外空间时，将对齐 flex 容器的线，类似于在 justify-content 主轴内对齐单个项目的方式。

那么 align-content 有什么特点呢？和 align-items 有什么区别呢?

align-content 属性只对多行灵的活容器生效，这里 flex-wrap 设置为wrap)。align-content 在单行灵活容器下（即 whereflex-wrap设置为其默认值no-wrap）不会生效。

也就是说 align-items 的设置对象是行内成员; align-content 的设置对象是所有行，且只有在多行弹性盒子容器中才生效。

当然 align-content 的前提是这一个容器整体定义了一个高度

.content {
    
    
	align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

• normal（默认）：默认位置，就好像没有设置一样。
• flex-start、start ：在容器的开头。
• flex-end、end ：在容器的末端。
• center ：在容器中居中。
• space-between ：均匀分布；第一行在容器的开头，最后一行在结尾。
• space-around ：在每行周围均匀分布。
• space-evenly ：均匀分布，周围空间相等
• stretch : 线条伸展以占用剩余空间

gap, row-gap, column-gap

gap 属性明确控制弹性项目之间的空间。

注意是弹性项目之间的，不影响盒子边缘，和 margin 是有明显区别的。

.content{
    
    
  display: flex;
  ...
  /* 行间距/列边距 统一设置 */
  gap: 5px; 
  
  /* 行间距/列边距 分开设置 */
  gap: 5px 10px; 
  
   /* 行间距/列边距 独立设置 */
  row-gap: 5px;
  column-gap: 10px;
}

它不仅适用于 flexbox，gap 适用于网格和多列布局。

弹性项目的属性（子项）

order

默认情况下，弹性项目按原顺序排列。但是，order 属性控制它们在弹性容器中出现的顺序。

.item {
    
    
  order: 2; /* 默认是 0 */
}

具有相同order 的节点会恢复到原来的排列。

我们可以看下面这个例子，认真思考

<style>
    .box-parent{
     
     
        display: flex;
        width: 100%;
        border: 1px red solid;
        margin-bottom: 10px;
    }
    .box-parent > div {
     
     
        width: 200px;
        height: 100px;
        background-color: black;
        margin: 10px;
        color: aliceblue;
    }
</style>
<div class="box-parent">
    <div style="order: 1;">1 <p>order:1</p></div>
    <div style="order: 1;">2 <p>order:1</p></div>
    <div style="order: 2;">3 <p>order:2</p></div>
    <div style="order: -1;">4 <p>order:-1</p></div>
</div>

flex-grow

flex-grow 定义了弹性项目在必要时扩大/增长的能力。

它适合无单位的项目，它规定了项目应该占用的弹性容器内的可用空间量。

如果所有项目的 flex-grow 都设置为1，则容器中的剩余空间将平均分配给所有子项。如果其中一个项目的值为2，则该项目将占用其他项目之一的两倍空间（或者至少会尝试）。

.item {
    
    
  flex-grow: 2; /* 默认 0 负数无效。*/
}

你可以自己试一下下面这个例子

<style>
    .box-parent{
     
     
        display: flex;
        width: 100%;
        border: 1px red solid;
        margin-bottom: 10px;
    }
    .box {
     
     
        width: 100px;
        height: 100px;
        background-color: black;
        margin: 10px;
        color: aliceblue;
    }
</style>
<div class="box-parent">
    <div class="box" style="flex-grow: 1;">1</div>
    <div class="box" style="flex-grow: 4;">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
</div>

flex-shrink

flex-shrink 定义了弹性项目在必要时收缩的能力。

.item {
    
    
  flex-shrink: 3; /* 默认是 1 */
}

注意区分， flex-grow 用于提高优先增长能力，而 flex-shrink 则是提高优先伸缩能力

flex-basis

flex-basis 定义了在分配剩余空间之前元素的默认大小。它可以是长度（例如 10%、2rem 、100px等）或关键字。

.item {
    
    
  flex-basis:  | auto; /* 默认 auto */
}

flex

flex 是 flex-grow , flex-shrink 和 flex-basis 组合的简写。

第二个和第三个参数 ( flex-shrink 和 flex-basis ) 是可选的。

默认值为 0 1 auto ，但如果使用单个数值，例如 flex: 3 ，它就像设置 flex-grow: 5; flex-shrink: 1; flex-basis: 0% 。

.item {
    
    
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

align-self

align-self 会覆盖已有的 align-items 的值，两者的可取值完全一样。

两者的区别在于：伸缩容器内部某个元素在排列方式需要有所差异，此时就不能使用
align-items ，因为 align-items 作用于整体，我们希望作用于部分，这就是 align-self 的作业。

示例

一个简单的菜单栏示例

<style>
    * {
     
     
        margin: auto;
        padding: 0;
    }

    header {
     
     
        width: 90%;
        min-width: 600px;
        height: 55px;
        background-color: rgba(0, 0, 0, 0.062);
        border-radius: 0 0 20px 20px;
    }

    .list {
     
     
        display: flex;
        height: 100%;
    }

    .list>li {
     
     
        flex-basis: 80px;
        text-align: center;
        list-style: none;
    }

    .logo {
     
     
        flex-grow: 0.5;
    }
</style>
<header>
    <ul class="list">
        <li class="logo">
            <div> LOGO </div>
        </li>
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">Page</a>
        </li>
        <li>
            <a href="#">More</a>
        </li>
        <li>
            <a href="#">About</a>
        </li>
    </ul>
</header>

---

如果对您有帮助，可别忘了 点赞 / 收藏 / 评论 / 关注 支持下博主