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的更多相关文章
- 弹性盒子FlexBox简介（一）
一.理解弹性盒子 弹性盒子是CSS3的一种新的布局模式. CSS3弹性盒子(Flexible Box或flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时,确保元素拥有恰当的行为的布局方 ...
- 弹性盒子FlexBox简介（二）
弹性盒子属性 一.align-content属性 属性作用:用于修改flex-wrap属性行为.类似于justify-content,但它不是设置弹性子元素的对齐,而是设置各个行的对齐. 属性值: f ...
- CSS3中的弹性盒子模型
介绍 在css2当中,存在标准模式下的盒子模型和IE下的怪异盒子模型.这两种方案表示的是一种盒子模型的渲染模式.而在css3当中,新增加了弹性盒子模型,弹性盒子模型是一种新增加的强大的.灵活的布局方案 ...
- CSS3 Flex Box 弹性盒子、弹性布局
目录 1. 概要 2. justify-content 属性 3. align-items 属性 4. flex-wrap 属性 5. align-content 属性 6. 居中 7. align- ...
- css3代码整理—弹性盒子篇
父级使用弹性盒子: #fu{ display:flex; } 父级中子级的对齐方式: 1.水平对齐方式:两端对齐 #fu { display:flex; justify-content:space-b ...
- css3系列之弹性盒子 flex
弹性盒子(伸缩盒) 注意,本篇会很长,非常长, 因为弹性盒子的知识点比较多 搜索 弹性盒子的属性 ctrl + F 如果觉得图太小, ctrl + +键 设置弹性盒子的属性: display:f ...
- 弹性盒子 flexbox 元素居中
1 .navtext{ width:800px; height:600px; border: 1px solid black; justify-content:center; align-items: ...
- css弹性盒子新旧兼容
前言:本篇随笔是对弹性盒子有了解的人来写的这篇文章,具体属性产生的效果这里不做说明,基础的东西去查文档.这里只是总结. 时至今日,css3的flex弹性盒子在移动端基本上都是支持的,但不排除有些些低版 ...
- 弹性盒子布局flexbox
弹性盒子display:flexbox一般应用于父元素的容器上,然后对子元素来进行弹性布局 设置了flexbox的父元素不能设置具体的宽度与高度的值,而是通过子元素来设置值,父元素弹性的包裹既可 相关 ...
随机推荐
- Taro 常用 API
table th:first-of-type { width: 300px; } Taro 常用 API 说明 网址 Taro.getSystemInfoSync() 获取系统信息同步接口. http ...
- update20181214 - uGetHttpData.pas
function DecodePJItem(sText: string): TList<TDataItem>; var reg: TRegEx; mc: TMatchCollection; ...
- NetCore部署到Linux服务器+Supervisor的步骤及过程中踩过的坑
本文作备忘使用 服务器配置: 下面是所有操作的具体步骤: 1.安装nginx 参考 1.1 添加源:默认情况Centos7中没有Nginx源,最近Nginx官网提供了Centos的源地址. sud ...
- win10 家庭版 升级 win10企业版
更改秘钥 我的电脑(右键)->属性-> 更改产品秘钥 -> 96YNV-9X4RP-2YYKB-RMQH4-6Q72D->重启系统 如果秘钥过期了,就百度按时间搜索,总有一个是 ...
- 配置中心Nacos
Nacos 是阿里巴巴2018年7月份开源的项目,如其名, Naming Configuration Service ,专注于服务发现和配置管理领域. Nacos 是什么?上面已经大概介绍了,更多详细 ...
- Scrapy实战篇（九）之爬取链家网天津租房数据
以后有可能会在天津租房子,所以想将链家网上面天津的租房数据抓下来,以供分析使用. 思路: 1.以初始链接https://tj.lianjia.com/zufang/rt200600000001/?sh ...
- python excel表格操作
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- html字体加大标签与写法介绍
在html中字体加大的标签为<big>,一般用于重要文字,醒目文字,让用户容易看到! 字体加大: <big>写上你想写的字</big> 效果:未加大 加大 效果中 ...
- MAP File
https://warpproject.org/trac/wiki/howto/Linker_scripts_MAP_files Description A MAP file is an output ...
- Galaxy2D游戏引擎常见问题解答
◆Galaxy2D游戏引擎开源吗? Galaxy2D游戏引擎不开源. ◆Galaxy2D相对HGE有何优点? Galaxy2D相对HGE有以下优点: (1)自带音频播放功能,HGE ...