css3:flexbox
请先运行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的更多相关文章
- CSS3 Flexbox轻松实现元素的水平居中和垂直居中
CSS3 Flexbox轻松实现元素的水平居中和垂直居中 网上有很多关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Flexbox旧一点 ...
- 转载：CSS3 Flexbox可视化指南
0. 目录 目录 引言 正文 1 引入 2 基础 3 使用 4 弹性容器Flex container属性 41 flex-direction 42 flex-wrap 43 flex-flow 44 ...
- 转:CSS3 Flexbox 布局介绍
转:CSS3 Flexbox 布局介绍 Flexbox是一个用于页面布局的全新CSS3模块功能.它可以把列表放在同一个方向(从左到右或从上到下排列),并且让这些列表能延伸到占用可用的空间.较为复杂的布 ...
- React Native Flexbox & CSS3 Flexbox
React Native Flexbox & CSS3 Flexbox https://facebook.github.io/react-native/docs/flexbox/ https: ...
- CSS3 Flexbox轻巧实现元素的水平居中和垂直居中
CSS3 Flexbox轻松实现元素的水平居中和垂直居中 网上有很多关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Flexbox旧一点 ...
- CSS3 Flexbox可视化指南
0. 目录 目录 引言 正文 1 引入 2 基础 3 使用 4 弹性容器Flex container属性 41 flex-direction 42 flex-wrap 43 flex-flow 44 ...
- CSS3 Flexbox轻巧实现元素的水平居中和垂直居中（转）
CSS3 Flexbox轻松实现元素的水平居中和垂直居中 网上有很多关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Flexbox旧一点 ...
- CSS3 Flexbox布局那些事
相信研究过CSS3的同学对Flexbox布局一定不会陌生(作为一个未来主流的布局方式,至少有所耳闻).最近完成了两个项目:一个是移动端H5项目,一个是嵌入HTML页面的mac客户端项目.为了庆祝这两个 ...
- 《转载》使用CSS3 Flexbox布局
Flexbox(中文版本可以点击这里)的布局是一个用于页面布局的全新CSS3模块功能.它可以把列表放在同一个方向(从左到右或从上到下排列),并且让这些列表能延伸到占用可用的空间.较为复杂的布局可以通过 ...
- 深入理解CSS3 Flexbox
一.前言 Flexbox 是一个 CSS3 的盒子模型 ( box model ),顾名思义它就是一个灵活的盒子 ( Flexible Box ),为什麽最近这个属性才红起来呢?最主要也是因为 CSS ...
随机推荐
- iOS10 UI教程管理层次结构
iOS10 UI教程管理层次结构 iOS10 UI教程管理层次结构,在一个应用程序中,如果存在多个层次结构,就需要对这些层次结构进行管理.在UIView类中提供了可以用来管理层次结构的方法,让开发者可 ...
- three.js 场景入门
<!DOCTYPE html> <html> <head> <title>Example 01.02 - First Scene</title&g ...
- 03_Swift2基础之基本数据类型+相互转换
1. 整数 整数就是没有小数部分的数字,比如`42`和`-23`.整数可以是`有符号`(正.负.零)或者`无符号`(正.零). Swift 提供了,,和位的有符号和无符号整数类型.这些整数类型和 C语 ...
- Codeforces Round #366 Div.2[11110]
这次出的题貌似有点难啊,Div.1的Standing是这样的,可以看到这位全站排名前10的W4大神也只过了AB两道题. A:http://codeforces.com/contest/705/prob ...
- BZOJ3979 : [WF2012]infiltration
答案是$O(\log n)$级别的,故答案不超过6. 当答案是12345时,暴力枚举+压位检验即可,否则直接输出6. 时间复杂度$O(n^5)$. #include<cstdio> #de ...
- 只有火狐识别的css
写在css里写只有火狐可以识别,其他浏览器不行. 就算写在@media only screen and (min-width: 960px) and (max-width: 1200px){ 里面也行 ...
- C语言数组删除增加一个元素
malloc,realloc,calloc一直很头疼,这次笔试题需要在数组后重新分配新的空间的代码是: //删除函数,删除ptr中的ptr[in]元素,n是数组原来的长度. void rmv(int ...
- ACM 关于521
关于521 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述 Acm队的流年对数学的研究不是很透彻,但是固执的他还是想一头扎进去. 浏览网页的流年忽然看到了网上有人用玫 ...
- ACM 房间安排
房间安排 时间限制:3000 ms | 内存限制:65535 KB 难度:2 描述 2010年上海世界博览会(Expo2010),是第41届世界博览会.于2010年5月1日至10月31日期间, ...
- 洛谷 洛谷 P1011 车站 Label：续命模拟QAQ 未知50分
题目描述 火车从始发站(称为第1站)开出,在始发站上车的人数为a,然后到达第2站,在第2站有人上.下车,但上.下车的人数相同,因此在第2站开出时(即在到达第3站之前)车上的人数保持为a人.从第3站起( ...