浅谈Flex布局

传统的布局解决方案，是基于盒子模型，利用position + margin + float来完成；但这种布局方案对部分布局方式很不友好，比如水平垂直居中

Flex布局是W3C提供的一种新型布局解决方案，利用弹性盒子布局，可以做到响应式设计，更好的适配PC端和移动端

Flex基本概念

采用Flex布局的元素成为Flex容器（flex container），内部元素成为Flex项目（flex item）

Flex容器内部分为主轴（main axis）和交叉轴（cross axis）；项目分为主轴（main size）和交叉轴（cross size）

• 块元素设置flex： display: flex;
• 行内元素设置flex：display：inline-flex;

Flex容器属性

flex-direction

决定内部项目在主轴上如何排列

flex-direction: row | row-reverse | column | column-reverse

• row：项目从坐向右排列
• row-erverse：项目从右向左排列
• column：项目从上往下排列
• colum-reverse：项目从下往上排列

flex-warp

决定内部项目的换行方式

flex-warp: nowarp | warp | warp-reverse

• nowarp: 不换行
• warp：换行，换行元素在下方
• warp-reverse：换行，换行元素在上方

flex-flow

flex-direction和flex-warp的简写形式，默认是row nowarp

flex-flow: < flex-direction > < flex-wrap >;

justify-content

决定项目在主轴上的对齐方式

justify-content: flex-start | flex-end | center | space-between | space-around

• flex-start：左对齐
• flex-end：右对齐
• center：居中对齐
• space-between：两端对其，项目之间间隔相等
• space-around：每个项目两侧间隔相等，项目之间的间隔比项目与边框间隔大一倍

  

  

  

  

  

aline-items

决定项目在交叉轴上的对齐方式

aline-items: flex-start | flex-end | center | baseline | stretch

• flex-start：交叉轴起点对其，上对其
• flex-end：交叉轴终点对其，下对齐
• center：垂直居中
• baseline：项目的第一行文字基线对齐
• stretch（默认值）：如果项目未设置高度或auto，则项目高度填满容器

  

  

  

  

  

aline-content

定义了多轴线的对其方式，如果只存在一条轴线，则不起作用

aline-content: flex-start | flex-end | center | stretch | space-between | space-around

Flex项目属性

order

定义项目的排列顺序，数值越小排列越靠前，默认为0，负值有效

flex-grow

定义项目的放大比例，默认为0

flex-shrink

定义了项目的缩小比例，默认为1；负值无效

flex-basis

定义了在分配多余空间之前，项目占据的主轴空间，默认值为项目本来大小

flex

flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto

align-self

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