一、简介:
flex( flexible box:弹性布局盒模型),是2009年w3c提出的一种可以简洁、快速弹性布局的属性。主要思想是给予容器控制内部元素高度和宽度的能力。目前已得到以下浏览器支持:
其中在webkit内核的浏览器中使用时,必须加上-webkit-前缀。
flex的相关概念的示意图
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
二、容器的属性
属性 | 属性的意义 | 属性的可能值 |
---|---|---|
flex-direction | 决定主轴的方向(即项目的排列方向) | row(默认) 、 row-reverse 、column 、column-reverse |
flex-wrap | 项目一条轴线排不下,如何换行 | nowrap(默认) 、 wrap 、 wrap-reverse |
flex-flow | flex-direction属性和flex-wrap属性的简写形式 | 默认值为row nowrap |
justify-content | 项目在主轴上的对齐方式(水平方向) | flex-start、flex-end 、 center 、 space-between 、 space-around |
align-items | 项目在交叉轴上如何对齐(垂直方向) | flex-start 、flex-end 、 center 、baseline、 stretch |
align-content | 多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用 | flex-start、flex-end 、center、 space-between 、 space-around、 stretch |
是写在父盒子(.box)中的属性
<style>
.box{
width:200px;
height: 200px;
border:1px solid #000;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row-reverse wrap;
flex-flow: row-reverse wrap;
}
.item{width: 50px;height: 60px;border:1px solid #000;}
</style>
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
1、flex-direction
属性值 | 属性值特性图 | 代码 | 显示图 |
---|---|---|---|
row(默认值):主轴为水平方向,起点在左端 | ![]() | ![]() | ![]() |
row-reverse:主轴为水平方向,起点在右端 | ![]() | ![]() | ![]() |
column:主轴为垂直方向,起点在上沿 | ![]() | ![]() | ![]() |
column-reverse:主轴为垂直方向,起点在下沿 | ![]() | ![]() | ![]() |
2、flex-wrap属性
属性值 | 代码 | 显示图 |
---|---|---|
nowrap(默认):不换行 | ![]() | ![]() |
wrap:换行,第一行在上方 | ![]() | ![]() |
wrap-reverse:换行,第一行在下方 | ![]() | ![]() |
3、flex-flow属性
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
flex-flow: row-reverse wrap
4、justify-content属性
属性值 | 显示图 |
---|---|
flex-start (默认值):左对齐 | ![]() |
flex-end:右对齐 | ![]() |
center : 居中 | ![]() |
space-between:两端对齐 | ![]() |
space-around:每个项目两侧的间隔相等 | ![]() |
5、align-items属性
属性值 | 显示图 |
---|---|
flex-start:交叉轴的起点对齐 | ![]() |
flex-end :交叉轴的终点对齐 | ![]() |
center:交叉轴的中点对齐 | ![]() |
baseline项目的第一行文字的基线对齐 | ![]() |
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度 | ![]() |
6、align-content属性
属性值 | 显示图 |
---|---|
flex-start:与交叉轴的起点对齐 | ![]() |
flex-end :与交叉轴的终点对齐 | ![]() |
center:与交叉轴的中点对齐 | ![]() |
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布 | ![]() |
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍 | ![]() |
stretch(默认值):如果项目未设置高度或设为auto,轴线占满整个交叉轴 | ![]() |
三、item(项目)中的属性
item的属性在item的style中设置。item共有如下六种属性
1、order:值是整数,默认为0,整数越小,item排列越靠前
如下图所示代码如下:
<div class="box">
<div class="item" style="order:3">item1</div>
<div class="item" style="order:2">item2</div>
<div class="item" style="order:1">item3</div>
</div>
效果图如下:
2、flex-grow
定义了当flex容器有多余空间时,item是否放大。默认值为0,即当有多余空间时也不放大;可能的值为整数,表示不同item的放大比例:
<div class="box">
<div class="item" style="flex-grow:1">item1</div>
<div class="item" style="flex-grow:2">item2</div>
<div class="item" style="flex-grow:3">item3</div>
</div>
即当有多余空间时item1、item2、和item3以1:2:3的比例放大
效果图如下: