基础概念

块级元素默认的display 属性都是block 状态，而当给块级元素display 属性加上flex值，flex 布局就被创建 比如div 直接设置 display:flex，这时候当div被称为 flex 容器，里面的子项元素称之为 flex 子项

flex 容器布局也叫弹性布局的诞生，单靠一个属性值，无法满足布局需求，因此为满足布局需求，还需要围绕flex 布局而产生的相关属性，而这些相关属性恰好分为两部分 一部分作用与flex 容器；另一部分作用域flex子项

点击下面链接快速索引

作用于flex容器属性

flex-direction　容器内项目的排列方向(默认横向排列)

flex-wrap　 容器内项目换行方式

flex-flow　以上两个属性的简写方式

justify-content　项目在主轴上的对齐方式

align-items　项目在交叉轴上如何对齐

align-content　定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

作用于flex子项属性

order　项目的排列顺序。数值越小，排列越靠前，默认为0

flex-grow　项目的放大比例，默认为0，即如果存在剩余空间，也不放大

flex-shrink　　项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

flex-basis　　在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小

flex　　是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选

align-self　　允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

小提示 不管是作用在flex容器还是flex子项上，最终都是通过flex子项内容展现出来，需要区别的是一个是作用整体一个是作用具体的单个

flex 概念还有一个内容叫排序： 通过主轴（main axis）和交叉轴（cross axis） 默认情况下，主轴和x轴相同，交叉轴和y轴相同。弹性盒子默认会按主轴x轴排列，看上去的表现形式就是从浏览器的左边到右边排序；

友情提示 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效

本篇测试属性的笔记HTML结构都是基于如下结构

<div class="container"> <!--  flex 容器-->
   <div><!--  flex 子项-->
     <img src="./images/1.jpg">
   </div>
   <div><!--  flex 子项-->
     <img src="./images/2.jpg">
   </div>
   <div><!--  flex 子项-->
     <img src="./images/3.jpg">
   </div>
 </div>

同时为了清晰的看到排序问题图片上标注了顺序，当然美女图片也比较养眼；

作用在flex 容器的css属性

flex-direction

容器子项目的排列方向(默认从左到右排序)，可以从上倒下，从下到上，从左到右，从右到左；

语法

flex-direction: row | row-reverse | column | column-reverse;

参数

row 这个属性可以不用写，只要是flex容器自动出发就是这个

.container{
      display:flex;
      /* 默认值可以写或者不写*/
      flex-direction:row;
    }

效果

row-reverse

.container{
      display:flex;
      flex-direction:row-reverse;
    }

效果

column

.container{
      display:flex;
      flex-direction:column;
    }

效果

column-reverse 效果

flex-wrap

容器控制子项布局是否换行，默认单行显示不换行

语法

   flex-wrap: nowrap | wrap | wrap-reverse;

参数

示例：

nowrap 默认值不换行，在渲染的时候很容易出现溢出；

.container{
   display:flex;
    flex-wrap: nowrap;
  }

效果

溢出

小知识点：如何不换行且不溢出？，即让自动无限缩小内容

可以让图片自适应 子项的宽带，在flex中子项的宽度可以无限小，因为没有定义子项宽度

.container{
      display:flex;
      flex-wrap:nowrap;
    }
    .container img{
      max-width: 100%;
    }

效果

可以看到图片小了很多

wrap效果

wrap-reverse效果

flex-flow

flex-direction和flex-wrap的缩写 默认是row nowrap 中间用空格隔开

语法

 flex-flow: <flex-direction> || <flex-wrap>;

从右到左换行效果

复合写法

    .container{
      display:flex;
      flex-flow: row-reverse  wrap;
    }

justify-content

flex容器控制内容 在主轴的对齐和分布方式，主轴是通过 flex-direction 确定那个方向 默认往左对齐

语法

justify-content: flex-start | flex-end | center | space-between | space-around| space-evenly;

参数

示例效果 说明主轴统一取默认值 flex-direction:row;水平方向，实际中用对最多对也是这个

示例：

flex-end

.container{
      display:flex;
      justify-content:flex-end;
    }

示例效果

