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

概述

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

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

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

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

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

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

那么在了解了这么多信息之后，现在我们可以开始正式学习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 的值，两者的可取值完全一样。

示例

一个简单的菜单栏示例

<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>