请先运行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. CSS3 Flexbox轻松实现元素的水平居中和垂直居中

    CSS3 Flexbox轻松实现元素的水平居中和垂直居中 网上有很多关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Flexbox旧一点 ...

  2. 转载：CSS3 Flexbox可视化指南

    0. 目录 目录 引言 正文 1 引入 2 基础 3 使用 4 弹性容器Flex container属性 41 flex-direction 42 flex-wrap 43 flex-flow 44 ...

  3. 转:CSS3 Flexbox 布局介绍

    转:CSS3 Flexbox 布局介绍 Flexbox是一个用于页面布局的全新CSS3模块功能.它可以把列表放在同一个方向(从左到右或从上到下排列),并且让这些列表能延伸到占用可用的空间.较为复杂的布 ...

  4. React Native Flexbox & CSS3 Flexbox

    React Native Flexbox & CSS3 Flexbox https://facebook.github.io/react-native/docs/flexbox/ https: ...

  5. CSS3 Flexbox轻巧实现元素的水平居中和垂直居中

    CSS3 Flexbox轻松实现元素的水平居中和垂直居中 网上有很多关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Flexbox旧一点 ...

  6. CSS3 Flexbox可视化指南

    0. 目录 目录 引言 正文 1 引入 2 基础 3 使用 4 弹性容器Flex container属性 41 flex-direction 42 flex-wrap 43 flex-flow 44 ...

  7. CSS3 Flexbox轻巧实现元素的水平居中和垂直居中（转）

    CSS3 Flexbox轻松实现元素的水平居中和垂直居中 网上有很多关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Flexbox旧一点 ...

  8. CSS3 Flexbox布局那些事

    相信研究过CSS3的同学对Flexbox布局一定不会陌生(作为一个未来主流的布局方式,至少有所耳闻).最近完成了两个项目:一个是移动端H5项目,一个是嵌入HTML页面的mac客户端项目.为了庆祝这两个 ...

  9. 《转载》使用CSS3 Flexbox布局

    Flexbox(中文版本可以点击这里)的布局是一个用于页面布局的全新CSS3模块功能.它可以把列表放在同一个方向(从左到右或从上到下排列),并且让这些列表能延伸到占用可用的空间.较为复杂的布局可以通过 ...

  10. 深入理解CSS3 Flexbox

    一.前言 Flexbox 是一个 CSS3 的盒子模型 ( box model ),顾名思义它就是一个灵活的盒子 ( Flexible Box ),为什麽最近这个属性才红起来呢?最主要也是因为 CSS ...

随机推荐

  1. 什么是智能扫描开单打印进销存POS?安卓工业手持PDA设备上的POS销售开单,现场打印打票，用扫描枪太方便了

    安卓PDA版POS销售开单如果和扫描枪配合使用,和超市的POS销售一样的操作 什么是智能扫描开单打印进销存POS? 互联网特性,让它在数据统计分析.客户关系管理等方面表现出众.智能POS,不仅是一个收 ...

  2. CentOS6.4 增加一个SFTP上传的用户

    #创建sftp组 groupadd sftp #创建一个用户dsideal useradd -g sftp -s /bin/false dsideal #设置dsideal用户的密码 passwd d ...

  3. ACM 田忌赛马

    田忌赛马 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 Here is a famous story in Chinese history. "That ...

  4. 第一天 Linux 是什么

    众所周知,Linux的核心原型是1991年由托瓦兹(Linus Torvalds)写出来 计算机是由一堆硬件所组成的,为了有敁率的控制这些硬件资源,于是乎就有操作系统产生了.       到了1985 ...

  5. reason: '*** Collection <__NSCFArray: 0x7ffa43528f70> was mutated while being enumerated.'

    一,错误分析 1.崩溃代码如下: //遍历当前数组,判断是否有相同的元素 for (NSString *str in self.searchHistoryArrM) { if ([str isEqua ...

  6. Selenium_用selenium webdriver实现selenium RC中的类似的方法

    最近想总结一下学习selenium webdriver的情况,于是就想用selenium webdriver里面的方法来实现selenium RC中操作的一些方法.目前封装了一个ActionDrive ...

  7. Spring_手动获取Bean

    1.SpringContextHolder.java package com.lkb.util; import org.springframework.context.ApplicationConte ...

  8. Redis常用命令(二)

    连接操作相关的命令 quit:关闭连接(connection) auth:简单密码认证 持久化 save:将数据同步保存到磁盘 bgsave:将数据异步保存到磁盘 lastsave:返回上次成功将数据 ...

  9. js鼠标滑轮滚动事件绑定（兼容主流浏览器）

    /** Event handler for mouse wheel event. *鼠标滚动事件 */ var wheel = function(event) { var delta = 0; if ...

  10. 关于tag标签系统的实现

    实验室的项目,需要做对用户发布的主题进行打标签的功能,纠结甚久,实现思路如下: 一.数据库表的设计 1.tag表 create table qa_tag ( tag_id int primary ke ...