center 效果

space-between效果

space-around 效果

space-evenly 效果

align-items

说的是flex子项们依据交叉轴对对齐方式 所有子项目们约着一起向某个地方对象，一起向上对齐，一起向下对齐 语法

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

参数

示例 stretch

.container{
      display:flex;
      align-items: stretch;
    }

效果

注意到这里到子项，背景是颜色展示到就是子项，是被拉升了。和最高到子项一样高， 定义子项高度就依据子项的最高来对齐，容器高度的变化也跟着最高的变化。

    .container div{
      height: 50px;
    }
    .container div:nth-child(1){
      height: 60px;
    }

flex-start 效果

flex-end效果

center 效果

baseline 效果

这个效果感觉实现的和flex-end值一样，理论上应该不一样，baseline 是基于基线，网络照一张图放着标记一下

align-content

该属性可以和 justify-content 一起理解， justify-content 主轴方向的对齐方式简单理解为水平方向的对齐方向，而algin-content 可以简单理解为垂直方向的对齐方式，实际上是交叉轴的对齐和分布方式，因此如果只有一排flex子项 algin-content不会有效果

语法

align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly;

参数：

示例

stretch

    .container{
      height: 300px;
      display:flex;
      flex-wrap: wrap;
      align-content: stretch;
    }

实际效果

flex-start效果

flex-end 效果

space-between 效果

space-around 效果

space-evenly 效果

flex 子项的css 属性

flex弹性布局，在容器已经表现的很优秀了。然而 为了面对复杂的需求和个性化的布局需求，在flex容器里面的子项，依托父级的属性同时还可以玩出自己的花样。在既有的规则下面谋求生存。

order

改变子项的排序顺序 默认值都是0

语法

    order: <integer>;

参数

让子项 第二个排到第一为位置

    .container{
      display:flex;
    }
    .container div:nth-child(2){
      order:-1;
    }

flex-grow

扩展flex子项目占有容器的空间，即放大比例；如果空间存在的话，不存在就失效，flex-grow 的默认值是0，当设置了这个值，允许为小数，则用设置的值来等比占领空间比；容器剩余空间值为1，占满为止；子项设置是小数总和占比没有达到剩余空间比，则容器空间依然存在，

语法

    flex-grow: <number>; /* 数值，可以是小数，默认值是 0 */

让第三个子项目占领剩余空间 只需要设置为1

.container{
      display:flex;
    }
    .container div:nth-child(3){
      flex-grow:1;
    }

让所有子项都分配0.5试试效果

flex-shrink

主要处理当flex容器空间不足时候，单个元素的收缩比例。

语法 不支持负数

    flex-shrink: <number>; /* 默认值 1 */

.container div:nth-child(2){
      flex-shrink:2;
    }

flex-basis　

在分配多余空间之前，子项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。即：告诉浏览器我需要的空间给我留着；

语法

 flex-basis: <length> | auto; /* 默认 auto */

可以简单理解为 是一个可以定义宽度的属性。 如果同时设置width和flex-basis，就渲染表现来看，会忽略width。当flex-basis设置当宽度小于内容当时候选内容宽度

    .container{
      display:flex;
    }
    .container div:nth-child(2){
      flex-basis:100px;
    }

flex

是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

语法

flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

其中第2和第3个参数（flex-shrink和flex-basis）是可选的。默认值为0 1 auto。

实际中用当应该是最多的

    .container{
      display:flex;
    }
    .container div:nth-child(2){
      flex:1 0 auto;
    }

效果

align-self

指控制单独某一个flex子项的垂直对齐方式，和父级容器align-items一样，只是当前单独控制自己

语法

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

示例：不多举 和上面介绍的一样

选择第二个子项目底部对齐

.container{
      display:flex;
    }
    .container div:nth-child(2){
      align-self:flex-end;
    }

效果

场景使用

综合下来display: flex 弹性布局适合摸一个模块，某一个组件，一个单一的运用感觉很适合 庞大的系统布局，看个人来选择，我估计不会选择

chinaynlmq.cn

转载请注明： 百网思 » 弹性display: flex布局自看笔记