新接触的,可是我的张大神早在2010年就写了box,box-flex的用法
大神把box-flex用狗血电视剧分家产剧情比喻,生动形象地说明,让我理解得容易了些,唉大神好贴心,举例说明满分
------------------
首先,是历史介绍
- box:将对象作为弹性伸缩盒显示。(伸缩盒最老版本)
- inline-box:将对象作为内联块级弹性伸缩盒显示。(伸缩盒最老版本)
- flexbox:将对象作为弹性伸缩盒显示。(伸缩盒过渡版本)
- inline-flexbox:将对象作为内联块级弹性伸缩盒显示。(伸缩盒过渡版本)
- flex:将对象作为弹性伸缩盒显示。(伸缩盒最新版本)
- inline-flex:将对象作为内联块级弹性伸缩盒显示。(伸缩盒最新版本)
- 第一种:display:box; 或者是一个属性box-*;那么你看到的是2009年以前的Flexbox。
- 第二种:display:flexbox,或者是一个函数flex(),那么你看到的是2011这个中间版本的Flexbox。
- 第三种:display:flex,或者其他flex-*的属性,那么你看到的是比较新的规范
--------------------------------------------------------------------------------------------------------------
flex,Flexible Box让所有灵活的项目都带有相同的长度,忽略它们的内容:
为Flex布局以后,子元素的float
、clear
和vertical-align
属性将失效。
其实分配的都是针对剩余空间,也就是除去元素内容(文字)后的空间是成比例的。
flex生效需定义其父元素display为flex或inline-flex(box或inline-box,这是旧的方式)
display: flex | inline-flex; (适用于父类容器元素上)
- flex:将对象作为弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)
- inline-flex:将对象作为内联块级弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)
任何一个容器都可以指定为Flex布局。
.box{
display: flex;
}
行内元素也可以使用Flex布局。
.box{
display: inline-flex;
}
Webkit内核的浏览器,必须加上-webkit
前缀。
.box{
display: -webkit-flex;
display: flex;
}
----------------基本概念--------
采用Flex布局的元素,称为Flex容器(flex container),简称"(父)容器"。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称"(子)项目"。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。
主轴的开始位置(与边框的交叉点)叫做main start
,结束位置叫做main end
;交叉轴的开始位置叫做cross start
,结束位置叫做cross end
。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size
,占据的交叉轴空间叫做cross size
。
----------------容器的属性--------
以下6个属性设置在容器(父元素)上。(Firefox、Opera 和 Chrome 支持)
flex-direction:属性决定主轴的方向(即项目的排列方向)
flex-wrap :拆行
flex-flow :方向+拆行
justify-content:定义了项目在主轴上的(水平)对齐方式,各项目周围留有空白
align-items
align-content
1,方向
.box {
flex-direction: row(默认值) | row-reverse | column | column-reverse;
}
2,拆行
.box{
flex-wrap:nowrap(默认值)| wrap | wrap-reverse;
}
3,flex-flow :方向+拆行,所以默认值为两者的默认值 row nowrap
4,justify-centent:水平对齐+自动间距,当然,如果没有可用空间时,即排版挤满了是没有效果的
.box {
justify-content: flex-start(默认) | flex-end | center | space-between | space-around;
}
5,align-items,居中对齐。
IE11、Firefox、Chrome 和 Opera 支持 align-items 属性。Safari、IE 9 及其之前的版本不支持 align-items 属性。IE 10 需要前缀 -ms-。
.box {
align-items: stretch(默认) | flex-start | flex-end | center | baseline(项目的第一行文字的基线对齐);
}
以下代码作为测试
<html> <head> <style> #main { width:220px; height:300px; border:1px solid black; display:flex; align-items:strech;//此处加不加都一样 } #main div { //flex: 1; } #div1{ width:40px;height:50px; } #div2{ width:50px;height:60px; } #div3{ width:70px;height:70px; } </style> </head> <body> <div id="main"> <div id="div1" style="background-color:coral;font-size:8px;">aa</div> <div id="div2" style="background-color:lightblue;font-size:28px;">bb</div> <div id="div3" style="background-color:pink;font-size:12px;">cc</div> </div> <p><b>注意:</b>Safari 不支持 align-items 属性。</p> </body> </html>
图:1.psd
align-content,灵活对齐,必须有多行的项目,该属性才能渲染出效果。仅Chrome 和 Opera 支持
.box { align-content: stretch(默认) | flex-start | flex-end | center | space-between | space-around; }
------------------------------------------------------------------------------------
灵活运用见Flex 布局教程:实例篇
比如,高度不定的图片,文字要在div中垂直居中,用这个就行啦
.box {
display: flex;
justify-content: center;
align-items: center;
}
参考文章: