请先运行demo

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>主轴为垂直方向  --by 李可</title>

  <style>

    .flex-container{

      padding:0;margin:0;list-style:none;

      display:-webkit-flex;

      display:flex;

      width:700px;

      height:245px;

      /*主轴不一定是水平，纵轴不一定垂直，4个方向都有可能*/

      /*下面flex-direction:colomn确定的主轴的方向是垂直向下的。*/

      /*下面flex-wrap:wrap包裹，溢出自动在主轴平行的方向换“行（这里是换列）”*/

      -webkit-flex-flow:column wrap;

      /*主轴方向（这里垂直向下）*/

      /*主轴方向（这里垂直向下），也许溢出导致多行或者多列，每行或者每列主轴方向（水平、垂直）居中 上下左右~等*/

     justify-content:center;

     /*  justify-content:flex-start;*/

     /* justify-content:flex-end;*/

      /*纵轴方向（这里水平向右）*/

      /*纵轴方向（这里水平向右），也许溢出导致多行或者多列(这里)，每行或者每列(这里)的项目在这行或者列中的侧轴方向（水平（这里向右）、垂直）上居中 上下左右，等*/

      /*align-items:stretch;*/ /*纵轴方向（这里水平向右），把项目的width去掉，如果是垂直，去掉高度，默认strecth*/

      /*坑！！，剩余空间：延伸项目延伸：延伸到这列（这里）或者行最大的项目的宽（这里）或者高*/

      align-items:baseline;/*坑！！主轴为垂直，一列的项目不可能按基准线对齐，设置这个之后，这是时候是默认到flex-start;*/

      /*align-items:flex-end;*/

     /*align-items:center; */

      /*align-items:flex-start;*/

       /*（多纵轴方向） 各行或者各列（这里）之间有空隙*/

      /*溢出主轴，空隙。--》在侧轴方向的各行或者各列之间（这里是多列）的对齐。或者多列的弹性盒模型容器*/

      /*注意这里说的是行或者列之间的布局，就相当于把溢出的的行或者列当成一个元素~*/

      /*多行或者多列*/

      /*0，行和列（这里）的剩余空间的计算*/

       /*stretch的理解，多行或者多列的“剩余空间”先平均分配，

	   1，设置了项目的宽度（这里）或者高度，每一行或者列（这里）的留的富裕空间一样。

       2，和每一列（这里）或者行的宽（这里）高没关系。

       */

       /*align-content:stretch;*/

       align-content:space-around;

       /* align-content:space-between ;*/

       /* align-content:flex-start;*/

      /*align-content:center;  */

      /* align-content:flex-end;*/

      background:yellowgreen;

    }

    .flex-item{

      box-sizing:border-box;

      background:tomato;

      width:200px;

      height:50px;

      border:1px solid green;

      color:white;

    }

    .flex-item:nth-of-type(1){

      width:250px;

    }

    .flex-item:nth-of-type(2){

      width:30px;

    }

    .flex-item:nth-of-type(3){

      width:320px;

      order:-1;/*调整位置，默认为0，越小越靠前。*/

    }

    /* .flex-item:nth-of-type(5){

      width:410px;

    }*/

    .flex-item:nth-of-type(6){

      width:150px;

     align-self: center;/*单独地调节一个项目的纵轴方向在这行或者列（这里）的位置*/

    }

  </style>

</head>

<body>

  <ul class="flex-container">

  <li class="flex-item">1</li>

  <li class="flex-item">2</li>

  <li class="flex-item">3</li>

  <li class="flex-item">4</li>

  <li class="flex-item">5</li>

  <li class="flex-item">6</li>

</ul>

</body>

</html>

运行

旧弹性盒子

过渡弹性盒子

新弹性盒子

功能类似，次加了几个属性

/6个盒子属性。窍门：flex-flow是：flex-direction flex-wrap的简写。这下3合1了~/

/*

确定主轴方向：这是个坑！！一定是先确定主轴方向,第一个项目到最后一个项目的排列顺序都是从主轴的开始位置到最后位置排列。

主轴方向水平向右，项目第一项水平靠左，依次向右排列| 主轴方向：项目之间有木有空隙，align-content？？？默认stretch align-self？？

主轴方向水平向左，项目第一项水平靠右，依次向左排列|

主轴方向垂直向下，项目第一项垂直靠上，依次向下排列|

主轴方向垂直向上，项目第一项垂直靠下，依次向上排列

/

1，flex-direction ：row(默认水平) | row-reverse | column | column-reverse;

/

盒子项目在溢出时：

一行项目自动缩小填满盒子|

换行（多行）|

换行，第二行排在第一行上面

*/

2，flex-wrap：nowrap(默认一行，项目伸缩) | wrap | wrap-reverse;

3，flex-flow

/*

(项目在主轴方向)布局位置：

所有项目起点浮动|

/

4，justify-content： flex-start(默认) | flex-end | center | space-between | space-around;

/

(项目在纵轴方向)布局位置：

坑1。baseline 当主轴为垂直的时候，一列（主轴）的项目，怎么沿基准线对齐啊？是没法对齐的，设置了之后，默认换成 flex-start

坑2。align-items和align-content的剩余空间计算。

align-items是剩余空间：延伸项目延伸：延伸到这列（这里）或者行最大的项目的宽（这里）或者高

align-content 1，设置了项目的宽度（这里）或者高度，每一行或者列（这里）的留的富裕空间一样。2，和每一列（这里）或者行的项目本身的宽（这里）高没关系。

*/

