CSS弹性布局(display:flex)
参考：
http://www.runoob.com/w3cnote/flex-grammar.html
https://www.jianshu.com/p/5856c4ae91f2
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
https://www.cnblogs.com/xuyuntao/articles/6391728.html
主要内容：
父级：
display:flex; (兼容绝大部分浏览器)：-webkit- 真实工作下使用postCss插件-自动添加浏览器兼容
display: -webkit-flex; /* Safari */
display: flex;
*如果使用了弹性布局，子元素不需要使用浮动float 父级身上的常用属性：
justify-content： 子元素水平排列
flex-start（默认） 从左开始
flex-end 从右开始
center 居中！！
space-between 两端对齐
space-around 子元素张开手分布 align-items 子元素垂直排列
flex-start（默认） 从上开始
flex-end 从下开始
center 居中！！
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
baseline: 项目的第一行文字的基线对齐 align-content 多行子元素垂直排列
flex-start： 与交叉轴的起点对齐。
flex-end： 与交叉轴的终点对齐。
center： 与交叉轴的中点对齐。
space-between： 与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around： 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）： 轴线占满整个交叉轴。 flex-flow（基本不用，面试可能会提到）
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
flex-flow: <flex-direction> <flex-wrap>;
举例：flex-flow:column wrap; flex-direction 子元素排列方向
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。 flex-wrap 子元素一行排不下如何换行
nowrap（默认）：不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方 子集身上的属性：
flex 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
将行分为定义比例的几份
*子元素在划分父元素宽度，先刨除固定宽度 align-self 允许单个子元素有与其他项目不一样的垂直对齐方式，可覆盖align-items属性
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
} flex-grow 定义子元素的放大比例，默认为0，即如果存在剩余空间，也不放大
.item {
flex-grow: <number>; /* default 0 */ <number>只代表缩放系数
} order 定义子元素的排列顺序。数值越小，排列越靠前，默认为0
.item {
order: <integer>;
}
练习案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局案例-淘宝底部导航栏</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.footer-nav{
width: 100%;
height: 60px;
background-color: grey;
display: flex;
position: absolute;
left: 0;
bottom: 0;
}
.footer-nav .tab{
width: 20%;
box-sizing: border-box;
border-left: 1px solid red;
flex: 1;
text-align: center;
line-height: 30px;
font-size: 16px;
color: white;
}
.footer-nav .tab .tab-icon{
height: 30%;
}
</style>
</head>
<body>
<div class="footer-box">
<div class="footer-nav">
<span class="tab">
<span class="tab-icon glyphicon glyphicon-home"></span>
<p class="text">首页</p>
</span>
<span class="tab">
<span class="tab-icon glyphicon glyphicon-shopping-cart"></span>
<p class="text">购物车</p>
</span>
<span class="tab">
<span class="tab-icon glyphicon glyphicon-list-alt"></span>
<p class="text">订单列表</p>
</span>
<span class="tab">
<span class="tab-icon glyphicon glyphicon-user"></span>
<p class="text">我的淘宝</p>
</span>
<span class="tab">
<span class="tab-icon glyphicon glyphicon-option-horizontal"></span>
<p class="text">更多</p>
</span>
<span class="tab">
<span class="tab-icon glyphicon glyphicon-grain"></span>
<p class="text">欢度清明</p>
</span>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style/flex-1.css">
</head>
<body>
<div class="outer">
<div class="item div1">1</div>
<div class="item div2">2</div>
<div class="item div3">3</div>
<div class="item div4">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
</div>
</body>
</html>
HTML代码
*{
margin:;
padding:;
list-style: none;
}
.outer{
width: 500px;
height: 500px;
border: 1px solid red;
margin: 30px auto;
display: flex;
flex-wrap: wrap;
align-content:flex-start;
}
.item{
width: 125px;
border: 1px solid #ff1bbe;
background-color: #0D47A1;
height: 125px;
box-sizing: border-box;
font-size: 32px;
color: white;
line-height: 125px;
text-align: center;
align-content: flex-start;
}
css代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.outer {
width: 500px;
height: 500px;
border: 1px solid red;
margin: 30px auto;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.item {
border: 1px solid #ff1bbe;
background-color: #0D47A1;
height: 125px;
box-sizing: border-box;
font-size: 32px;
color: white;
line-height: 125px;
text-align: center;
}
.div1{width: 80px}
.div2{flex: 1}
.div3{flex: 2}
</style>
</head>
<body>
<div class="outer">
<div class="item div1">1</div>
<div class="item div2">2</div>
<div class="item div3">3</div> </div>
</body>
</html>
<!DOCTYPE=html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>
关于文档元素测试
</title>
<style> #father{ width:200px;
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-content:center;
height:200px;
background-color:grey;
}
.son1{ height:30px;
width:100px;
background-color:orange;
} .son2{ height:30px;
width:100px;
background-color:red;
} .son3{
height:30px;
width:100px;
background-color:#08a9b5;
} .son4{
height:30px;
width:100px;
background-color:#9ad1c3;
} .son5{ height:30px;
width:100px;
background-color:rgb(21,123,126);
}
</style>
</head>
<body> <div id="father">
<div class="son1">q</div>
<div class="son2">w</div>
<div class="son3">e</div>
<div class="son4">e</div>
<div class="son5">e</div>
</div> </body>
</html>
flex布局换行空白间隙之align-content
参考：https://blog.csdn.net/txfyteen/article/details/82663029
CSS弹性盒布局(display:flex)的更多相关文章
-
弹性盒布局display:flex详解
一:弹性盒子 随着响应式设计的流行,网站开发者在设计网页布局时往往要考虑到页面在适配不同分辨率的浏览器时其内部组件位置大小都会产生变化,因此需要设计者根据窗口尺寸来调整布局,从而改变组件的尺寸和位置, ...
-
弹性盒模型display:flex
Flex布局意为"弹性布局",用来为盒模型提供更多灵活性.此外,Flex定义的容器可以对块级元素(display: flex;)或行内元素(display: inline-flex ...
-
弹性盒布局（flex）
一.Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局. .box ...
-
CSS弹性盒布局
<html> <head> <meta charset="utf-8"/> <title></title> <st ...
-
弹性盒布局详解(display: flex;)
弹性盒布局详解 弹性盒介绍 弹性盒的CSS属性 开启弹性盒 弹性容器的CSS属性 flex-direction设置弹性元素在弹性容器中的排列方向 主轴与侧轴(副轴) flex-wrap设置弹性容器空间 ...
-
css怪异盒模型和弹性盒布局(flex)详解及其案例
一.怪异盒模型 怪异盒模型的属性是box-sizing,他有两个属性值: 1.content-box 这是由 CSS2.1 规定的宽度高度行为.宽度和高度分别应用到元素的内容框.在宽度和高度之外绘制元 ...
-
css笔记 - flex弹性盒布局
flex: display:-webkit-box | -moz-box;盒布局 -webkit-box-flex | -moz-box-flex;弹性盒布局 -webkit-box-ordinal- ...
-
CSS弹性盒模型(flex box)
本文介绍的是 CSS3 规范中引入的新布局模型:弹性盒模型(flex box).随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率. 浏览器支持: 弹性盒布局的容器(fl ...
-
弹性盒模型，flex布局
弹性盒模型 弹性盒子是css3的一种新布局模式,由容器(父元素)和项目(子元素)组成. 弹性盒子是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式. 引入弹性盒模型的 ...
随机推荐
-
在公有云AZURE上部署私有云AZUREPACK以及WEBSITE CLOUD（二）
前言 (二)建立虚拟网络环境,以及域控和DNS服务器 1搭建虚拟网络环境 在Azure上创建虚拟网络.本例选择的是东南亚数据中心.后面在创建虚机的时候,也选择这个数据中心. VNet Name: ...
-
.NET领域驱动设计—看DDD是如何运用设计模式颠覆传统架构
阅读目录: 1.开篇介绍 2.简单了解缘由(本文的前期事宜) 3.DomainModel扩展性(运用设计模式设计模型变化点) 3.1.模型扩展性 3.2.设计模式的使用(苦心专研的设计模式.设计思想可 ...
-
PL/0编译器(java version) &ndash; Scanner.java
1: package compiler; 2: 3: import java.io.BufferedReader; 4: import java.io.FileNotFoundException; ...
-
sql server 批量删除数据表
SET ANSI_NULLS ONGOSET QUOTED_IDENTIFIER ONGO-- =============================================-- Auth ...
-
OpenJudge 2754 八皇后
1.链接地址: http://bailian.openjudge.cn/practice/2754 2.题目: 总时间限制: 1000ms 内存限制: 65536kB 描述 会下国际象棋的人都很清楚: ...
-
C++里容易忽视却不能忽视的
1 define 只是简单地文本替换. 2 每个机器的字长不同. 3 每个类型在不同的机器上,所占用的内存空间不同. 4 每个机器内部的字节大小端不同. 5 并不是所有的编译器或机器都支持最新的C++ ...
-
Android（java）学习笔记236：多媒体之加载大图片到内存（Bitmap API）
1.Bitmap (API使用) android里面的bitmap中,一个像素点需要4个byte去表示,这是因为android表示颜色是" argb ":其中 a 表示是透明度,然 ...
-
初识eclipse及配置相关
1. Eclipse 导入外部项目无法识别为Web项目并无法再部署到tomcat解决办法: http://www.cnblogs.com/heshan664754022/archive/2013/05 ...
-
linux shell 不同进制数据转换（二进制，八进制，十六进制，base64) （转）
shell可以在不调用第3方命令,表示不同进制数据.这里总结以下表示方法.shell 脚本默认数值是由10 进制数处理,除非这个数字某种特殊的标记法或前缀开头. 才可以表示其它进制类型数值.如:以 0 ...
-
Python魔法方法（转发整合）
如果你的对象实现(重载)了这些方法中的某一个,那么这个方法就会在特殊的情况下被 Python 所调用,你可以定义自己想要的行为,而这一切都是自动发生的. __new__: 是一个对象实例化时调用的第一 ...