CSS布局(2)-Flex

2017-09-15 20:32:49

总字数 875

预计阅读时间 3 分钟

Flex是Flexible Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。
目前，它已经得到了所有浏览器的支持
Flex布局将成为未来布局的首选方案

任何一个容器都可以指定为flex布局

/*对于块元素*/
.box {
  display : flex;
}
/*对于行内元素*/
.inline-box {
  display : inline-flex;
}

为了兼容性的需要 , 通常可以加上display:-webkit-flex;

设为Flex布局以后，子元素的float、clear和vertical-align属性将失效

Flex容器的基本模型

采用了flex布局的元素 , 可以称之为Flex容器 , 它的子元素自动成为这个容器的成员 , 被称为Flex项目
Alt text
容器默认存在两根轴：水平的主轴（main axis）和竖直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

Flex容器的属性

flex-direction

决定主轴的方向 , 也就是项目的排列方向

row(默认) | row-reverse | column | column-reverse

flex-direction

flex-wrap

默认情况下 , 项目都排列在一条轴线上 , 该属性定义了当一条轴线排列不下的时候 , 如何换行

nowrap(默认) | wrap | wrap-reverse

flex-wrap

flex-flow

这个属性是上面两个属性的简写形式 , 例如
flex-flow : column wrap , 就相当于 flex-direction:column;flex-wrap:wrap;

justify-content

项目在主轴上的对其方式

flex-start(默认) | flex-end | center | space-between | space-around

( 假设主轴为从左到右 ↓ )
justify-content

align-items

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

flex-start | flex-end | center | baseline | stretch(默认)

align-items

align-content

定义了多根轴线的对齐方式 , 如果项目只形成了一条轴线 , 那么该属性不起作用

flex-start | flex-end | center | space-between | space-around | stretch(默认)

align-content

项目的属性

order

定义项目的排列顺序 , 升序排列 , 默认值为0

flex-grow

定义项目的放大比例 , 默认为0 , 即为即使有剩余的空间 , 也不放大

这个值定义的是不同项目之间的放大比值
比如共有3个项目 , 一个项目的flex-grow为2 , 其余的为1 , 如果有剩余可供放大的空间为400px , 那个flex-grow为2的项目将多占据200px , 其余2个各自多占据100px

flex-shrink

定义项目的缩小比例 , 默认为1 , 即空间不足时 , 该项目将被压缩
与flex-grow类似 , 这个属性也是不同项目之间的一个比例
如果定义为0 , 则不会被压缩 , 负值无效

flex-basis

定义了在分配多余空间之前 , 项目占据的主轴空间

 <length> | auto(默认)

它可以设为像width height类似的值 , 比如100px , 项目将占据固定的主轴空间

flex

是flex-grow flex-shrink flex-basis的简写形式
默认 0 1 auto , 后两个值可选

align-self

允许单个项目与其他项目在交叉轴上有不同的对齐方式
也就是Flex容器定义的align-items在该项目上不会生效 , 而会被这个项目自身的align-self覆盖

auto(默认) | flex-start | flex-end | center | baseline | stretch

默认值auto表示继承父元素的align-items属性 , 除了auto以外 , 可以取的值与align-items完全一致
Alt text