flex布局

2018-01-24 本文已影响0人羊烊羴

flex布局也叫弹性盒子，是由W3C提出的一种新的布局方式，目前兼容IE10+以上的浏览器，任何一个盒子包括行内元素都可以指定为Flex布局，只需要在它的父元素设置display:flex;即可

.box{
  display:flex;
}

注意，在设置了flex布局以后，其所有的子元素的float，clear和vertical- align属性都将失效

父元素设置flex后，会成为flex容器（box），它的所有子元素默认称为容器成员（item），容器默认存在两根轴线，水平的主轴线和垂直的交叉轴线

flex初始状态.png

在父元素（box）设置flex后，会有6个属性

box

flex- direction

flex-wrap

flex-flow

justify- content

align-items

align-content

下面我们来依次分析这几个属性

fiex-direction

该属性决定主轴的方向，也就是项目的排列方向，它有4个参数，主轴方向改变后交叉轴的方向也会改变

flex-direction:row;这个是默认值，默认主轴为水平方向，起点在左端
flex-direction:row-reverse;主轴为水平方向，起点在右端
flex-direction:column;主轴在垂直方向，起点在上端
fiex-direction:column-reverse;主轴在垂直方向，起点在下端

flex-direction.png

flex-wrap

该属性决定子元素如果不在一条轴线上如何换行

nowrap:该属性是默认属性，不换行，如果我们设定的item大小在一行上回超出box，那么不会溢出也不会换行，而是item会变形，从而适配当前box
wrap:正常换行，在第一行正下方
wrap-reverse:在第一行正上方换行，第一行会默认从底部开始

wrap.png

flex-flow

该属性是flex-direction和flex-wrap属性的简写，默认值是row nowrap;

.box{
  display:flex;
  flex-flow:row nowrap;
}

justify-content

该属性定义了项目在主轴上的对齐方式

flex-start：该属性是默认值，从左端对齐
flex-end：该属性规定从右端对齐
center：该属性规定居中对齐
space- between：该属性规定两端对齐，子元素之间的间隔都相等
space- around：该属性规定每个子元素的两侧的间隔相等，所以子元素之间的间隔比子元素与边框之间的间隔大一倍

justify-content.png

align-items

该属性定义项目在交叉轴上如何对齐

flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline：子元素的第一行文字的基线对齐
stretch：默认值，如果子元素未设置高度或auto，将占满整个父容器的高度

align-items.png

align-content

定义了多根轴线的对齐方式，如果父元素只有一根轴线，该属性不起作用

flex-start：与交叉轴的起点对齐
flex-end：与交叉轴的终点对齐
cengter：与交叉轴的中点对齐
space- between：与交叉轴的两端对齐，轴线之间的间隔平均分布
space-around：每跟轴线之间的距离相等所以轴线之间的间隔比与边框线之间的间隔大一倍
st retch：默认值，轴线占满整个交叉线

item

在父元素设置了flex属性后，子元素会有以下6个属性

order

flex-grow

flex-shrink

flex- basis

flex

aligr-self

下面我们来依次了解这些属性

order

该属性定义项目的排列顺序，数值越小，排列越靠前，默认为0

order.png

flex-grow

该属性定义项目的放大比例，默认为0，即使存在剩余空间，也不放大，如果所有子元素都设置该属性为1，那么他们将会等分剩余的空间，如果一个其中一个子元素的flex-grow属性设置为2，那么它将会比其他的子元素多一倍

flex-grow.png

flex-shrink

该属性定义了项目的缩小比例，默认为1，也就是说，如果空间不足，该项目将会缩小，如果所有项目的缩小比例都为1，那么如果空间不足，所有项目都将会等比例缩小，如果其中一个设置为0，那么在空间不足的情况下，其它项目会缩小，该项目不会缩小，该属性设置负值无效

flex- basis

属性定义在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余的空间，它的默认值为auto，即项目本来的大小，该属性可以设置和width或length属性一样的值，那么项目将占据固定的空间

flex

该属性是flex- grow，flex-shrink和flex- basis的简写，默认值为0 1 auto，后两个属性可选

align-self

该属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items属性，默认值为auto，表示继承父元素的 align-items属性，如果没有父元素，那么等同于 stretch

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

align-self.png

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。