flex布局
以前的布局:float+position
缺点:兼容性,麻烦
flex box:弹性布局
任何元素都可以指定为弹性布局 display:flex;
webkit内核的浏览器,必须加上-webkit前缀。
设置flex布局后,子元素的float,clear,vertical-align属性会失效。
基本概念:采用flex布局的元素称为flex容器(flex container),它的所有子元素会自动成为flex项目(flex item)。容器默认存在两条轴,水平主轴(main axis)和垂直交叉轴(cross axis)。
容器的基本属性
flex-direction:定义元素排列的方向。一共有四个值,默认为row。
row:从左往右,类似于float:left
row-reverse:从右向左,类似于float:right
column:从上往下
column:从下往上
flex-wrap:定义元素的换行。一共有三个值,默认为nowrap(不换行)。
- nowrap:不换行
- wrap:换行
- wrap-reverse:换行(本应在第一行的位置在最后一行)
flex-flow:flex-direction||flex-wrap;这两种属性的结合。
- flex-flow:row nowrap
justify-content:定义元素在主轴上的对齐方式,一共有五个值。
- flex-start:左对齐
- flex-end:右对齐
- center:水平居中
- space-between:占据整整一行,两端分别没有左和右间距,剩下的间距平均分配。(两端对齐,项目之间的间距都相等)
- space-around:间距在项目中平均分配。(每个项目两侧的间隔都相等,所以边框处的间距比中间的间距小一半。
align-item:定义项目在交叉轴上如何对齐。
- flex-start:上对齐
- flex-end:下对齐
- center:垂直居中
- baseline:项目的第一行文字的基线对齐。
- stretch:默认值 如果项目未设置高度或设置为auto,将占满整个容器的高度。
align-content:定义了多根轴线的对齐方式。如果项目只有一根轴线,那么这个属性不起作用。
项目的基本属性
- order: 定义项目的排列顺序,数值越小,排列越靠前。
- flex-grow:定义项目的放大比例,如果所有项目的flex-grow属性为1,则它们将等分所有的剩余空间。
- flex-shrink:定义了项目的缩小比例,如果所有项目的flex-shrink属性为1,则它们将等比缩放。
- align-self:允许单个项目与其他项目的对其方式不一样。