5，align-items： flex-start | flex-end | center | baseline | stretch(默认！);

6，align-content：flex-start | flex-end | center | space-between | space-around | stretch(默认！)

/6个项目属性。窍门：flex是：flex-grow flex-shrink flex-basis的简写。这下4合1了~/

1，flex-grow：; /* 默认0 /

2，flex-shrink：; / 默认 1 //这是个坑！！和grow的区别/

3，flex-basis： | auto; / 默认 auto */

4，flex

5，order：;

6，align-self：auto | flex-start | flex-end | center | baseline | stretch;

space-between | space-around空间的分配。

stretch(默认！)垂直方向。拉伸

参考

参考1w3-En

参考2w3-Cn

参考3IBM

参考4doyoe

参考5caibaojian

css3:神秘的弹性盒子flexbox的更多相关文章

  1. 弹性盒子FlexBox简介（一）

    一.理解弹性盒子 弹性盒子是CSS3的一种新的布局模式. CSS3弹性盒子(Flexible Box或flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时,确保元素拥有恰当的行为的布局方 ...

  2. 弹性盒子FlexBox简介（二）

    弹性盒子属性 一.align-content属性 属性作用:用于修改flex-wrap属性行为.类似于justify-content,但它不是设置弹性子元素的对齐,而是设置各个行的对齐. 属性值: f ...

  3. CSS3中的弹性盒子模型

    介绍 在css2当中,存在标准模式下的盒子模型和IE下的怪异盒子模型.这两种方案表示的是一种盒子模型的渲染模式.而在css3当中,新增加了弹性盒子模型,弹性盒子模型是一种新增加的强大的.灵活的布局方案 ...

  4. CSS3 Flex Box 弹性盒子、弹性布局

    目录 1. 概要 2. justify-content 属性 3. align-items 属性 4. flex-wrap 属性 5. align-content 属性 6. 居中 7. align- ...

  5. css3代码整理—弹性盒子篇

    父级使用弹性盒子: #fu{ display:flex; } 父级中子级的对齐方式: 1.水平对齐方式:两端对齐 #fu { display:flex; justify-content:space-b ...

  6. css3系列之弹性盒子 flex

    弹性盒子(伸缩盒) 注意,本篇会很长,非常长, 因为弹性盒子的知识点比较多 搜索 弹性盒子的属性  ctrl + F   如果觉得图太小, ctrl + +键 设置弹性盒子的属性: display:f ...

  7. 弹性盒子 flexbox 元素居中

    1 .navtext{ width:800px; height:600px; border: 1px solid black; justify-content:center; align-items: ...

  8. css弹性盒子新旧兼容

    前言:本篇随笔是对弹性盒子有了解的人来写的这篇文章,具体属性产生的效果这里不做说明,基础的东西去查文档.这里只是总结. 时至今日,css3的flex弹性盒子在移动端基本上都是支持的,但不排除有些些低版 ...

  9. 弹性盒子布局flexbox

    弹性盒子display:flexbox一般应用于父元素的容器上,然后对子元素来进行弹性布局 设置了flexbox的父元素不能设置具体的宽度与高度的值,而是通过子元素来设置值,父元素弹性的包裹既可 相关 ...

随机推荐

  1. HISI VENC 实际输出帧率控制

    https://blog.csdn.net/spy_007_/article/details/83688287 平台:HI3516EV100 SDK : Hi3516CV300_SDK_V1.0.2. ...

  2. innobackupex一些常用备份选项

    指定数据库备份[root@node1]# innobackupex --defaults-file=/data/3306/my.cnf --user=root --password=password ...

  3. linux配置Anaconda python集成环境

    1.下载anaconda与安装 利用anaconda来配置python环境 如果你上面两步已经没有问题了,那么这一步可以省略. 如果你想简单一些,利用anaconda来配置python环境,那么直接从 ...

  4. Redis 5.0.3集群部署

    参考文章 https://blog.csdn.net/yyTomson/article/details/85783753 https://www.cnblogs.com/zy-303/p/102731 ...

  5. 第一节 Python基础之数据类型(整型，布尔值，字符串)

    数据类型是每一种语言的基础,就比如说一支笔,它的墨有可能是红色,有可能是黑色,也有可能是黄色等等,这不同的颜色就会被人用在不同的场景.Python中的数据类型也是一样,比如说我们要描述一个人的年龄:小 ...

  6. python 画图工具matplotlib 去掉坐标轴和坐标的方法

    1. 去掉坐标轴的方法: plt.axis('off') 2.去掉刻度的方法: plt.xticks([]) plt.yticks([]) 以上语句需要将其置于 plt.show() 之前,plt.i ...

  7. python判断平台

    网上找到的判断平台的方法,特此记录 # -*- coding: utf-8 -*- import platform osName = platform.system() if(osName == 'W ...

  8. 解决github下载速度慢的问题 ,亲测有效

    原文链接 https://blog.csdn.net/tsq292978891/article/details/78260066 解决办法: 手动更改hosts 关于hosts的作用这里就不做声明了. ...

  9. zxing生成二维码和条码

    /*** * 生成二维码方法 * @param str 生成内容 * @param widthHeight 宽度和高度 * @return * @throws WriterException */ p ...

  10. Glide 加载部分圆角图片

    在App开放中经常遇到设置ImageView为部分圆角的情况,但是Glide又没有提供这个方法,该怎么办呢?直接上代码! /**  * @author csc  * @date 2019-01-18 ...