flex布局--盒子模型（Flexible Box）
先说flex的兼容性
-
IE10部分支持2012，需要-ms-前缀
-
Android4.1/4.2-4.3部分支持2009 ，需要-webkit-前缀
-
Safari7/7.1/8部分支持2012， 需要-webkit-前缀
-
IOS Safari7.0-7.1/8.1-8.3部分支持2012，需要-webkit-前缀
考虑到兼容性，写法会有点麻烦
/* 子元素-平均分栏 */
.flex1 {
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
width: 20%; /* For old syntax, otherwise collapses. */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
/* 父元素-横向排列（主轴） */
.flex-h {
display: box; /* OLD - Android 4.4- */
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
/* 09版 */
-webkit-box-orient: horizontal;
/* 12版 */
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
}
/* 父元素-横向换行 */
.flex-hw {
/* 09版 */
/*-webkit-box-lines: multiple;*/
/* 12版 */
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
}
/* 父元素-水平居中（主轴是横向才生效） */
.flex-hc {
/* 09版 */
-webkit-box-pack: center;
/* 12版 */
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
/* 其它取值如下：
align-items 主轴原点方向对齐
flex-end 主轴延伸方向对齐
space-between 等间距排列，首尾不留白
space-around 等间距排列，首尾留白
*/
}
/* 父元素-纵向排列（主轴） */
.flex-v {
display: box; /* OLD - Android 4.4- */
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
/* 09版 */
-webkit-box-orient: vertical;
/* 12版 */
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
}
/* 父元素-纵向换行 */
.flex-vw {
/* 09版 */
/*-webkit-box-lines: multiple;*/
/* 12版 */
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
}
/* 父元素-竖直居中（主轴是横向才生效） */
.flex-vc {
/* 09版 */
-webkit-box-align: center;
/* 12版 */
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
}
/* 子元素-显示在从左向右（从上向下）第1个位置，用于改变源文档顺序显示 */
.flex-1 {
-webkit-box-ordinal-group: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 1; /* OLD - Firefox 19- */
-ms-flex-order: 1; /* TWEENER - IE 10 */
-webkit-order: 1; /* NEW - Chrome */
order: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
/* 子元素-显示在从左向右（从上向下）第2个位置，用于改变源文档顺序显示 */
.flex-2 {
-webkit-box-ordinal-group: 2; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 2; /* OLD - Firefox 19- */
-ms-flex-order: 2; /* TWEENER - IE 10 */
-webkit-order: 2; /* NEW - Chrome */
order: 2; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
为了更好的兼容性
.box{ display: -webkit-flex; /* 新版本语法: Chrome 21+ */ display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */ display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* 老版本语法: Firefox (buggy) */ display: -ms-flexbox; /* 混合版本语法: IE 10 */ } .flex1 { -webkit-flex: 1; /* Chrome */ -ms-flex: 1 /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ -webkit-box-flex: 1 /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ }
1、任何容器都可以使用盒子模型
行内元素也是可以的
.div{
display:flex;
}
.div1{
display:inline-flex;
}
2、如果是WebKit内核浏览器要加上-WebKit-前缀
.div{
display:flex;
display:-webkit-flex;
}
3、设置了Flex布局之后子元素的float,clear,vertical-align将会失效
.div1{
float:left;//无效
}
4、属性的设置从‘对谁设置’分为两种
--一种是设置在父容器上
--另一种是设置在子容器上
1）、设置在父容器上的属性有
flex-direction--决定主轴的方向
.div{
/*主轴方向 默认是row（水平 左到右）*/
flex-direction:row;
/*水平（右到左）*/
flex-direction:row-reverse;
/*垂直 column 高度不会超出*/
flex-direction: column;
/*垂直 column-reverse 从下往上*/
flex-direction: column-reverse;
}
flex-wrap--决定是否换行或是换行方式
.div{
/*不换行 自动调整间距*/
flex-wrap: nowrap;
/*换行 从左到右 从上到下*/
flex-wrap: wrap;
/*换行 从左到右 从下到上*/
flex-wrap: wrap-reverse;
}
flex-flow--是flex-direction和flex-wrap的一起缩写，两个值
.div{
/*默认 row nowrap*/
flex-flow: row wrap;
/*可以两个值混合写*/
flex-flow: row-reverse nowrap;
}
justify-content--子元素的排列方式
.div{
/*flex-start--从左开始 没有间距*/
justify-content: flex-start;
/*flex-end--从右到左 没有间距*/
justify-content: flex-end;
/*从中间开始排 没有间距*/
justify-content: center;
/*等间距排列 两边没有距离*/
justify-content: space-between;
/*等间距排列 两边有距离*/
justify-content: space-around;
}
flex-start（默认值）：左对齐flex-end：右对齐center： 居中space-between：两端对齐，项目之间的间隔都相等。space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items--元素对齐方式
.div{
/*子元素的对齐方式 底部对齐*/
align-items: flex-end;
/*子元素对齐方式 头部对齐（默认）*/
align-items: flex-start;
/*子元素对齐方式 中间*/
align-items: center;
/*子元素对齐方式 拉伸填充（如果没有设置高度）*/
align-items: stretch;
/*子元素对齐方式 第一行文字对齐*/
align-items: baseline;
}
flex-start：交叉轴的起点对齐。flex-end：交叉轴的终点对齐。center：交叉轴的中点对齐。baseline: 项目的第一行文字的基线对齐。stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content--多条轴的对齐方式
.div{
/*多轴的对齐方式 从左到右 从上到下*/
align-content: flex-start;
/*多轴的对齐方式 从左到右 从下到上*/
align-content: flex-end;
/*多轴的对齐方式 从左到右 从上到下 中间*/
align-content: center;
/*多轴的对齐方式 从左到右 占满*/
align-content: stretch;
/*多轴的对齐方式 间隔相等 两侧没有*/
align-content: space-between;
/*多轴的对齐方式 间隔相等 两侧一半*/
align-content: space-around;
}
flex-start：与交叉轴的起点对齐。flex-end：与交叉轴的终点对齐。center：与交叉轴的中点对齐。space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。stretch（默认值）：轴线占满整个交叉轴。
2)、设置在子元素的属性
order--排序方式（默认）
.item{
order:0;
}
flex-grow--子元素的放大比例
默认是0（有剩余空间也不放大）
1（等分放大充满容器）
.item{
flex-grow:1;
}
flex-shrink--子元素的缩小比例
默认是1（空间不足将缩小）
flex-basis--设置子元素的总宽度，设置之后就写死了子元素所占的总宽度
--可以直接写XXpx
.item{
/*子元素占的宽度*/
flex-basis: auto;
}
flex--是flex-grow,flex-shrink,flex-basis的简写
默认值是（0,1 auto）
.item{
/*flex-grow,flex-shrink,flex-basis简写*/
flex:0 1 auto;
}
align-self--对单个元素设置对齐方式 可以覆盖align-items
默认是auto--继承父级的对齐方式 没有父级就是stretch
.item{
/*单个元素不一样的对齐方式*/
align-self: flex-end;
}
5、关于flex的的布局应用
骰子样式--基本都用到了justify-content,align-items,align-self，flex-direction
HTML代码
<div class="box" id="box1">
<span class="item">span>
div>
<div class="box" id="box2">
<span class="item">span>
<span class="item">span>
div>
CSS样式
.item{
/*骰子点数样式*/
.item{
display: block;
width: 24px;
height: 24px;
border-radius: 50%;
margin: 4px;
background-color: #333;
box-shadow: inset 0 3px #111, inset 0 -3px #555;
}
/*骰子样式*/
[class$='box']{
margin: 16px;
padding: 4px;
background-color: #e7e7e7;
width: 104px;
height: 104px;
/*图片的设置*/
object-fit: contain;
box-shadow:
inset 0 5px white,
inset 0 -5px #bbb,
inset 5px 0 #d7d7d7,
inset -5px 0 #d7d7d7;
border-radius: 10%;
}
#box1{
display: flex;
/*第一排左*/
justify-content: flex-start;
/*第一排中*/
justify-content: center;
/*第一排后*/
justify-content: flex-end;
/*第二排左*/
align-items: center;
/*第二排中*/
justify-content: center;
align-items: center;
/*第二排后*/
align-items: center;
justify-content: flex-end;
/*第三排左*/
justify-content: flex-start;
align-items: flex-end;
/*第三排中*/
justify-content: center;
align-items: flex-end;
/*第三排后*/
justify-content: flex-end;
align-items: flex-end;
}
#box2{
display: flex;
/*排九个*/
justify-content: space-between;
flex-wrap: wrap;
/*横排1 3*/
flex-direction: row;
justify-content: space-between;
/*竖排1 3*/
flex-direction: column;
justify-content: space-between;
/*竖排中中*/
flex-direction: column;
justify-content: space-between;
align-items: center;
/*竖排右右*/
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
/*斜角*/
justify-content: space-between;
}
#box2 .item:nth-child(2){
/*斜角*/
align-self: flex-end;
}
}
网格布局 用flex:1或是flex:0 0 50%;
基本网格布局，百分比网格
一：
HTML代码
<div class="Grid">
<div class="Grid-cell">...div>
<div class="Grid-cell">...div>
<div class="Grid-cell">...div>
div>
CSS代码
.Grid {
display: flex;
}
.Grid-cell {
flex: 1;
}
二：
HTML代码
<div class="Grid">
<div class="Grid-cell u-1of4">...div>
<div class="Grid-cell">...div>
<div class="Grid-cell u-1of3">...div>
div>
CSS样式
.Grid {
display: flex;
}
.Grid-cell {
flex: 1;
}
.Grid-cell.u-full {
flex: 0 0 100%;
}
.Grid-cell.u-1of2 {
flex: 0 0 50%;
}
.Grid-cell.u-1of3 {
flex: 0 0 33.3333%;
}
.Grid-cell.u-1of4 {
flex: 0 0 25%;
}
输入框布局
HTML代码
<div class="InputAddOn">
<span class="InputAddOn-item">...span>
<input class="InputAddOn-field">
<button class="InputAddOn-item">...button>
div>
CSS样式
.InputAddOn {
display: flex;
}
.InputAddOn-field {
flex: 1;
}
图文混排
HTML代码
<div class="Media">
<img class="Media-figure" src="" alt="">
<p class="Media-body">...p>
div>
CSS样式
.Media {
display: flex;
align-items: flex-start;
}
.Media-figure {
margin-right: 1em;
}
.Media-body {
flex: 1;
}